React native 检查React原生应用程序的状态'；s连通性

我安装NetInfo以确定我的应用程序连接状态，方法是将其实现到CheckConnection组件中。基本上，它是一种模式，包括一个闪烁的图标和一些文本，当连接断开时，这些文本将覆盖主屏幕，反之亦然

我尝试关闭互联网，模式显示完美，但当我再次打开wifi时，当我在整个调试过程中重新加载应用程序时，该应用程序只是重新出现在主屏幕上，而不是自动检测

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

我在用电话。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,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[icon]=useState（“网络强度关闭”）
const netinfo=useNetInfo（）
const[isConnected，setIsConnected]=useState（false）
MaterialinanceStom=Animatable.createAnimatableComponent（MaterialIcon）
useffect（（）=>{
NetInfo.addEventListener（状态=>{
console.log（状态）
setIsConnected（state.isInternetReachable）
})
}，[netin]）
返回(
setIsConnected（true）}
onRequestClose={（）=>setIsConnected（true）}
supportedOrientations={[“横向”、“纵向”]}>
请检查您的互联网连接
)
...

主要组件

...

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",

                    }}
 ...

。。。
常量获取数据=[
调度（fetchdisks（）），
分派（fetchComments（）），
调度（fetchLeaders（）），
分派（fetchPromos（））
]
useLayoutEffect（（）=>{
Promise.all（fetchingData）.then（response=>console.log（response））
})
常量抽屉尺寸=使用WindowDimensions（）；
const isLargeScreen=DroperDimension.width>=768；
返回(