React Native 通过监听器检查是否有网络连接。

Question

在你的观点中，这是正确的方法：

  const [isNetwork, setIsNetwork] = useState(true);
  const [isChangeNetwork, setIsChangeNetwork] = useState(false);



useEffect(() => {
    NetInfo.fetch().then(({ isConnected, isInternetReachable }) =>
      setIsNetwork(isConnected && isInternetReachable)
    );
    const unsubscribe = NetInfo.addEventListener(
      ({ isConnected, isInternetReachable }) => {
        setIsNetwork(isConnected && isInternetReachable);
        setIsChangeNetwork(true);
      });
    return () => unsubscribe.remove();
  }, []);


...

 <Snackbar
          visible={isChangeNetwork}
          onDismiss={() => setIsChangeNetwork(false)}
          duration={3000}
          theme={{ colors: { inverseSurface: isNetwork ? 'green' : 'red' } }}>
          {isNetwork ? "Internet" : "No Internet"}
        </Snackbar>

首先我遇到错误：这里：return () => unsubscribe.remove(); Visual Studio 也告诉我：

Property 'remove' does not exist in type 'NetInfoSubscription'.ts(2339)

你能给我提供一个更好的方法吗？

一个问题是，当启动应用程序时，即使有互联网连接，Snackbar 也会出现并显示有互联网。

相反，我希望 Snackbar 只在以下情况下出现：

1. 启动应用程序时没有互联网连接
2. 状态发生变化，例如以下情况：

a) 首先有互联网连接（然后不会出现任何东西），然后没有互联网连接（然后 Snackbar 出现）

b) 首先没有互联网连接（然后 Snackbar 出现），然后有互联网连接（然后 Snackbar 出现）

你能帮帮我吗？

- Paul

Answer 1

对于我的项目，我创建了一个自定义的netInfo hook，它对我来说运行良好。你可以尝试使用下面的代码与你的snackBar一起使用。 useNetInfo.js ::::::自定义Hook

import NetInfo from '@react-native-community/netinfo';
import { useEffect, useState } from 'react';
import { blue } from 'console-log-colors';

const useNetInfo = () => {
  
  const [connectionInfo, setConnectionInfo] = useState(false);

  useEffect(() => {

    NetInfo.fetch().then(state => {
      console.log(blue(':::-> Is Internet connected '), state.isConnected);
      setConnectionInfo(state.isConnected);
    });

   let netInfoListener = NetInfo.addEventListener(state => {
      console.log(blue(':::-> Internet connection sate '), state.isConnected);
      setConnectionInfo(state.isConnected);
    });

    return () => netInfoListener  //<- Try this Instead of netInfoListener.remove();


  }, [connectionInfo]);

  return [connectionInfo];
};

export default useNetInfo;

App.js

const App = () => {

  const [connectionInfo] = useNetInfo(); //<- Here's how I've used netInfo customHook

  console.log(connectionInfo)

  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <NavigationContainer>
          <Main />
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
};

export default App;

- Atul Tiwaree

Answer 2

你的逻辑是正确的，唯一需要做的就是使用unsubscribe();而不是unsubscribe.remove();。

useEffect(() => {
    NetInfo.fetch().then(({ isConnected, isInternetReachable }) =>
      setIsNetwork(isConnected && isInternetReachable)
    );
    const unsubscribe = NetInfo.addEventListener(
      ({ isConnected, isInternetReachable }) => {
        setIsNetwork(isConnected && isInternetReachable);
        setIsChangeNetwork(true);
      });
    return () => unsubscribe();
}, []);

- Thanhal P A

---

终于也解决了，问题是监听器被调用太多次。请参考此示例：https://snack.expo.dev/e0-ElvANW - undefined

如果有网络连接，您可以选择在启动应用时不显示消息。 - undefined

它甚至都不工作，情况一样。 一开始总是出现写着有互联网的字样，如果有的话。 监听器被调用太多次了。 - undefined

请您尝试使用更新后的代码，其中包含了对不必要的状态更新进行条件判断。如果问题仍然存在，可能是您的软件包版本或设备出现了一些问题（请更换设备并进行检查），导致NetInfo在网络没有任何变化的情况下仍然监听。 - undefined

情况： 当连接不存在，然后被激活时，不会显示连接已建立的消息。 - undefined