Невозможно перейти к стеку ящиков в 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 не существует при навигации. Чтобы убедиться, попробуйте удалить это условие. Тогда, если это причина, вы можете попробовать применить ваше условие к компоненту, который вы передаете своемуDrawerScreen вместо этого что-то вроде:

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