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);