React Native iOS中如何区分网络连接类型？

你使用的@react-native-community/netinfo@6.0.0版本其实完全支持获取具体的网络连接类型，无需更换其他库，以下是具体实现方法：

1. 确认库的安装与配置 #

• 若未安装，执行安装命令：

  npm install @react-native-community/netinfo --save
  # 或使用yarn
  yarn add @react-native-community/netinfo
  

• iOS端进入项目的ios目录，执行：

  pod install
  

2. 获取当前网络类型 #

导入库后，通过异步方法获取当前网络状态：

import NetInfo from '@react-native-community/netinfo';

const checkNetworkType = async () => {
  const networkState = await NetInfo.fetch();
  
  switch(networkState.type) {
    case 'wifi':
      console.log('当前为Wifi连接');
      // 此处添加Wifi连接的业务逻辑
      break;
    case 'cellular':
      console.log('当前为移动数据连接');
      // 此处添加移动数据连接的业务逻辑
      break;
    default:
      console.log('当前无网络或未知连接类型');
  }
};

// 调用函数检测
checkNetworkType();

3. 监听网络类型变化 #

如果需要实时监听网络类型的切换，可以添加监听事件：

// 添加监听
const unsubscribe = NetInfo.addEventListener((networkState) => {
  console.log('网络类型变更为:', networkState.type);
  if (networkState.type === 'wifi') {
    // Wifi连接后的处理
  } else if (networkState.type === 'cellular') {
    // 移动数据连接后的处理
  }
});

// 在组件卸载时取消监听（例如在React组件的useEffect中）
// useEffect(() => {
//   return () => unsubscribe();
// }, []);

4. 额外的移动数据细节 #

若需要获取移动数据的代际信息（如4G/5G），可以访问networkState.details：

if (networkState.type === 'cellular') {
  console.log('移动数据代际:', networkState.details.cellularGeneration); // 输出'2g'/'3g'/'4g'/'5g'等
  console.log('是否为按流量计费网络:', networkState.details.isConnectionExpensive); // 移动数据通常返回true
}

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