ナビゲーション間にスピナーを表示する

Question

これは広い質問ですが、反応ネイティブの正しい方法を把握するのに問題があります。

以下は、反応ネイティブの学習中に作成した2つの前提です。
私のアプリはStackNavigatorの周りに組み込まれています。 ナビゲータの最初の画面はログイン画面です。これは基本的には常に読み込まれるメイン画面です。ユーザはログインし（またはすでにログインしている）、別のページに転送されます。ナビゲーションをディスパッチすると、ログインページの状態を更新できます。ナビゲーションが完了するまでこのロジックを使用してスピナーを表示したいと思います。

問題は、ユーザーがQRコードをスキャンしてログインすることを選択すると、カメラビューをロードする新しい画面が開きます。これには数ミリ秒/秒かかります。 react-native-loading-spinner-overlayを使用して読み込みアニメーションを表示する方法を見つけようとしています。

export class Login extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      spinnerVisible: false, 
     }; 
    } 

    render() { 
     return <KeyboardAvoidingView 
      style={styles.container} 
      contentContainerStyle={styles.contentContainerStyle} 
      behavior="position" 
     > 
      <Spinner visible={this.state.spinnerVisible} /> 
      <Image 
       source={images.app.title} 
       style={styles.titleImage} 
      /> 
      <View style={styles.columnForm}> 
       <Button 
        title="INLOGGEN MET QR CODE" 
        wrapperBorderStyle={styles.titleButton} 
        onPress={this.onScanQRCode.bind(this)} 
        // disabled={true} 
       /> 
       <View style={{flex:0, flexDirection: 'row', marginTop:10, marginBottom:10}}> 
       // removed other elements 
       <Button 
        title="INLOGGEN" 
        wrapperBorderStyle={styles.titleButton} 
        onPress={() => alert('de nest werkt')} /> 
      </View> 
     </KeyboardAvoidingView> 
    } 

    onScanQRCode() { 
     // UPDATE STATE HERE TO SHOW SPINNER? 
     this.setState({spinnerVisible: true}); 
     this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Camera' })); 
    } 
} 

これは機能するが、カメラビューがレンダリングされる代わりに、ユーザがボタンを押したとき、それが示されているときにスピナーが示されています。 さらに、カメラの表示がsetTimeout以外でレンダリングされたときにスピナーを非表示にして、定義済みの時間が経過した後に状態を変更する方法がわかりません。そのアプローチは「ハッキー」と感じるだろう。

このシナリオを達成する正しい方法は何でしょうか？ 私はthis.propsを介して発送、ナビゲーション、およびルートにアクセスしています。

Answer 1

私はこの質問を前回よりも確信しています。

私はコード自体を実現することで問題を解決し、同期的に実行します。 this.setStateは非同期であるため、実際にナビゲートする前に画面が更新されず、視覚的なヒントは表示されません。

最高のことは、this.setStateが実際に状態を設定して、表示スピナーを表示するように画面をリフレッシュするように、ナビゲーションコードをタイムアウトで折り返すことです。

onScanQRCode() { 
    this.setState({spinnerVisible: true}); 
    setTimeout(() => { 
     this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Camera' })); 
    }, 100); 
}