如何动态更改 SwitchNavigator 屏幕

Question

所以我有一个 SwitchNavigator，它在一个函数中使用，该函数接收一个值作为道具（加载真或假）。我想根据firebase onAuthStateChange 更改该功能道具，因此如果我没有收到响应，我会渲染一个微调器，如果我收到一个我会更改状态并将其用作函数但现在这不起作用，因为componentDidMount 没有等待来自firebase功能的回应！有什么想法吗？

import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    import { createStackNavigator, SwitchNavigator } from 'react-navigation';
    import MainScreen from './MainScreen';
    import AuthenticationNav from './Authentication';
    import firebase from 'firebase';
    import SplashScreen from './SplashScreen';

    export default class App extends React.Component {
      constructor(){
        super();
        this.state={
          screen:'loading'
        }
      }
      componentWillMount() {
      }
      componentDidMount(){
        let isItTrue
        firebase.auth().onAuthStateChanged(function(user) {
            if (user) {
             isItTrue=true;
            } else {
              isItTrue=false
            }
          });
          this.setState({screen:isItTrue})
      }
      render() {console.log(this.state)
        const App=app(this.state.screen)
        return (
            <View style={{ flex: 1 }}>
              <App />
            </View>
        );
      }
    }
    const Main = createStackNavigator({
      Main: {
        screen: MainScreen
      }
    })
    const Authentication = createStackNavigator({
      AuthenticationScreen: {
        screen: AuthenticationNav
      }
    }, {
        headerMode: 'screen'
      })
    const Splash = createStackNavigator({
      SplashScreen: {
        screen: SplashScreen
      }
    })
    const app = (isSignedIn) => {
      return SwitchNavigator({
        SignedIn: {
          screen: Main
        },
        SignedOut: {
          screen: Authentication
        },
        Loading:{
          screen:Splash
        }
      },
        {
          initialRouteName: isSignedIn==='loading' ? "Loading" : isSignedIn?"SignedIn":"SignedOut"
        }
      )
    }

Answer 1

欢迎弗拉德！

首先，here's a guide from react-navigation 给出了使用 SwitchNavigator 的示例。你可能已经看到了。

我会移动逻辑来确定是否登录到 Splash 组件，如下所示：

// SplashScreen.js
componentDidMount(){
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      this.props.navigation.navigate('SignedIn');
    } else {
      this.props.navigation.navigate('SignedOut');
    }
  });
}

所以基本上您的 SwitchNavigator 将始终具有三个屏幕，将 initialRouteName 设置为 "Splash"。

此外，您还需要使用 createSwitchNavigator 而不是 SwitchNavigator。