网络信息

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

reachabilityIOS

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

  • None - 设备处于离线状态
  • WiFi - 设备处于在线状态，并且通过 WiFi 或者是 iOS 模拟器连接
  • Cell - 设备通过网络连接，3G，WiMax，或者 LTE 进行连接
  • Unknown - 错误情况，并且网络状态未知
  1.     NetInfo.reachabilityIOS.fetch().done((reach) => {
  2.       console.log('Initial: ' + reach);
  3.     });
  4.     function handleFirstReachabilityChange(reach) {
  5.       console.log('First change: ' + reach);
  6.       NetInfo.reachabilityIOS.removeEventListener(
  7.         'change',
  8.         handleFirstReachabilityChange
  9.       );
  10.     }
  11.     NetInfo.reachabilityIOS.addEventListener(
  12.       'change',
  13.       handleFirstReachabilityChange
  14.     );

连接状态

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

  1.     NetInfo.isConnected.fetch().done((isConnected) => {
  2.       console.log('First, is ' + (isConnected ? 'online' : 'offline'));
  3.     });
  4.     function handleFirstConnectivityChange(isConnected) {
  5.       console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
  6.       NetInfo.isConnected.removeEventListener(
  7.         'change',
  8.         handleFirstConnectivityChange
  9.       );
  10.     }
  11.     NetInfo.isConnected.addEventListener(
  12.       'change',
  13.       handleFirstConnectivityChange
  14.     );

例子

Edit on GitHub

  1.     'use strict';
  2.     var React = require('react-native');
  3.     var {
  4.       NetInfo,
  5.       Text,
  6.       View
  7.     } = React;
  8.     var ReachabilitySubscription = React.createClass({
  9.       getInitialState() {
  10.         return {
  11.           reachabilityHistory: [],
  12.         };
  13.       },
  14.       componentDidMount: function() {
  15.         NetInfo.reachabilityIOS.addEventListener(
  16.           'change',
  17.           this._handleReachabilityChange
  18.         );
  19.       },
  20.       componentWillUnmount: function() {
  21.         NetInfo.reachabilityIOS.removeEventListener(
  22.           'change',
  23.           this._handleReachabilityChange
  24.         );
  25.       },
  26.       _handleReachabilityChange: function(reachability) {
  27.         var reachabilityHistory = this.state.reachabilityHistory.slice();
  28.         reachabilityHistory.push(reachability);
  29.         this.setState({
  30.           reachabilityHistory,
  31.         });
  32.       },
  33.       render() {
  34.         return (
  35.           <View>
  36.             <Text>{JSON.stringify(this.state.reachabilityHistory)}</Text>
  37.           </View>
  38.         );
  39.       }
  40.     });
  41.     var ReachabilityCurrent = React.createClass({
  42.       getInitialState() {
  43.         return {
  44.           reachability: null,
  45.         };
  46.       },
  47.       componentDidMount: function() {
  48.         NetInfo.reachabilityIOS.addEventListener(
  49.           'change',
  50.           this._handleReachabilityChange
  51.         );
  52.         NetInfo.reachabilityIOS.fetch().done(
  53.           (reachability) => { this.setState({reachability}); }
  54.         );
  55.       },
  56.       componentWillUnmount: function() {
  57.         NetInfo.reachabilityIOS.removeEventListener(
  58.           'change',
  59.           this._handleReachabilityChange
  60.         );
  61.       },
  62.       _handleReachabilityChange: function(reachability) {
  63.         this.setState({
  64.           reachability,
  65.         });
  66.       },
  67.       render() {
  68.         return (
  69.           <View>
  70.             <Text>{this.state.reachability}</Text>
  71.           </View>
  72.         );
  73.       }
  74.     });
  75.     var IsConnected = React.createClass({
  76.       getInitialState() {
  77.         return {
  78.           isConnected: null,
  79.         };
  80.       },
  81.       componentDidMount: function() {
  82.         NetInfo.isConnected.addEventListener(
  83.           'change',
  84.           this._handleConnectivityChange
  85.         );
  86.         NetInfo.isConnected.fetch().done(
  87.           (isConnected) => { this.setState({isConnected}); }
  88.         );
  89.       },
  90.       componentWillUnmount: function() {
  91.         NetInfo.isConnected.removeEventListener(
  92.           'change',
  93.           this._handleConnectivityChange
  94.         );
  95.       },
  96.       _handleConnectivityChange: function(isConnected) {
  97.         this.setState({
  98.           isConnected,
  99.         });
  100.       },
  101.       render() {
  102.         return (
  103.           <View>
  104.             <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
  105.           </View>
  106.         );
  107.       }
  108.     });
  109.     exports.title = 'NetInfo';
  110.     exports.description = 'Monitor network status';
  111.     exports.examples = [
  112.       {
  113.         title: 'NetInfo.isConnected',
  114.         description: 'Asyncronously load and observe connectivity',
  115.         render(): ReactElement { return <IsConnected />; }
  116.       },
  117.       {
  118.         title: 'NetInfo.reachabilityIOS',
  119.         description: 'Asyncronously load and observe iOS reachability',
  120.         render(): ReactElement { return <ReachabilityCurrent />; }
  121.       },
  122.       {
  123.         title: 'NetInfo.reachabilityIOS',
  124.         description: 'Observed updates to iOS reachability',
  125.         render(): ReactElement { return <ReachabilitySubscription />; }
  126.       },
  127.     ];