0

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

4

2 回答 2

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();
            }
        }, []);
于 2021-07-27T05:34:00.230 回答
1

如果我想将侦听器设置为可以在任何地方设置的可导出方法，这是设置 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>
  );
};
于 2021-07-27T05:41:20.350 回答