React Native的NetInfo无法捕获WiFi重新连接的情况

Question

我正在构建一个小组件，它会显示一个红色条带，上面写着“无连接”。当我关闭wifi时，它可以正常工作，横幅出现正常。但是当我打开wifi后，NetInfo似乎没有收到事件，因此横幅仍然停留在原地。

控制台日志在打开WiFi时不会打印任何内容，所以我认为netinfo没有更新。

这是我的OfflineNotice组件：

import React, {useState, useEffect} from 'react';
import {View, StyleSheet, Dimensions, Text} from 'react-native';
import NetInfo from '@react-native-community/netinfo';

const {width} = Dimensions.get('window');

const OfflineNotice = () => {
  const [connected, setConnected] = useState(true);

  useEffect(() => {
    NetInfo.addEventListener((state) => {
      console.log(state);
      setConnected(state.isInternetReachable);
    });
  }, []);

  return (
    <View>
      {!connected && (
        <View style={styles.offlineContainer}>
          <Text style={styles.offlineText}>No Internet Connection</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  offlineContainer: {
    backgroundColor: '#b52424',
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    width,
    position: 'absolute',
    top: 30,
  },
  offlineText: {
    color: '#fff',
  },
});

export default OfflineNotice;

- Varun Joshi

---

你能在 useEffect 被触发时控制台输出吗？因为当卸载组件时，事件监听器会被销毁。你应该将监听器放在像 App.js 或 index 这样的位置，以便始终获取更新。 - anthony willis muñoz

我知道这有点老了，但是你找到解决方案了吗？ - sina farbod

@sinafarbod 不，我只是使用了一个npm模块：https://www.npmjs.com/package/react-native-offline - Varun Joshi

嘿@VarunJoshi，我使用了@react-native-community/netinfo和react-native-offline来创建一个OfflineNotice，但它们都不起作用。你能在这里帮助我吗？ - Kartikey

Answer 1

如果你正在使用hooks，为什么不尝试使用useNetInfo() hook呢？

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

- Cristian Riță

Answer 2

我正在使用@react-native-community/netinfo 6.0.0版本。

第一次我得到的是最新版本9.3.0，在这个版本中，代码没有监听网络变化。

const netInfo=useNetInfo();
useEffect(()=>{
console.log("network change", netInfo);
},[netInfo])

在android/build.gradle中

ext{
.....
 androidXCore="1.6.0"
 }

- Pravin Ghorle