Question

基于此处的文档订阅和取消订阅 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 侦听器，再次调用它会取消订阅。

Answer 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();
            }
        }, []);

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

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

2 个答案: