在主屏幕加载之前在react-native应用程序中显示模式

Question

我想在我的主屏幕加载到我的react-native应用程序之前显示非动画模式。基本上我想检查用户是否登录，如果没有登录用户在模态视图上显示登录屏幕。

麻烦的是我的主屏幕出现在我的模态之前的一秒钟，而不是先出现模态。我是新的反应/ JavaScript的一般，我不知道如何解决这个问题。

我把我的登录支票componentWillLoad思维组件在屏幕上呈现前这会发生，但它似乎没有工作。

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

它出现的一瞬间，因为onAuthStateChanged呼叫asynchronous和反应不会等待完成，它的动作，以便您的渲染火力点返回之前发生。所以要解决这个问题，你必须等到firebase返回。为了达到这个目的，我们使用状态。将创建一个名为isFirebaseReturned的状态变量。在下面的代码react将呈现NavigatorIos或Modal只有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> 

    ); 

    } 
}