Question

我正在使用React Navigation 5构建身份验证流程。在阅读文档时，似乎最好执行三元操作。我在登录（从Auth堆栈到Main选项卡）和注销（从Main到Auth Stack）时遇到麻烦。我不断收到消息“动作 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”存储在用户Reducer数据中，并在注销时从Reducer清除用户令牌，这样它将自动将导航器从Main切换到Login。

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（'登录'）;

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

1 个答案: