Переход к другому экрану StackNavigtor при нажатии кнопки React Native

Я сделал основной навигатор, в котором я сделал 2 вспомогательных навигатора: Это мой MainNavigator:

import React, {useEffect, useState} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import storage from '../services/storage';
import {useDispatch, useSelector} from 'react-redux';
import {setUser} from '../store/reducers/auth';
import AuthNavigation from './AuthNavigation';
import MainNavigation from './MainNavigation';

const {Navigator, Screen} = createStackNavigator();

const StackNavigation = () => {
  const [isLogged, setIsLogged] = useState(false);
  const dispatch = useDispatch();
  const loadUser = async () => {
    try {
      const data = await storage.get('USER');
      if (data !== null && data !== '') {
        console.info('Hello user', data);
        dispatch(setUser(data));
        setIsLogged(true);
      }
    } catch (error) {
      console.info('APP JS ERROR', error.message);
    }
  };

  useEffect(() => {
    loadUser();
  }, []);

  return (
    <Navigator screenOptions = {{headerShown: false}}>
      {isLogged ? (
        <Screen name = "MainNavigation" component = {MainNavigation} />
      ) : (
        <Screen name = "AuthNavigation" component = {AuthNavigation} />
      )}
    </Navigator>
  );
};

export default StackNavigation;

Это мои вспомогательные навигаторы:

Аутнавигация:

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import SignUpScreen from '../screens/AccountScreens/SignUpScreen';
import LoginScreen from '../screens/AccountScreens/LoginScreen';
import ForgotPassword from '../screens/AccountScreens/ForgotPassword';
import OTPVerification from '../screens/AccountScreens/OTPVerification';
import SetNewPassword from '../screens/AccountScreens/SetNewPassword';

const {Navigator, Screen} = createStackNavigator();

const AuthNavigation = () => {
  const verticalAnimation = {
    gestureDirection: 'vertical',
    cardStyleInterpolator: ({current, layouts}) => {
      return {
        cardStyle: {
          transform: [
            {
              translateY: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [layouts.screen.height, 0],
              }),
            },
          ],
        },
      };
    },
  };
  return (
    <Navigator
      initialRouteName = {'Login'}
      screenOptions = {{headerShown: false, animationEnabled: true}}>
      <Screen
        name = "SignUp"
        component = {SignUpScreen}
        options = {verticalAnimation}
      />
      <Screen name = "Login" component = {LoginScreen} />
      <Screen name = "ForgotPassword" component = {ForgotPassword} />
      <Screen name = "OTPVerification" component = {OTPVerification} />
      <Screen name = "SetNewPassword" component = {SetNewPassword} />
    </Navigator>
  );
};

export default AuthNavigation;

ГлавнаяНавигация:

import React, {useState} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import MyTabNavigation from './MyTabNavigation';
import GymDetailScreen from '../screens/InnerScreens/GymDetailScreen';
import AccountOverview from '../screens/DrawerScreens/AccountOverview';
import SubscriptionDetails from '../screens/DrawerScreens/SubscriptionDetails';
import BillingDetails from '../screens/DrawerScreens/BillingDetails';
import ChangePassword from '../screens/DrawerScreens/ChangePassword';
import BuySubscribtion from '../screens/InnerScreens/BuySubscribtion';
import ScanScreen from '../screens/InnerScreens/ScanScreen';
import PaymentSummary from '../screens/InnerScreens/PaymentSummary';
import PaymentMethod from '../screens/InnerScreens/PaymentMethod';

const {Navigator, Screen} = createStackNavigator();

const MainNavigation = () => {
  const horizontalAnimation = {
    cardStyleInterpolator: ({current, layouts}) => {
      return {
        cardStyle: {
          transform: [
            {
              translateX: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [layouts.screen.width, 0],
              }),
            },
          ],
        },
      };
    },
  };
  return (
    <Navigator
      initialRouteName = {'MyTabNavigation'}
      screenOptions = {{headerShown: false, animationEnabled: true}}>
      <Screen name = "GymDetailScreen" component = {GymDetailScreen} />
      <Screen
        name = "MyTabNavigation"
        component = {MyTabNavigation}
        options = {horizontalAnimation}
      />
      <Screen name = "AccountOverview" component = {AccountOverview} />
      <Screen name = "SubscriptionDetails" component = {SubscriptionDetails} />
      <Screen name = "BillingDetails" component = {BillingDetails} />
      <Screen name = "ChangePassword" component = {ChangePassword} />
      <Screen name = "BuySubscription" component = {BuySubscribtion} />
      <Screen name = "ScanScreen" component = {ScanScreen} />
      <Screen name = "PaymentSummary" component = {PaymentSummary} />
      <Screen name = "PaymentMethod" component = {PaymentMethod} />
    </Navigator>
  );
};

export default MainNavigation;

Я хочу перейти к MainNavigator при входе в систему, который находится в AuthNavigator. Вот как я это делаю:

navigation.navigate('MainNavigation');

Но это дает мне эту ошибку:

Действие NAVIGATE с полезной нагрузкой {"name":"MainNavigation"} не было обработано ни одним навигатором.

У вас есть экран под названием «MainNavigation»?

Если вы пытаетесь перейти к экрану во вложенном навигаторе, см. https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

Это предупреждение предназначено только для разработчиков и не будет отображаться в рабочей среде.

Пожалуйста, помогите мне с этим, потому что я пробую это в первый раз. заранее спасибо

🤔 А знаете ли вы, что...
JavaScript поддерживает асинхронное программирование с использованием промисов и асинхронных функций.


56
2

Ответы:

Решено

Вы используете потоки аутентификации, указанные в документах React Navigation.

Обратите внимание, что этот подход использует условное отображение экранов, что означает, что экран не отображается, если условие не выполняется. Таким образом, приложение вызовет ошибку при переходе на несуществующий экран.

Что вам нужно сделать, чтобы перейти к экрану MainNavigation, это установить isLogged переменная от MainNavigator до true.


navigation.navigate('Основная навигация'); Здесь вы не можете использовать метод навигации, потому что оба являются разными навигаторами.

Таким образом, вы должны визуализировать свой навигатор на условной основе.

Например:

вы можете сохранить authToken после успешного входа в систему и в своем основном файле маршрута вы можете проверить условие записи, является ли authToken нулевым или нет. На этой основе вы можете сделать свой навигатор Like,

 {
      authTocken != '' (
        <Stack.Navigator screenOptions = {{ headerShown: false }} initialRouteName = {initialRoute}>
          <Stack.Screen name = {routes.Dasboard} component = {Dashboard} />
          <Stack.Screen name = {routes.Setting} component = {Setting} />
        </Stack.Navigator>
      )
    :
       <Stack.Navigator screenOptions = {{ headerShown: false }} 
         initialRouteName = {initialRoute}>
          <Stack.Screen name = {routes.Login} component = {Login} />
          <Stack.Screen name = {routes.Registration} component=Registration} />
        </Stack.Navigator>
  }