React Native 中的 NetInfo 模块的 isConnected 属性

返回上一级

React Native 中的 NetInfo 模块的 isConnected 属性以异步方式获取一个布尔值,用于判断当前设备是否联网

Android

要在 Android 上获取联网状态,还需要在 AndroidManifest.xml 中添加如下权限请求

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

语法

NetInfo.isConnected.fetch().then(isConnected => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});

或者

function handleFirstConnectivityChange(isConnected) {
  console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
  NetInfo.isConnected.removeEventListener(
    'connectionChange',
    handleFirstConnectivityChange
  );
}
NetInfo.isConnected.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

导入模块

import { NetInfo } from 'react-native'

或者

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

属性说明

属性 类型 平台
isConnected 对象 (object) Android,iOS

NetInfo 模块的 isConnected 属性类型并不是简单的原始类型,而是一个对象 ( Object )

而且,它还包含以下方法

方法 平台 说明
addEventListener() Android,iOS 注册一个监听器,用于处理网络状态变更回调
removeEventListener() Android,iOS 移除之前注册的网络变更回调监听器
fetch() Android,iOS NetInfo.getConnectionInfo().then()的缩写

范例 1

下面的范例,使用 NetInfo 模块的 isConnected 属性的 fetch() 方法立即获取网络的状态: 'online' or 'offline'

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

export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
      isConnected: 'offline'
    }

    var that = this;
    NetInfo.isConnected.fetch().then(isConnected => {
        that.setState({isConnected})
    });
  }

  render() {

    const {isConnected} = this.state

    return (
      <View>
          <Text>当前的网络状态是 {isConnected ? '有网络' : '无网络' } </Text>
          <Text>简单教程简单编程 (https://www.twle.cn)</Text>
      </View>
    );
  }
}

范例 2

下面的范例,使用 NetInfo 模块的 isConnected 属性的 addEventListener() 方法注册一个监听器,用于处理网络状态:'online' or 'offline' 变更时的回调

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

export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
      isConnected: 'offline'
    }

    var that = this;

    NetInfo.isConnected.addEventListener(
      'connectionChange',
      this.handleFirstConnectivityChange.bind(this)
    );

    NetInfo.isConnected.fetch().then(isConnected => {
        that.setState(isConnected)
    });
  }


  handleFirstConnectivityChange(isConnected) {
    this.setState(isConnected)
    NetInfo.isConnected.removeEventListener(
      'connectionChange',
      this.handleFirstConnectivityChange.bind(this)
    );
  }

  render() {

    const {isConnected} = this.state

    return (
      <View>
          <Text>当前的网络状态是 {isConnected ? '有网络' : '无网络' } </Text>
          <Text>简单教程简单编程 (https://www.twle.cn)</Text>
      </View>
    );
  }
}

返回上一级

React Native 中文文档

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.