網(wǎng)絡(luò)信息公開在線或者離線信息

reachabilityIOS

異步確定設(shè)備是否處于在線狀態(tài)并且在蜂窩網(wǎng)絡(luò)。

• None - 設(shè)備處于離線狀態(tài)
• WiFi - 設(shè)備處于在線狀態(tài)，并且通過 WiFi 或者是 iOS 模擬器連接
• Cell - 設(shè)備通過網(wǎng)絡(luò)連接，3G，WiMax，或者 LTE 進(jìn)行連接
• Unknown - 錯誤情況，并且網(wǎng)絡(luò)狀態(tài)未知

    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
    );

連接狀態(tài)

在所有的平臺上都可用。異步獲取一個布爾值來確定網(wǎng)絡(luò)連接。

    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 (
          <View>
            <Text>{JSON.stringify(this.state.reachabilityHistory)}</Text>
          </View>
        );
      }
    });
    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 (
          <View>
            <Text>{this.state.reachability}</Text>
          </View>
        );
      }
    });
    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 (
          <View>
            <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
          </View>
        );
      }
    });
    exports.title = 'NetInfo';
    exports.description = 'Monitor network status';
    exports.examples = [
      {
        title: 'NetInfo.isConnected',
        description: 'Asyncronously load and observe connectivity',
        render(): ReactElement { return <IsConnected />; }
      },
      {
        title: 'NetInfo.reachabilityIOS',
        description: 'Asyncronously load and observe iOS reachability',
        render(): ReactElement { return <ReachabilityCurrent />; }
      },
      {
        title: 'NetInfo.reachabilityIOS',
        description: 'Observed updates to iOS reachability',
        render(): ReactElement { return <ReachabilitySubscription />; }
      },
    ];