如何在Expo托管工作流的React Native应用中检查网络连接？

嘿，我之前在Expo托管项目里也碰到过一模一样的困扰，给你推荐几个完全适配托管工作流的方案，不用eject也不用折腾原生依赖：

首选方案：使用Expo官方的expo-network库 #

这是最靠谱的方式，Expo官方维护的模块，完美支持托管工作流，不需要任何原生配置，直接就能用。它从系统层面获取网络状态，比发HTTP请求或者用navigator.onLine准确得多，还能监听网络状态变化。

步骤1：安装依赖 #

在项目根目录运行：

expo install expo-network

步骤2：使用示例 #

可以直接获取当前网络状态，也可以监听状态变化：

import { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import * as Network from 'expo-network';

export default function NetworkChecker() {
  const [isConnected, setIsConnected] = useState(false);
  const [networkType, setNetworkType] = useState('');

  useEffect(() => {
    // 初始化获取网络状态
    const fetchInitialNetworkState = async () => {
      const state = await Network.getNetworkStateAsync();
      setIsConnected(state.isConnected);
      setNetworkType(state.type);
    };

    fetchInitialNetworkState();

    // 监听网络状态变化
    const subscription = Network.addNetworkStateChangeListener((state) => {
      setIsConnected(state.isConnected);
      setNetworkType(state.type);
    });

    // 组件卸载时取消监听
    return () => subscription.remove();
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text>网络状态：{isConnected ? '已连接' : '未连接'}</Text>
      {isConnected && <Text>网络类型：{networkType}</Text>}
    </View>
  );
}

这个方法的优势很明显：

• 不需要发起HTTP请求，不消耗带宽，响应更快
• 直接读取系统的网络状态，能准确判断设备是否真的有网络连接（而不是某个特定网站是否可达）
• 支持监听网络状态的实时变化，方便做动态UI调整

为什么不推荐其他方案？ #

• navigator.onLine：在Expo的原生环境（iOS/Android）里不可靠，很多时候会返回错误的状态，不建议用
• 发HTTP请求测试：只能检测单个站点的连通性，没法区分是本地网络问题还是对方服务器故障，而且会消耗带宽和时间
• react-native-community/react-native-netinfo：确实需要原生依赖，托管工作流没法直接用，为了检测网络而eject太不值当

内容的提问来源于stack exchange，提问作者Dan B.