React Native获取网络状态

RusMyv 8年前
   <p>使用React Native,可以使用NetInfo API获取手机当前的各个网络状态。</p>    <pre>  <code class="language-javascript">componentWillMount() {          NetInfo.fetch().done((status)=> {              console.log('Status:'+status);          });      }</code></pre>    <p>获取网络状态是异步的,上面使用了Promise机制。</p>    <h2><strong>Android端网络状态</strong></h2>    <p>请求网络信息需要先在应用的AndroidManifest.xml文件中添加如下权限字段,申请相关权限:</p>    <pre>  <code class="language-javascript"><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></code></pre>    <p><img src="https://simg.open-open.com/show/ee7682e2ff24b8eb689de51e8ab46acd.png"></p>    <p>修改完成后,reaload代码是无效的,因为我们修改了Android原生的配置文件,需要重新执行 react-native run-android 命令。这个命令重新编译对应的Android项目安装包并安装到手机中。</p>    <p>Android可获取的状态比较多,上面的status可能有如下的值,直接把文档贴出来了:</p>    <ul>     <li>NONE - 设备处于离线状态</li>     <li>BLUETOOTH - 蓝牙数据连接</li>     <li>DUMMY - 模拟数据连接</li>     <li>ETHERNET - 以太网数据连接</li>     <li>MOBILE - 移动网络数据连接</li>     <li>MOBILE_DUN - 拨号移动网络数据连接</li>     <li>MOBILE_HIPRI - 高优先级移动网络数据连接</li>     <li>MOBILE_MMS - 彩信移动网络数据连接</li>     <li>MOBILE_SUPL - 安全用户面定位(SUPL)数据连接</li>     <li>V*N - 虚拟网络连接。需要Android5.0以上</li>     <li>WIFI - WIFI数据连接</li>     <li>WIMAX - WiMAX数据连接</li>     <li>UNKNOWN - 未知数据连接</li>    </ul>    <h2><strong>IOS端网络状态</strong></h2>    <ul>     <li>none - 设备处于离线状态。</li>     <li>wifi - 设备处于联网状态且通过wifi链接,或者是一个iOS的模拟器。</li>     <li>cell - 设备是通过Edge、3G、WiMax或是LTE网络联网的。</li>     <li>unknown - 发生错误,网络状况不可知</li>    </ul>    <h2><strong>监听网络改变事件</strong></h2>    <p>在获取了网络状态后,开发者还可以通过NetInfo API提供的监听器,监听网络状态改变事件。这样当手机网络状态改变时,React Native应用马上收到通知。</p>    <pre>  <code class="language-javascript">componentWillMount() {          NetInfo.fetch().done((status)=> {              console.log('Status:' + status);          });          //监听网络状态改变          NetInfo.addEventListener('change', this.handleConnectivityChange);        }        componentWillUnMount() {          console.log("componentWillUnMount");          NetInfo.removeEventListener('change', this.handleConnectivityChange);      }        handleConnectivityChange(status) {          console.log('status change:' + status);          //监听第一次改变后, 可以取消监听.或者在componentUnmount中取消监听         // NetInfo.removeEventListener('change', this.handleConnectivityChange);      }</code></pre>    <h2><strong>判断是否有网络连接</strong></h2>    <p>NetInfo API 为开发者提供了isConnected函数用来判断当前手机是否有网络连接。</p>    <pre>  <code class="language-javascript">NetInfo.isConnected.fetch().done((isConnected) => {    console.log('First, is ' + (isConnected ? 'online' : 'offline'));  });</code></pre>    <h2><strong>isConnectionExpensive(仅Android端)</strong></h2>    <p>NetInfo API为开发者提供了 isConnectionExpensive函数用来判断当前网络连接是否付费的。如果当前连接是通过移动数据网络,或者通过基于移动数据网络所创建的wifi热点,都有可能被判定为计费的数据连接。目前这个函数只为Android平台提供。</p>    <pre>  <code class="language-javascript">NetInfo.isConnectionExpensive((isConnectionExpensive) => {    console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));  });</code></pre>    <p> </p>    <p>来自:http://www.jianshu.com/p/4bf6a976659d</p>    <p> </p>