React native android中的NetInfo崩溃

我正在使用NetInfo获取连接，但一些android设备会因此崩溃

日志：

在我的代码中：

import MaxApiManager from '@common/MaxApiManager';
import { throttle } from 'lodash';
import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Image, StyleSheet, Text } from 'react-native';
import ChatImages from 'src/screens/Chat/img';
import { mapNameWithLocalContact } from 'src/screens/Chat/utils/ChatUtils';
import { Avatar, Skeleton } from '@momo-platform/component-kits';
import NetInfo from '@react-native-community/netinfo';

export function HeaderConversation({
    relationShip,
    relationshipText,
    friendInfo = {},
    goToProfile = () => {},
}) {
    const [isConnected, setIsConnected] = useState(true);

    useEffect(() => {
        NetInfo?.fetch()?.then(state => {
            setIsConnected(state.isConnected);
        });
    }, []);

    return (
        <View style={styles.headerLeft}>
            <TouchableOpacity
                style={styles.buttonBack}
                onPress={throttle(() => MaxApiManager.dismiss(), 1000, {
                    leading: true,
                    trailing: false,
                })}
            >
                <Image source={ChatImages.ic_back} style={styles.icBack} />
            </TouchableOpacity>
            {relationShip || isConnected === false ? (
                <TouchableOpacity onPress={goToProfile} style={styles.info}>
                    <Avatar
                        size="small"
                        name={friendInfo?.name}
                        source={{ uri: friendInfo?.avatar }}
                    />

                    <View style={{ marginLeft: 12 }}>
                        <Text style={styles.txtRoomName}>
                            {mapNameWithLocalContact({
                                phone: friendInfo?.phone,
                                name: friendInfo?.name,
                            })}
                        </Text>
                        {relationShip && <Text>{relationshipText}</Text>}
                    </View>
                </TouchableOpacity>
            ) : (
                <View style={{ paddingTop: 12 }}>
                    <Skeleton.Custom
                        left={<Skeleton.Media size={35} />}
                        style={styles.skeletonItem}
                    >
                        <Skeleton.Line style={styles.width_1_9} />
                        <Skeleton.Line style={styles.width_1_10} />
                    </Skeleton.Custom>
                </View>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    headerLeft: {
        paddingLeft: 8,
        flexDirection: 'row',
        alignItems: 'center',
    },
    buttonBack: { padding: 8, marginRight: 4 },
    width_1_9: { width: 150, height: 16 },
    width_1_10: { width: 100, height: 12, marginTop: -6 },
    skeletonItem: {
        marginVertical: 5,
    },
    info: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    txtRoomName: { fontSize: 16, fontWeight: 'bold' },
    icBack: { width: 24, height: 24 },
});

更多资料： @react本地社区/网络信息：^5.9.9

---

react native:0.61.5

在功能组件中获取网络状态信息的最简单方法是使用

useNetInfo

从'@react native community/netinfo'导入{useNetInfo}；
constyourcomponent=（）=>{
const netInfo=useneinfo（）；
返回(
类型：{netInfo.Type}
是否已连接？{netInfo.isConnected.toString（）}
);
};

---

有关属性对象的更多详细信息：

我们有一个NetInfo的eventListener，错误是我们没有删除此事件，而对于android，NetworkCallbacks有一个限制（可能是100）

嗨，Anhdevit，你能发布组件的完整代码吗？更新了我的代码谢谢，你是否按照答案尝试使用useNetInfo？如果这也不起作用，那么我们必须找其他地方。对不起，我再次更新了我的代码。我们有很多模块，所以我发现另一个模块是分析模块，我们初始化事件监听器NetInfo，但事件在应用程序的整个生命周期中都是活动的。所以在这篇文章中，他们说NetworkCallbacks的最大值是100，我想这是我的应用程序崩溃的原因，好吧，然后试着取消订阅侦听器。请看这里以供参考。我想我需要签入我的包文件

import MaxApiManager from '@common/MaxApiManager';
import { throttle } from 'lodash';
import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Image, StyleSheet, Text } from 'react-native';
import ChatImages from 'src/screens/Chat/img';
import { mapNameWithLocalContact } from 'src/screens/Chat/utils/ChatUtils';
import { Avatar, Skeleton } from '@momo-platform/component-kits';
import NetInfo from '@react-native-community/netinfo';

export function HeaderConversation({
    relationShip,
    relationshipText,
    friendInfo = {},
    goToProfile = () => {},
}) {
    const [isConnected, setIsConnected] = useState(true);

    useEffect(() => {
        NetInfo?.fetch()?.then(state => {
            setIsConnected(state.isConnected);
        });
    }, []);

    return (
        <View style={styles.headerLeft}>
            <TouchableOpacity
                style={styles.buttonBack}
                onPress={throttle(() => MaxApiManager.dismiss(), 1000, {
                    leading: true,
                    trailing: false,
                })}
            >
                <Image source={ChatImages.ic_back} style={styles.icBack} />
            </TouchableOpacity>
            {relationShip || isConnected === false ? (
                <TouchableOpacity onPress={goToProfile} style={styles.info}>
                    <Avatar
                        size="small"
                        name={friendInfo?.name}
                        source={{ uri: friendInfo?.avatar }}
                    />

                    <View style={{ marginLeft: 12 }}>
                        <Text style={styles.txtRoomName}>
                            {mapNameWithLocalContact({
                                phone: friendInfo?.phone,
                                name: friendInfo?.name,
                            })}
                        </Text>
                        {relationShip && <Text>{relationshipText}</Text>}
                    </View>
                </TouchableOpacity>
            ) : (
                <View style={{ paddingTop: 12 }}>
                    <Skeleton.Custom
                        left={<Skeleton.Media size={35} />}
                        style={styles.skeletonItem}
                    >
                        <Skeleton.Line style={styles.width_1_9} />
                        <Skeleton.Line style={styles.width_1_10} />
                    </Skeleton.Custom>
                </View>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    headerLeft: {
        paddingLeft: 8,
        flexDirection: 'row',
        alignItems: 'center',
    },
    buttonBack: { padding: 8, marginRight: 4 },
    width_1_9: { width: 150, height: 16 },
    width_1_10: { width: 100, height: 12, marginTop: -6 },
    skeletonItem: {
        marginVertical: 5,
    },
    info: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    txtRoomName: { fontSize: 16, fontWeight: 'bold' },
    icBack: { width: 24, height: 24 },
});

const AnalyticModule = {
    netInfoSub: null,

    initialize(deviceInfo) {
        UserProfile.getInstance().getData().then((profile) => {
            Storage.getItem("", (ipAddress) => {
                StorageCache.get("").then(location => {
                    if (!this.netInfoSub) {
                        this.netInfoSub = NetInfo.addEventListener((state) => {
                            let netInfo = getNetworkInfo(state);
                            this.TRACKING_NETWORK_INFO = JSON.stringify(netInfo);
                        })
                    }
                })
            })
        })
    },
}

import {useNetInfo} from '@react-native-community/netinfo';

const YourComponent = () => {
  const netInfo = useNetInfo();

  return (
    <View>
      <Text>Type: {netInfo.type}</Text>
      <Text>Is Connected? {netInfo.isConnected.toString()}</Text>
    </View>
  );
};