React Native－18.React Native 常用API及实践 NetINfo

没图你说个xx

NetInfo简介

NetInfo 用来获取网络状态。

提供的属性方法如下：
- isConnected : 表示网络是否连接
- fetch（）： 获取网络状态
- addEvent Li 沙特呢人（eventName，handler）：添加事件监听。
- removeEventListener：（eventName，handler）：删除事件监听。

其中，网络状态主要有以下几种类型。
- none：离线状态。
- wifi：在线状态。并且通过WiFi或者是iOS 模拟器连接。
- cell： 网络连接。通过3g，WiMax或者LTE进行连接。蜂窝网络。
- unknown：错误情况。网络状态未知。

直接上代码：

老样子，我们封装一个组件：
netinfo.js

var React = require('react-native')

var {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    NetInfo,
    TouchableOpacity,
    PixelRatio,
}  = React;

var Netinfo = React.createClass({
    getInitialState: function(){
        return{
            netstate:null
        }
    },

    componentDidMount: function(){
        // NetInfo.addEventListener('change',function(reachability){
        //  alert(reachability)
        // });
    },

    render:function(){
        return(
            <View style= {styles.flex}>
                <TouchableOpacity
                    style = {styles.borderStyle}
                    onPress = {this.getCurrentNetInfo}>
                    <Text style = {styles.font}>
                        获取当前网络状态
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style = {styles.borderStyle}
                    onPress = {this.getCurrentNetState}>
                    <Text style = {styles.font}>
                        获取当前网络是否连接
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style = {styles.borderStyle}
                    onPress = {this.reachabilityNetState}>
                    <Text style = {styles.font}>
                        监听网络是否链接
                    </Text>
                </TouchableOpacity>
            </View>

        );
    },
    getCurrentNetInfo: function(){
        NetInfo.fetch().done(function(reachability){
            alert(reachability);
        });
    },
    getCurrentNetState: function(){
        NetInfo.isConnected.fetch().done(function(isConnected){
            alert(isConnected);
        });
    },
    reachabilityNetState: function(){
        NetInfo.isConnected.addEventListener('change',function(isConnected){
            alert(isConnected);
        });
    },

});

var styles = StyleSheet.create({
    flex: {
        flex: 1,
    },

    borderStyle: {
        marginRight: 10,
        marginLeft:10,
        marginTop:74,
        alignSelf:'center',
        borderWidth: 1/PixelRatio.get(),
        borderRadius: 5,
        borderColor: '#aaa',
    },

    font: {
        fontSize:15,
        color: '#222',
    }
})


module.exports = Netinfo;

在os.index.js中我们这样做：

'use strict';
var React = require('react-native');var Netinfo  =  require('./iOSFile/netinfo.js');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  WebView,
  NavigatorIOS,
  AsyncStorage,
  TouchableOpacity,
} = React;


var styles = StyleSheet.create({
    container : {
        flex: 1
    },

    row : {
        flexDirection: 'row',
        marginBottom: 10,
    },

    item : {
        flex: 1,
        marginLeft:5,
        borderWidth: 1,
        borderColor: '#ddd',
        marginRight: 5,
        height: 100,
    },

    img: {
        flex: 1,
        backgroundColor: 'transparent',
    },

    item_text: {
        backgroundColor: '#000',
        opacity:0.7,
        color:'#fff',
        height:25,
        lineHeight:18,
        textAlign:'center',
        marginTop:74
    },

    btn: {
        backgroundColor: '#ff7200',
        height: 33,
        textAlign : 'center',
        color: '#fff',
        marginLeft:10,
        marginRight: 10,
        lineHeight: 24,
        marginTop: 40,
        fontSize: 18,
    },

    list_item : {
        marginLeft: 5,
        marginRight: 5,
        padding:5 ,
        borderWidth: 1,
        height: 30,
        borderRadius: 3,
        borderColor: '#ddd',
    },

    list_item_desc : {
        flex: 2,
        fontSize: 15,
    },

    list_item_price: {
        flex: 1,
        textAlign: 'right',
        fontSize: 15,
    },

    clear: {
        marginTop : 10,
        backgroundColor: '#fff',
        color: '#000',
        borderColor: '#ddd',
        borderWidth:1,
        marginLeft: 10,
        marginRight:10,
        lineHeight: 24,
        height:33,
        fontSize: 18,
        textAlign: 'center',

    }

});

var wxsPrj = React.createClass({
  render: function() {
    return (
        <NavigatorIOS style = {styles.container}
                      initialRoute = {
                        {
                            component:Netinfo,
                            title:'样式列表',
                            barTintColor: '#ddd'
                        }

                      }/>

    );
    }

});

AppRegistry.registerComponent('wxsPrj', () => wxsPrj);