无法在React Navigation 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> 

Login.js

  loginHandle = () => {

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

Answer 1

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

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