React Native离线/在线切换时屏幕处理及网络状态检测问题

一、修复NetInfo网络状态监听失效问题 #

1. 简化状态判断逻辑 #

isInternetReachable在部分平台（如iOS模拟器、部分Android设备）存在检测延迟或兼容性问题，优先基于isConnected做基础判断，若需验证真实联网状态可增加容错处理：

const [isOffline, setIsOffline] = useState(false);

useEffect(() => {
  // 初始化获取当前网络状态
  const getInitialState = async () => {
    const state = await NetInfo.fetch();
    // 当isInternetReachable未返回时，默认按isConnected状态判断
    const hasInternet = state.isConnected && (state.isInternetReachable ?? true);
    setIsOffline(!hasInternet);
  };

  getInitialState();

  // 订阅网络状态变化
  const unsubscribe = NetInfo.addEventListener((state) => {
    const hasInternet = state.isConnected && (state.isInternetReachable ?? true);
    const offline = !hasInternet;
    setIsOffline(offline);
  });

  return () => unsubscribe();
}, []);

2. 验证平台权限配置 #

• Android：在AndroidManifest.xml中添加必要权限

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

• iOS：确保Info.plist未限制网络访问，若需蜂窝网络权限需添加对应配置

二、解决断网空白与联网后无响应问题 #

1. 断网时显示占位UI #

根据isOffline状态切换渲染内容，避免页面空白：

if (isOffline) {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>网络已断开，请检查连接</Text>
    </View>
  );
}

// 正常数据渲染逻辑
return (
  // 你的页面内容
);

2. 联网后自动重新拉取数据 #

监听isOffline状态变化，从离线切换到在线时触发数据重新获取：

const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);

// 封装数据获取函数
const fetchData = async () => {
  setIsLoading(true);
  try {
    const response = await fetch('你的接口地址');
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    const result = await response.json();
    setData(result);
  } catch (error) {
    console.error('数据获取失败:', error);
    // 可保留旧数据或显示错误提示
  } finally {
    setIsLoading(false);
  }
};

// 初始化加载数据
useEffect(() => {
  fetchData();
}, []);

// 联网后重新加载
useEffect(() => {
  if (!isOffline) {
    fetchData();
  }
}, [isOffline]);

3. 增强fetch请求容错 #

即使NetInfo显示在线，也可能存在请求失败情况，需在请求中添加错误处理，避免页面异常：

const fetchData = async () => {
  setIsLoading(true);
  try {
    const response = await fetch('你的接口地址', {
      timeout: 10000 // 添加超时限制
    });
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    const result = await response.json();
    setData(result);
  } catch (error) {
    console.error('数据获取失败:', error);
    // 显示错误提示或保留现有数据
  } finally {
    setIsLoading(false);
  }
};

内容的提问来源于stack exchange，提问作者localdata01