反応ネイティブアプリでメイン画面を読み込む前にモーダルを表示

Question

反応したネイティブアプリにメイン画面が読み込まれる前に非アニメーションモーダルを表示しようとしています。基本的には、ユーザーがログインしているかどうかをチェックし、ログインしていないユーザーの場合はモーダル表示でログイン画面を表示します。

モーダルが最初に表示されるのではなく、モーダルの前に分割されたときにメイン画面が表示されます。私は一般的に反応する/新しいjavascriptで、これを解決する方法がわからない。

コンポーネントが画面にレンダリングされる前に発生すると考えて、ログインチェックをcomponentWillLoadに配置しましたが、動作しないようです。 onAuthStateChanged通話がasynchronousであり、それが完了するのを待つことはありません反応するので、それは一瞬のために表示されていると、それが上に移動

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

ので、あなたのレンダリングはfirebase戻る前に発生します。だからこれを解決するには、火災復旧まで待たなければなりません。これを実現するには状態を使用しましょう。 isFirebaseReturnedという1つの状態変数を作成します。以下のコードではreactはNavigatorIosまたはModalのみ

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> 

    ); 

    } 
}