我们在做移动端项目和手机APP应用时，避免不了要获取用户手机的网络状况。在使用RN技术开发APP时，其内置的NetInfo API就是为了解决这一问题的。下面简单的讲下NetInfo如何使用。
最新的API与以往的有些不同，具体如下：
- `fetch`方法过时了，用`getConnection`替代
- `change`事件过时了，用`connectionchange`替代.
- `fetch`/`change`过时了，用`getConnection`/`connectionchange`替代。
ConnectionType（设备的网络类型）：
跨平台：
- none - 设备处于离线状态。
- wifi - 设备处于联网状态且通过wifi链接，或者是一个iOS的模拟器。
- cellular - 设备是通过Edge、3G、WiMax或是LTE网络联网的。
- unknown - 发生错误，网络状况不可知
Android平台：
- bluetooth - 蓝牙数据连接
- ethernet - 以太网数据连接
- wimax - WiMAX数据连接
EffectiveConnectionType(无线网络类型) ：
- 2g
- 3g
- 4g
- unknown
import assign from 'object-assign';
import { observer } from 'mobx-react';
import {
action,
observable,
} from 'mobx';
import {
NetInfo,
} from 'react-native'; @observable
localState = {
tipMessage: '',
continueBtnText: '',
connectionType: null,// none,wifi,cellular,unknown
effectiveConnectionType: null,// 2g,3g,4g,unknown
}; @action
updateLocalState = (part) => {
assign(this.localState, part);
}; componentDidMount() {
NetInfo.addEventListener(
'connectionChange',
this.handleConnectionInfoChange,
);
NetInfo.getConnectionInfo().then((connectionInfo) => {
this.updateLocalState({
connectionType: connectionInfo.type,
effectiveConnectionType: connectionInfo.effectiveType,
});
this.NetworkStateJudge();
});
} componentWillUnmount() {
NetInfo.removeEventListener(
'connectionChange',
this.handleConnectionInfoChange,
);
}
// 在网络状况/类型发生变化时调用此函数
handleConnectionInfoChange = (connectionInfo) => {
this.updateLocalState({
connectionType: connectionInfo.type,
effectiveConnectionType: connectionInfo.effectiveType,
});
this.NetworkStateJudge();
};
// 网络状态分类判断
NetworkStateJudge = () => {
if (this.localState.connectionType === 'wifi') {
this.updateLocalState({
tipMessage: '当前wifi信号不好，请尝试重启路由器',
continueBtnText: '重启',
});
} else if (this.localState.connectionType === 'none') {
this.updateLocalState({
tipMessage: '未连接到网络，请先开通WiFi或流量',
continueBtnText: '去开通',
});
} else if (this.localState.effectiveConnectionType !== 'unknown') {
this.updateLocalState({
tipMessage: '当前正在使用非WiFi网络，继续使用将产生费用',
continueBtnText: '继续使用',
});
}
}; render() { return (
<View style={styles.wrap}>
<View style={styles.containWrap}>
<Text style={styles.tipMessage}>{this.localState.tipMessage}</Text>
<TouchableHighlight
style={styles.continueBtn}
>
<Text style={styles.continueBtnText}>{this.localState.continueBtnText}</Text>
</TouchableHighlight>
<Text style={styles.text}>{this.localState.connectionType}</Text>
<Text style={styles.text}>{this.localState.effectiveConnectionType}</Text>
</View>
</View>
);
}
查看更详细使用方法和介绍请参考官网 ：https://facebook.github.io/react-native/docs/netinfo.html