如果已连接，则显示本机显示主页

Question

如果已连接，如何显示React Native主页？
如果未连接，则显示全屏照片？ （条件为NetInfo）

import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  NetInfo
} from 'react-native';

function ConnectionOk() {
  return (
    <View >
      <Text >
        Welcome to React Native1!
        </Text>
      <Text >
        To get started, edit App.js
        </Text>
    </View>
  );
}

function ConnectionNotOk() {
  return (
    <View>
      <Text>not Connected ...</Text>
    </View>
  );
}

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props)

    this.state = {
      isConnected: false,
      isMounted: true
    };

  }

  componentDidMount() {
    // my way of checking internet, don't use both methods
    // this.checkInternetConnection();

    // Its good idea to attach event listener here, or in constructor
    NetInfo.isConnected.addEventListener(
      'connectionChange',
      this.handleFirstConnectivityChange
    );
  };

  componentWillUnmount() {

    this.setState({
      isMounted: false
    });
    // Its good idea to remove all event listener here
    NetInfo.removeEventListener(
      'connectionChange',
      this.handleFirstConnectivityChange
    );
  };

  checkInternetConnection() {

    fetch("https://httpbin.org/ip")
      .then(response => response.json())
      .then(responseJson => {

        //update the state only when component is mounted, else it will throw warning
        if (this.state.isMounted) {
          this.setState({
            isConnected: true
          });
        }
      }).catch(err => {
        // No internet, redirect to some action if required

      })
  };

  handleFirstConnectivityChange(isConnected) {

    if (isConnected) {
      this.setState({
        isConnected: true
      });
    } else {
      //redirect to some route if required
      return <ConnectionNotOk />;
    }

    render() {
      return this.state.isConnected ? < ConnectionOk /> : < ConnectionNotOk />
    }
  };
}

Answer 1

您可以在组件状态下使用一些标志变量。

根据我的经验，我可以说NetInfo并不总是提供正确的信息。以前的Internet数据已打开但没有Internet连接，NetInfo将返回true。

我通过获取一些简单的http api（例如https://httpbin.org/ip）来处理这种情况，该api提供了有关互联网的正确信息。

在定义而不是渲染的适当位置定义，添加/删除侦听器也是一个好主意。

尝试以下操作：

type Props = {};
export default class App extends Component < Props > {
  constructor(props) {
    super(props)

    this.state = {
      isConnected: false,
      isMounted: true
    };
    
    this.checkInternetConnection = this.checkInternetConnection.bind(this);
    this.handleFirstConnectivityChange = this.handleFirstConnectivityChange.bind(this);

  }

  componentDidMount() {

    // my way of checking internet, don't use both methods
    // this.checkInternetConnection();

    // Its good idea to attach event listener here, or in constructor
    NetInfo.isConnected.addEventListener(
      'connectionChange',
      this.handleFirstConnectivityChange
    );
  }

  componentWillUnmount() {

    this.setState({
      isMounted: false
    });
    // Its good idea to remove all event listener here
    NetInfo.removeEventListener(
      'connectionChange',
      this.handleFirstConnectivityChange
    );
  }
  checkInternetConnection() {

    fetch("https://httpbin.org/ip")
      .then(response => response.json())
      .then(responseJson => {

        //update the state only when component is mounted, else it will throw warning
        if (this.state.isMounted) {
          this.setState({
            isConnected: true
          });
        }

      }).catch(err => {
        // No internet, redirect to some action if required

      })
  }


  handleFirstConnectivityChange(isConnected) {
    if (isConnected) {
      this.setState({
        isConnected: true
      });
    } else {

      //redirect to some route if required
      //return <ConnectedNotOk / > ;
    }
  }
  render() {

    return (
      this.state.isConnected ? <ConnectionOk /> : <ConnectionNotOk />
    );

  }
}

我的完整示例code。

Answer 2

NetInfo.isConnected.fetch().then(isConnected => {
      console.log('First, is ' + (isConnected ? 'online' : 'offline'));
    });
    function handleFirstConnectivityChange(isConnected) {
      console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
      if (isConnected == false) {
        // your image
      }
      else{
      Actions.HomePage() //if connected go to homepage
      }
      NetInfo.isConnected.removeEventListener(
        'connectionChange',
        handleFirstConnectivityChange
      );
    }
    NetInfo.isConnected.addEventListener(
      'connectionChange',
      handleFirstConnectivityChange
    );

我正在使用 react-native-router-flux 进行重定向

Answer 3

您可以通过将isConnected标志置于状态并使用网络代码将其动态设置为true或false来实现。然后在render函数中使用以下代码
{this.state.isConnected &&
      //您的UI代码在这里
 }

我对您的代码进行了一些更改。希望对您有帮助。请在下面找到完整的代码：

import React, {Component} from 'react';
import {
   Platform,
   StyleSheet,
   Text,
   View,
   NetInfo
} from 'react-native';

export default class App extends Component {
   constructor(props) {
     super(props)
     this.state = {
       isConnected: false,
       isMounted: true
     };
  }

  componentWillMount() {
    NetInfo.addEventListener(
      'connectionChange',
      this.handleFirstConnectivityChange
    );
  }

  componentWillUnmount() {
     this.setState({
       isMounted: false
     });
     // Its good idea to remove all event listener here
     NetInfo.removeEventListener(
       'connectionChange',
       this.handleFirstConnectivityChange
     );
  }

  handleFirstConnectivityChange(connectionInfo) {
    if(connectionInfo.type && connectionInfo.type != "none"){
      this.setState({
         isConnected: true
      });
    }else {
      this.setState({
         isConnected: false
      });
    }
  }

  render () {
    return (
      <View>
        {this.state.isConnected &&
          <View >
            <Text >
              Welcome to React Native1!
            </Text>
            <Text >
              To get started, edit App.js
            </Text>
          </View>
        }
        {!this.state.isConnected &&
          <View>
            <Text>not Connected ...</Text>
          </View>
        }
      </View>
    )
  }
}