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

来源：互联网发布：windows无法启动怎么办编辑：程序博客网时间：2024/04/30 09:07

没图你说个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);

0 0