网络状态NetInfo
NetInfo库的作用是检测当前是否联网及获取联网方式及网络牌照等信息。
要使用NetInfo库,需要先在AndroidManifest.xml中配置权限:
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
要检测网络是否在线可以使用:
NetInfo.isConnected.fetch().then(isConnected => {
console.log('网络状态:' + isConnected ? 'online' : 'offline');
});
// 事件监听
function handleFirstConnectivityChange(isConnected) {
console.log('状态变化了,网络状态:' + isConnected ? 'online' : 'offline');
NetInfo.isConnected.removeEventListener('connectionChange',handleFirstConnectivityChange);
}
NetInfo.isConnected.addEventListener('connectionChange',handleFirstConnectivityChange);
其中isConnected为true时表示当前已经联网。
要获取当前联网方式及网络牌照可以使用:
NetInfo.getConnectionInfo().then((connectionInfo) => {
console.log('连接方式: ' + connectionInfo.type + ', 网络牌照: ' + connectionInfo.effectiveType);
});
// 事件监听
function handleFirstConnectivityChange(connectionInfo) {
console.log('信息变化了, 连接方式: ' + connectionInfo.type + ', 网络牌照: ' + connectionInfo.effectiveType);
NetInfo.removeEventListener('connectionChange',handleFirstConnectivityChange);
}
NetInfo.addEventListener('connectionChange', handleFirstConnectivityChange);
回调函数type的类型有:
- none - 设备处于离线状态
- wifi - 设备通过wifi联网,或者设备是iOS模拟器
- cellular - 设备通过蜂窝数据流量联网
- unknown - 联网状态异常
回调函数effectiveType的类型有:
- 2g
- 3g
- 4g
- unknown
贴上完整代码:
import React from 'react';
import { View, NetInfo, Button, Alert} from 'react-native';
class NetInfoAPI extends React.Component {
// 检测网络状态
checkNet = () => {
NetInfo.isConnected.fetch().then(isConnected => {
Alert.alert('提示','网络状态:' + isConnected ? 'online' : 'offline');
});
// 事件监听
function handleFirstConnectivityChange(isConnected) {
Alert.alert('提示','状态变化了,网络状态:' + isConnected ? 'online' : 'offline');
NetInfo.isConnected.removeEventListener('connectionChange',handleFirstConnectivityChange);
}
NetInfo.isConnected.addEventListener('connectionChange',handleFirstConnectivityChange);
}
// 获取网络信息
getNetInfo = () => {
NetInfo.getConnectionInfo().then((connectionInfo) => {
Alert.alert('提示','连接方式: ' + connectionInfo.type + ', 网络牌照: ' + connectionInfo.effectiveType);
});
// 事件监听
function handleFirstConnectivityChange(connectionInfo) {
Alert.alert('提示','信息变化了, 连接方式: ' + connectionInfo.type + ', 网络牌照: ' + connectionInfo.effectiveType);
NetInfo.removeEventListener('connectionChange',handleFirstConnectivityChange);
}
NetInfo.addEventListener('connectionChange', handleFirstConnectivityChange);
}
render(){
return(
<View>
<Button
onPress={this.checkNet}
title='检测网络状态'
/>
<Button
onPress={this.getNetInfo}
title='获取网络信息'
/>
</View>
);
}
}
export default NetInfoAPI;
效果:
网络请求Fetch
app开发基本上都需要与后台进行数据交互,关于接口,一般使用的是Restful风格的API。Fetch请求返回的结果是一个Promise类型,如果使用链式写法(.then.catch),要记住,reject方法的作用,等同于抛出错误,无论哪个then中发生错误都可以在catch中捕获。关于Promise类型详细可以参考http://es6.ruanyifeng.com/#docs/promise。目前的官方对Fetch是还不支持中断请求操作。
下面是一段使用Fetch实现get请求和post请求的参考代码:
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
class FetchAPI extends Component {
// get请求-无参
_getJson = () => {
fetch('http://www.helloui.net/api/json/products.json')
.then((resp) => resp.json())
.then((json)=>{
Alert.alert('请求成功:', JSON.stringify(json)); // json:Array(3) [Object, Object, Object]
})
.catch((error)=>{
console.log(error);
}
);
}
// get请求-带参
_getWithParam = () => {
fetch('http://www.helloui.net/rn_get?name=admin')
.then((resp) => resp.json())
.then((json)=>{
Alert.alert('请求成功:', JSON.stringify(json)); // json:Object {name: "admin"}
})
.catch((error)=>{
console.log(error);
}
);
}
// post请求
// 如果'Content-Type': 'application/x-www-form-urlencoded'格式
// 则参数入参为字符串 body:JSON.stringify({name: 'admin'});
// 或者 body: 'data='+ JSON.stringify({name: 'admin'});
// 是否加 'data='前缀取决于后台获取请求体body的方式
// 如果要连接本地服务器联调测试,请使用10.0.2.2代替localhost或127.0.0.1,如果跨域联调请使用cors
_post = () => {
let data = JSON.stringify({
name:'admin'
});
const body = new FormData();
body.append('data', data);
fetch('http://www.helloui.net/rn_post', {
method: 'POST',
body,
headers: {
'Content-Type':'multipart/form-data',
'Accept': 'application/json'
}
})
.then((resp) => resp.json())
.then((json)=>{
Alert.alert('请求成功:', JSON.stringify(json)); // json:Object {name: "admin"}
})
.catch((error)=>{
console.log(error);
}
);
}
render() {
return (
<View style={styles.containerStyle}>
<TouchableOpacity
onPress={this._getJson}
activeOpacity={0.8}
>
<View style={styles.btnViewStyle}>
<Text style={styles.btnTextStyle}>GET JSON Fetch请求</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={this._getWithParam}
activeOpacity={0.8}
>
<View style={styles.btnViewStyle}>
<Text style={styles.btnTextStyle}>GET WithParam Fetch请求</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={this._post}
activeOpacity={0.8}
>
<View style={styles.btnViewStyle}>
<Text style={styles.btnTextStyle}>POST Fetch请求</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
containerStyle:{
flex: 1
},
btnViewStyle: {
backgroundColor: 'green',
height: 100,
borderWidth: 1,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center'
},
btnTextStyle: {
color: 'white',
fontSize: 24
}
});
export default FetchAPI;
其中http://www.helloui.net/api是我自己在阿里云测试用的服务器。效果: