如何重定向导航

Question

我将所有堆栈都放在文件[[routes.js中的AppNavigator中，并将其呈现在我的主文件App.js中，我只希望用户直接转到'Home'堆栈，如果他已经通过身份验证（isAuthenticated: true）。有谁可以帮助我吗？欢迎为该问题提供其他解决方案！可以在我的登录页面上访问isAuthenticated值并在那里导航吗？如果是，怎么办？

我当前的代码：

routes.js

const AppNavigator = createSwitchNavigator({
  Auth: AuthenticationNavigator,
  Home: MainNavigator,
}, {
  initialRouteName: 'Auth'}
);

const AppContainer = createAppContainer(AppNavigator);
export default AppContainer

App.js

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isAuthenticationReady: false,
      isAuthenticated: true,
      test: true,
    };
    // Iniciando firebase... source: https://www.youtube.com/watch?v=pNZks2j2Qaw
    if (!firebase.apps.length) { firebase.initializeApp(ApiKeys.FirebaseConfig); }
    firebase.auth().onAuthStateChanged(this.onAuthStateChanged);
  }

  onAuthStateChanged = (user) => {  //Funcao chamada toda vez que ha uma mundança login/logout
    this.setState({isAuthenticationReady: true}); //avisa que autenticaçao foi feita
    this.setState({isAuthenticated: !!user}); //se o user for 'null' e pq ta deslogado, senao, ta logado
  }

  render() {
    if (!this.state.isAuthenticationReady) {
      return (
        <>
          <AppContainer /> //this part i will do later
        </>
      );
    } else {
      return (
        <>
          <StatusBar barStyle="light-content" backgroundColor="#121212" />
          {this.state.isAuthenticated ? ( this.props.navigation.navigate("Main") ) : ( this.props.navigation.navigate("Main") ) }
        </>
      );
    }
  }
}

这里是问题：
{this.state.isAuthenticated ? ( <AppContainer /> ) : ( <AppContainer /> ) }

<AppContainer />在哪里，我希望它是this.props.navigation.navigate()，但它不起作用

Answer 1

我建议您仅在App.js中返回“ AppContainer”。并在AuthenticationNavigator组件中进行所有与auth相关的检查。然后使用this.props.navigation.navigate（“ Home”）从AuthenticationNavigator导航到Home。

或者如果您想维护相同的代码。您可以使用“ MainNavigator”组件代替this.props.navigation.navigate（“ Main”）;