创新互联React教程:网络信息

网络信息公开在线或者离线信息

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、虚拟空间、营销软件、网站建设、洛阳网站维护、网站推广。

reachabilityIOS

异步确定设备是否处于在线状态并且在蜂窝网络。

  • None - 设备处于离线状态

  • WiFi - 设备处于在线状态,并且通过 WiFi 或者是 iOS 模拟器连接

  • Cell - 设备通过网络连接,3G,WiMax,或者 LTE 进行连接

  • Unknown - 错误情况,并且网络状态未知

    NetInfo.reachabilityIOS.fetch().done((reach) => {      console.log('Initial: ' + reach);
    });    function handleFirstReachabilityChange(reach) {      console.log('First change: ' + reach);
      NetInfo.reachabilityIOS.removeEventListener(        'change',
        handleFirstReachabilityChange
      );
    }
    NetInfo.reachabilityIOS.addEventListener(      'change',
      handleFirstReachabilityChange
    );

连接状态

在所有的平台上都可用。异步获取一个布尔值来确定网络连接。

    NetInfo.isConnected.fetch().done((isConnected) => {      console.log('First, is ' + (isConnected ? 'online' : 'offline'));
    });    function handleFirstConnectivityChange(isConnected) {      console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
      NetInfo.isConnected.removeEventListener(        'change',
        handleFirstConnectivityChange
      );
    }
    NetInfo.isConnected.addEventListener(      'change',
      handleFirstConnectivityChange
    );

例子

Edit on GitHub

    'use strict';    var React = require('react-native');    var {
      NetInfo,
      Text,
      View
    } = React;    var ReachabilitySubscription = React.createClass({
      getInitialState() {        return {
          reachabilityHistory: [],
        };
      },
      componentDidMount: function() {
        NetInfo.reachabilityIOS.addEventListener(          'change',          this._handleReachabilityChange
        );
      },
      componentWillUnmount: function() {
        NetInfo.reachabilityIOS.removeEventListener(          'change',          this._handleReachabilityChange
        );
      },
      _handleReachabilityChange: function(reachability) {        var reachabilityHistory = this.state.reachabilityHistory.slice();
        reachabilityHistory.push(reachability);        this.setState({
          reachabilityHistory,
        });
      },
      render() {        return (          
            {JSON.stringify(this.state.reachabilityHistory)}
          
        );
      }
    });    var ReachabilityCurrent = React.createClass({
      getInitialState() {        return {
          reachability: null,
        };
      },
      componentDidMount: function() {
        NetInfo.reachabilityIOS.addEventListener(          'change',          this._handleReachabilityChange
        );
        NetInfo.reachabilityIOS.fetch().done(
          (reachability) => { this.setState({reachability}); }
        );
      },
      componentWillUnmount: function() {
        NetInfo.reachabilityIOS.removeEventListener(          'change',          this._handleReachabilityChange
        );
      },
      _handleReachabilityChange: function(reachability) {        this.setState({
          reachability,
       });
      },
      render() {        return (          
            {this.state.reachability}
          
        );
      }
    });    var IsConnected = React.createClass({
      getInitialState() {        return {
          isConnected: null,
        };
      },
      componentDidMount: function() {
        NetInfo.isConnected.addEventListener(          'change',          this._handleConnectivityChange
        );
        NetInfo.isConnected.fetch().done(
          (isConnected) => { this.setState({isConnected}); }
        );
      },
      componentWillUnmount: function() {
        NetInfo.isConnected.removeEventListener(          'change',          this._handleConnectivityChange
        );
      },
      _handleConnectivityChange: function(isConnected) {        this.setState({
          isConnected,
        });
      },
      render() {        return (          
            {this.state.isConnected ? 'Online' : 'Offline'}
          
        );
      }
    });
    exports.title = 'NetInfo';
    exports.description = 'Monitor network status';
    exports.examples = [
      {
        title: 'NetInfo.isConnected',
        description: 'Asyncronously load and observe connectivity',
        render(): ReactElement { return ; }
      },
      {
        title: 'NetInfo.reachabilityIOS',
        description: 'Asyncronously load and observe iOS reachability',
        render(): ReactElement { return ; }
      },
      {
        title: 'NetInfo.reachabilityIOS',
        description: 'Observed updates to iOS reachability',
        render(): ReactElement { return ; }
      },
    ];

网站名称:创新互联React教程:网络信息
浏览地址:http://www.shufengxianlan.com/qtweb/news14/274314.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联