netinfo 反應本機的問題

Question

我想在應用程序失去互聯網連接時呈現特定屏幕，當應用程序從后台打開時，附加的代碼會工作一次。

任何建議

import { useNetInfo } from '@react-native-community/netinfo';
    
    export default () => {
      const netInfo = useNetInfo();
      useEffect(() => {
        SplashScreen.hide();
      }, []);
    
      return netInfo.isConnected ? (
        <SafeAreaProvider>
          <Provider store={store}>
            <App />
          </Provider>
        </SafeAreaProvider>
      ) : (
        <NoInternet />
      );
    };

Answer 1

嘗試這個

useEffect(() => {
  NetInfo.fetch().then(state => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
    if(state.isConnected==false) naviagtion.navigate("yourscreenname")
  });
  const unsubscribe = NetInfo.addEventListener(state => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
    setConnectionStatus(state.isConnected)
  });
  return unsubscribe
},[])

Answer 2

我會測試可達性而不是連接性。 像這樣的東西應該工作。 首次檢查時，當前可達性將返回 null。 我認為最好將其默認為 true，而不是在沒有 Internet 視圖的情況下閃爍。

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

export default () => {
  const netInfo = useNetInfo();
  const [reachable, setReachable] = useState(true);
  useEffect(() => {
    SplashScreen.hide();
    const unsubscribe = NetInfo.addEventListener(state => {
      setReachable(state.isInternetReachable == null? true : 
       state.isInternetReachable)
  });
  return unsubscribe
  }, []);

  return reachable ? (
    <SafeAreaProvider>
      <Provider store={store}>
        <App />
      </Provider>
    </SafeAreaProvider>
  ) : (
    <NoInternet />
  );
};

Answer 3

在上下文或 redux 中獲取 Internet 連接連接的狀態變量，我已經在許多這樣的應用程序中實現了它。 嘗試使用以下代碼。

Answer 4

嘗試使用此版本的 NetInfo：

yarn add @react-native-community/netinfo@6.2.0