react native 判断网络状态

前端之家收集整理的这篇文章主要介绍了react native 判断网络状态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

转:http://blog.csdn.net/yangysng07/article/details/51583604


React Native 获取网络状态 NetworkInfo

React-native提供了了一个NetInfo类用来获取和监听网络状态。

属性方法

  • 1.addEventListener(eventName:ChangeEventName,handler:Function) 静态方法,用设置网络变化事件监听器,同时需要传入回调的处理方法

  • 2.removeEventListener(eventName:ChangeEventName,handler:Function) 静态方法,用于移除网络事件变化监听器

  • 3.fetch() 静态方法 检测当前网络连接状态

  • 4.isConnectionExpensve(callback:(metered:?boolean,error?:string)=>void) 静态方法,检测当前连接的网络是否需要计费

  • 5.isConnected :ObjectExpression 当前网络是否连接的属性

构造工具类

NetWorkTool.js

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
        • 15
        • 16
        • 17
        • 18
        • 19
        • 20
        • 21
        • 22
        • 23
        • 24
        • 25
        • 26
        • 27
        • 28
        • 29
        • 30
        • 31
        • 32
        • 33
        • 34
        • 35
        • 36
        • 37
        • 38
        • 39
        • 40
        • 41
        • 42
        • 43
        • 44
        • 45
        • 46
        • 47
        • 48
        • 49
        • 50
        /** * Created by eleven on 16/6/3. */
      •  
      • import React,{
      • NetInfo
      • } from 'react-native';
      •  
      • const NOT_NETWORK = "网络不可用,请稍后再试";
      • const TAG_NETWORK_CHANGE = "NetworkChange";
      •  
      • /*** * 检查网络链接状态 * @param callback */
      • const checkNetworkState = (callback) =>{
      • NetInfo.isConnected.fetch().done(
      • (isConnected) => {
      • callback(isConnected);
      • }
      • );
      • }
      •  
      • /*** * 移除网络状态变化监听 * @param tag * @param handler */
      • const removeEventListener = (tag,handler) => {
      • NetInfo.isConnected.removeEventListener(tag,handler);
      • }
      •  
      • /*** * 添加网络状态变化监听 *const addEventListener = (tag,handler)=>{
      • NetInfo.isConnected.addEventListener(tag,handler);
      • }
      • export default{
      • checkNetworkState,addEventListener,removeEventListener,NOT_NETWORK,TAG_NETWORK_CHANGE
      • }

      使用Component.js

      1. 1
      2. 2
      3. 3
      4. 4
      5. 5
      6. 6
      7. 7
      8. 8
      9. 9
      10. 10
      11. 11
      12. 12
      13. 13
      14. 14
      15. 15
      16. 16
      17. 17
      18. 18
      19. 19
      20. 20
      21. 21
      22. 22
      23. 23
      24. 24
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          //、、、
        • import NetWorkTool from '../../utils/NetWorkTool'
        • //、、、
        • handleMethod(isConnected){
        • console.log('test',(isConnected ? 'online' : 'offline'));
        • }
        • //、、、
        • constructor(props) {
        • super(props);
        • NetWorkTool.checkNetworkState((isConnected)=>{
        • if(!isConnected){
        • Toast.show(NetWorkTool.NOT_NETWORK);
        • }
        • });
        • }
        •  
        • componentWillMount() {
        • NetWorkTool.removeEventListener(NetWorkTool.TAG_NETWORK_CHANGE,this.handleMethod);
        • }
        •  
        • componentWillUnmount() {
        • NetWorkTool.removeEventListener(NetWorkTool.TAG_NETWORK_CHANGE,136); Box-sizing: border-Box;">this.handleMethod);
        • }
        • //、、、

        猜你在找的React相关文章