React 导航 - App.js 设置和导航到主选项卡

Question

我正在使用 React Navigation 5 构建身份验证流程。在阅读文档时，似乎最好执行三元操作。我在登录（从身份验证堆栈到主选项卡）和注销（从主选项卡到身份验证堆栈）时遇到问题。我不断收到消息“行动 NAVIGATE 没有被任何导航器处理 - 你有一个名为 Login 的屏幕吗？”这是我的 App.js 的一部分

render() {

    if (this.state.isLoading) {
      return <SplashScreen />;
    }

    return (
      <NavigationContainer>
        <Stack.Navigator>
          {this.state.userToken == null ? (

            // No token found, user isn't signed in
            <>
              <Stack.Screen name="Login" component={LoginScreen} />
              <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
              <Stack.Screen name="SignIn" component={SigninScreen} />
            </>

          ) : (

              // User is signed in
              <Stack.Screen name="Main" component={MainTabs} />
            )}
        </Stack.Navigator>
      </NavigationContainer>
    )
  }

当我注销时，我发出以下函数来清除存储并导航回我的身份验证屏幕

onPress={() => AsyncStorage.clear().then(this.props.navigation.navigate('Login'))}

救命！

Answer 1

创建一个单独的类来处理 Navigator。用户登录后将“userToken”存储在用户减速器数据中，并在注销时从减速器中清除用户令牌，以便它会自动将导航器从主切换到登录。

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";
import { connect } from "react-redux";

class App extends React.Component {
 
 renderAuthNavigator(){
   return (
    <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
        <Stack.Screen name="SignIn" component={SigninScreen} />
    </Stack.Navigator>
  );
 }

 renderMainNavigator(){
   return (
     <Stack.Navigator>
       <Stack.Screen name="Main" component={MainTabs} />
     </Stack.Navigator>
   );
 }

 render(){
  return (
     <NavigationContainer>
        {this.user.userToken == null ? this.renderAuthNavigator() : this.renderMainNavigator()}
    </NavigationContainer>
  );
 }
}

const mapStateToProps = (store, ownProps) => ({
  user: store.auth.data
});

export default connect(
  mapStateToProps, null
)(App);

注意：注销时不需要调用

navigation.navigate('登录');