无法在反应导航 5 中导航到抽屉堆栈

Question

我有一个应用程序，它在抽屉导航器内有一个底部选项卡导航器作为我的主屏幕，我还有一个堆栈导航器，其中包含我的身份验证屏幕（包括登录屏幕）。

成功登录后，我无法从登录屏幕导航到主堆栈屏幕。 我收到错误消息 - 任何导航器都未处理使用有效负载导航的操作。

请看我的代码。我该如何解决这个问题

导航文件 - Navigation.js

const MainTabScreen = () => (
    <Tab.Navigator
      initialRouteName="Main"
      activeColor="#fff"
    >
      <Tab.Screen
        name="Main"
        component={Main}
        options={{
          tabBarLabel: 'Home',
          tabBarColor: "#009387",
          tabBarIcon: ({ color }) => (
            <Icon name="md-home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarLabel: 'Profile',
          tabBarColor: "#694fad",
          tabBarIcon: ({ color }) => (
            <Icon name="md-contact" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Explore"
        component={ExploreScreen}
        options={{
          tabBarLabel: 'Account',
          tabBarColor: "#d02860",
          tabBarIcon: ({ color }) => (
            <Icon name="md-planet" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
)



// HOME STACK SCREEN   
const DrawerScreen = () => (
  <Drawer.Navigator drawerContent={props => <DrawerContent {...props} /> } >
  <Drawer.Screen name='MainTab' component={MainTabScreen} />
  </Drawer.Navigator>
);

const AuthStack = createStackNavigator();

const AuthStackScreen = ({navigation}) => (
    <AuthStack.Navigator headerMode='none'>
        <AuthStack.Screen name="SplashScreen" component={SplashScreen} />
        <AuthStack.Screen name="SignInScreen" component={SignInScreen} /> // LOGIN SCREEN
        <AuthStack.Screen name="SignUpScreen" component={SignUpScreen} />
    </AuthStack.Navigator>
);

const RootStack = createStackNavigator();
const RootStackScreen = () => {


  const [isLoading, setIsLoading] = React.useState(true);
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const bootstrapAsync = async () => {
      let userToken;

      try {
        userToken = await AsyncStorage.getItem('FBIdToken');
        console.log("toen", userToken)
        if(userToken !== null) {
          setIsLoading(!isLoading);
          setUser(userToken);
        } else {
          setIsLoading(!isLoading);
        }
      } catch (e) {
        console.log(error)
      }

      // After restoring token, we may need to validate it in production apps
    };

    bootstrapAsync();
  }, []);


  return (
    <RootStack.Navigator
      headerMode="none"
      screenOptions={{ animationEnabled: false }}
      mode="modal"
    >
      {isLoading ? (
        <RootStack.Screen name="Loading" component={LoadingScreen} />
      ) : user ? (
        <RootStack.Screen name="DrawerScreen" component={DrawerScreen} /> //HOME STACK          ) : (
        <RootStack.Screen name="AuthStackScreen" component={AuthStackScreen} />
      )}
    </RootStack.Navigator>
  );
};

export default RootStackScreen;

App.js

  <Provider store={store}>
        <NavigationContainer ref={navigationRef}>
      <RootStackScreen />
    </NavigationContainer>
   </Provider> 

登录.js

  loginHandle = () => {

        this.props.navigation.navigate("DrawerScreen")
    };

Answer 1

我怀疑在您的 RootStackScreen 组件中，您的条件 isLoading 为真，因此当您导航时，到您的 DrawerScreen 的路线不存在。尝试删除条件以确保。然后，如果这是原因，您可以尝试将您的条件应用于您传递给DrawerScreen 的组件，例如：

<RootStack.Screen name="DrawerScreen" component={isLoading ? LoadingScreen : DrawerScreen} />