没图你说个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,Image,ScrollView,WebView,NavigatorIOS,AsyncStorage,} = 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',marginRight: 10,lineHeight: 24,marginTop: 40,fontSize: 18,list_item : {
        marginLeft: 5,padding:5,height: 30,borderRadius: 3,list_item_desc : {
        flex: 2,fontSize: 15,list_item_price: {
        flex: 1,textAlign: 'right',clear: {
        marginTop : 10,backgroundColor: '#fff',color: '#000',borderWidth:1,marginLeft: 10,marginRight:10,height:33,textAlign: 'center',}

});

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