检查React-Native应用程序的连接状态

问题描述

• 我安装NetInfo以确定其在 CheckConnection 组件中的应用连接状态。基本上，这是一种模式，包括闪烁的图标和一些文本，每当断开连接时，这些文本就会覆盖主屏幕，反之亦然。

• 我尝试关闭Internet，并且Modal出现得很好，但是当我再次打开wifi时，在调试过程中重新加载该应用时，该应用只是重新出现在主屏幕上，而不是自动检测

有人知道如何处理这个问题吗？？

我正在使用react-native-community/react-native-netinfo。 NetInfor已从React核心组件中删除。

非常感谢大家

---

CheckConnection.js

... 

const [icon] = useState("network-strength-off")
const netInfor = useNetInfo()
const [isConnected,setIsConnected] = useState(false)

MaterialIconCustom = Animatable.createAnimatableComponent(MaterialIcon)

useEffect(() => {
    NetInfo.addEventListener(state => {
        console.log(state)
        setIsConnected(state.isInternetReachable)
    })
},[netInfor])

return (
    <Modal
        visible={!isConnected}
        animationType="fade"
        transparent={true}
        ondismiss={() => setIsConnected(true)}
        onRequestClose={() => setIsConnected(true)}
        supportedOrientations={["landscape","portrait"]} >
        <View style={{ flex: 1,backgroundColor: 'rgba(100,100,0.8)',justifyContent: 'center',alignItems: 'center' }}>
            <Animatable.Text
                useNativeDriver={true}
                style={{ fontSize: 20,paddingBottom: 20,color: "black",fontWeight: 'bold' }}
            >Please check your internet connection</Animatable.Text>
            <MaterialIconCustom
                delay={1000}
                direction="alternate"
                animation="fadeIn"
                iterationCount="infinite"
                name={icon}
                size={100}
                color="pink" />
        </View>
    </Modal>
)

...

主要组件

...

const fetchingData = [
    dispatch(fetchdishes()),dispatch(fetchComments()),dispatch(fetchleaders()),dispatch(fetchPromos())
]

useLayoutEffect(() => {
    Promise.all(fetchingData).then(response => console.log(response))
})

const drawerDimension = useWindowDimensions();
const isLargeScreen = drawerDimension.width >= 768;
return (
    <>
        <CheckConnection />

        <View style={styles.container}>
            <NavigationContainer>
                <Main_DrawerNavigation.Navigator
                    // openByDefault="true"
                    initialRouteName="Menu"
                    drawerType={isLargeScreen ? "pernament" : 'front'}
                    drawerStyle={isLargeScreen ? null :
                        {
                            width: '70%',backgroundColor: "#E5DEF6",padding: 10,}}
                    overlayColor="transparent"
                    drawerContentOptions={{
                        activeBackgroundColor: "#D8CDF2",}}
 ...

---

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）