美文网首页ReactNative
React Native 基础之获取网络信息

React Native 基础之获取网络信息

作者: Kevin_小飞象 | 来源:发表于2019-03-01 10:29 被阅读1次

    在 React Native 中,NetInfo API 为我们提供了获取网络状态的方法。通过 NetInfo 我们可以检测到手机客户端设备当前的联网/断网状态。

    属性&方法

    • isConnected:表示网路是否连接
    • fetch():获取网络状态
    • addEventListener():添加事件监听
    • removeEventListener():删除事件监听

    获取网络状态类型

    上面提到使用 fetch() 方法可以获取到网络状态,在不同的平台下可能得到的状态值是不一样的。
    (1)iOS 平台

    • none:离线状态
    • wifi:在线状态,并且是连接的 wifi 网络,或者当前是 iOS 模拟器
    • cell :在线状态,通过连接 Edge、3G、WiMax 或者 LET 网络
    • unknown :该检测发生异常错误,或者网络状态未知

    (2)Android 平台

    • NONE:设备没有网络连接
    • BLUETOOTH:蓝牙数据连接
    • DUMMY:虚拟数据连接
    • ETHERNET:以太网数据连接
    • MOBILE:手机移动网络数据连接
    • MOBILE_DUN:拨号移动网络数据连接
    • MOBILE_HIPRI:高权限的移动网络数据连接
    • MOBILE_MMS:彩信移动网络数据连接
    • MOBILE_SUPL:SUP网络数据连接
    • VPN:虚拟网络连接 ,最低支持 Android API 21 版本
    • WIFI:无线网络连接
    • WIMAX:wimax网络连接
    • UNKNOWN:未知网络数据连接

    实例

    1. 逻辑代码

    import React, {Component} from 'react';
    import {
      StyleSheet, 
      Text, 
      NetInfo,
      View
    } from 'react-native';
    
    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          isConnected: null,
          connectionInfo:null
        };
        
      }
    
      componentDidMount() {
        //检测网络是否连接
        NetInfo.isConnected.fetch().done((isConnected) => {
          this.setState({isConnected});
        });
    
        //检测网络连接信息
        NetInfo.fetch().done((connectionInfo)=> {
          this.setState({connectionInfo});
        });
    
        //监听网络变化事件
        NetInfo.addEventListener('change',(networkType) => {
          this.setState({isConnected:networkType});
        });
      }
    
      
    
      render() {
        return (
          <View style = {styles.container}>
            <Text style={styles.text}>
              当前的网络状态:
              {this.state.isConnected ? '网络在线': '离线'}
            </Text>
            <Text style={styles.text}>
              当前网络连接类型: 
              {this.state.connectionInfo}
            </Text>
            <Text style={styles.text}>
              当前连接网络是否计费:
              {NetInfo.isConnectionExpensive === true ? '需要' : '不要'}
            </Text>
          </View>
        );
      }
    
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        paddingTop: 30,
        backgroundColor: '#F5FCFF',
      },
      text: {
        fontSize: 18,
        margin: 10,
        textAlign: 'left'
      },
    });
    

    2. 效果图

    netinfo.jpg

    相关文章

      网友评论

        本文标题:React Native 基础之获取网络信息

        本文链接:https://www.haomeiwen.com/subject/crvruqtx.html