在React Native应用程序中加载主屏幕之前显示模式

Question

I am trying to show a non-animating modal before my main screen loads in my react-native app. Basically I want to check if a user is logged in, and if there is not a logged in user show a login screen on a modal view.

The trouble is my main screen appears for a split second before my modal instead of the modal showing up first. I am new to react/javascript in general and am not sure how to solve this.

I placed my login check in componentWillLoad thinking this would occur before the component is rendered on screen, but it doesnt seem to work.

export default class MyClass extends Component {

  state = {
    modalVisible: false,
  }

  componentWillMount() {
    // Check if a user is signed in
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // User is signed in.
        console.log("Signed in");
        this.setState({modalVisible: false});
      } else {
        // No user is signed in.
        console.log("Not signed in");
        this.setState({modalVisible: true});
      }
    }.bind(this));
  }

  render() {

    return (
      <View>

        <NavigatorIOS
          initialRoute={{
            component: Things,
            title: 'MyScene',
          }}
          style={{flex: 1}}
        />

        <Modal
          animationType={"none"}
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {alert("Modal has been closed.")}}
          >
          <Login />
        </Modal>

      </View>

    );

  }
}

Answer 1

It is appearing for a split second because onAuthStateChanged call is asynchronous and react will not wait for that to complete and it moves on so your rendering happens before firebase returns. So to solve this you have to wait till firebase returns. To achieve this let's use state. Will create one state variable called isFirebaseReturned . In the below code react will render NavigatorIos or Modal only if isFirebaseReturned = true

export default class MyClass extends Component {

  state = {
    modalVisible: false,
    isFirebaseReturned:false
  }

  componentWillMount() {
    // Check if a user is signed in
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // User is signed in.
        console.log("Signed in");
        this.setState({modalVisible: false,isFirebaseReturned:true});
      } else {
        // No user is signed in.
        console.log("Not signed in");
        this.setState({modalVisible: true,isFirebaseReturned:true});
      }
    }.bind(this));
  }

  render() {

    return (
      <View>
      {this.state.isFirebaseReturned &&
        <NavigatorIOS
          initialRoute={{
            component: Things,
            title: 'MyScene',
          }}
          style={{flex: 1}}
        />

        <Modal
          animationType={"none"}
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {alert("Modal has been closed.")}}
          >
          <Login />
        </Modal>
      }
      </View>

    );

  }
}