React-Native 获取设备当前网络状态 NetInfo

Posted 2021-09-29 杨周龙

`react-native` 应用获取设备网络状态可以使用 `NetInfo` 包进行获取。

NetInfo

NetInfo 模块可以获取设备当前的联网状态，可以订阅和一次性获取网络状态。以前在react-native集成，现在已经单独移到 @react-native-community 社区管理。

• 安装(ios需要pod install)

yarn add @react-native-community/netinfo

• 引入模块

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

• 一次性获取网络状态

NetInfo.fetch().then(state => {
  console.log("网络链接类型", state.type);
  console.log("网络是否链接?", state.isConnected);
})

• 订阅网络状态（hooks）

import {useNetInfo} from "@react-native-community/netinfo"

const YourComponent = () => {
  const netInfo = useNetInfo()
  
  return (
    <View>
      <Text>网络类型: {netInfo.type}</Text>
      <Text>网络是否链接? {netInfo.isConnected.toString()}</Text>
    </View>
  );
}

官方git仓库参考：https://github.com/react-native-netinfo/react-native-netinfo#usenetinfo