代码之家 › 专栏 › 技术社区 › Saeed Heidarizarei

如果已连接,则响应本地显示主页

react-native

Saeed Heidarizarei · 技术社区 · 6 年前

如果已连接,如何显示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 />
    }
  };
}

3 回复 | 直到 6 年前

Priyesh Kumar 6 年前

我通过获取一些HTTP API(比如 https://httpbin.org/ip

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 .

Yash Vaghela 6 年前

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

Sandy..... 6 年前

您可以通过将isconnected标志设置为state并使用网络代码动态地将其设置为true或false来实现它。然后在呈现函数内部使用下面的代码

//此处是您的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>
    )
  }
}