订阅和取消订阅 React Native Netinfo 的正确方法答案

【问题标题】：Correct way to subscribe and unsubscribe React Native Netinfo订阅和取消订阅 React Native Netinfo 的正确方法
【发布时间】：2021-07-27 04:45:46
【问题描述】：

根据此处的文档订阅和取消订阅 Netinfo 监听器 - https://github.com/react-native-netinfo/react-native-netinfo

我在一个通用文件中定义监听方法并导出

/* util.js */
function listener(){
  Netinfo.addEventListener(state => /* something in here */);
}

export { listener };

然后在一个 React 组件中

import { useEffect } from 'react';
import { listener } from 'util';

const exampleComponent = props => {
  
  // then on useeffect
  useEffect(() => {
    listener() // to subscribe

    return () => listener(); // to unsubscribe
  }, []);

  return <ExampleComponent />
}

如果我想将侦听器设置为可在任何地方设置的可导出方法，这是设置 Netinfo 侦听器的正确方法吗（尽管按照逻辑，它应该只在应用程序的主文件上设置，但只是为了问题）？

我不确定第一次调用 listener 会如何订阅 Netinfo 监听器，再次调用它会取消订阅。

【问题讨论】：

标签： javascript react-native react-native-community-netinfo

【解决方案1】：

你可以试试这个，


    import NetInfo from "@react-native-community/netinfo";
    
    const [isConnected, setIsConnected] = useState(true);
    
    NetInfo.fetch().then(state => {
            if (state.isConnected && state.isInternetReachable) {
                setIsConnected(true);
            } else {
                setIsConnected(false);
            }
        });
    
    useEffect(() => {
            const unsubscribe = NetInfo.addEventListener(state => {
                if (state.isConnected && state.isInternetReachable) {
                    setIsConnected(true);
                } else {
                    setIsConnected(false);
                }
            });
            if (isConnected) {
                
            } else {
                unsubscribe();
            }
        }, []);

【讨论】：

【解决方案2】：

如果我想将侦听器设置为可在任何地方设置的可导出方法，这是设置 Netinfo 侦听器的正确方法吗（尽管按照逻辑，它应该只在应用程序的主文件上设置，但只是为了问题）？

如果你想设置一次多次使用，不需要自己动手，可以使用useNetInfo()

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>
  );
};

【讨论】：