React Native 中的 NetInfo 模块的 getConnectionInfo() 方法 - React Native 中文文档

React Native 中的 NetInfo 模块的 getConnectionInfo() 用于立即获取当前的网络状态。

语法

NetInfo.getConnectionInfo().then((connectionInfo) => {
  console.log(
    'Initial, type: ' +
      connectionInfo.type +
      ', effectiveType: ' +
      connectionInfo.effectiveType,
  );
});

导入模块

import { NetInfo } from 'react-native'

或者

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

方法说明

原型	返回值	平台	说明
static isConnectionExpensive()	Promise	Android,iOS	立即获取当前的网络状态

NetInfo.getConnectionInfo() 返回一个 Promise，最终解析值为带有 type 和 effectiveType 属性的对象。其中 type 属性的值为 ConnectionType ，而 effectiveType 属性的值为 EffectiveConnectionType。

范例

下面的范例，使用 NetInfo 模块的 getConnectionInfo() 方法立即获取当前的网络状态

import React, {Component} from 'react';
import {Text,View, NetInfo} from 'react-native';

export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
      connectionInfo:{
        type:'none',
        effectiveType:'ethernet'
      }
    }

    var that = this;
    NetInfo.getConnectionInfo().then((connectionInfo) => {
      that.setState({connectionInfo})
    });
  }

  render() {

    const {connectionInfo} = this.state

    return (
      <View>
          <Text>当前的网络类型是： {connectionInfo.type } - {connectionInfo.effectiveType} </Text>
          <Text>简单教程，简单编程 (https://www.twle.cn)</Text>
      </View>
    );
  }
}