Переход к экрану в другом навигаторе в React Navigation 5 - PullRequest
Новая
       89

Переход к экрану в другом навигаторе в React Navigation 5

0 голосов
/ 08 мая 2020

Я использую новый React Navigation 5 в своем приложении React Native.

Главное меню обрабатывается RootNavigator, которое является Drawer. Вход в систему / регистрация обрабатываются AuthNavigation, который является Stack.

Я пытаюсь отправить пользователя на экран Home под RootNavigator после успешного входа в систему. Другими словами, я пытаюсь отправить пользователя на экран под другим навигатором, введя navigation.navigate('RootNavigator', {screen: 'Home'});, но получаю сообщение об ошибке:

Действие «НАВИГАЦИЯ» с полезной нагрузкой {" name ":" RootNavigator "} не обрабатывался ни одним навигатором.

У вас есть экран с именем 'RootNavigator'?

Вот как выглядит мой App.js: 

const App = () => {

  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticatedUser, setIsAuthenticatedUser] = useState(false);

  useEffect( () => {

    // Check for valid auth_token here
    // If we have valid token, isLoading is set to FALSE and isAuthenticatedUser is set to TRUE
  });

  return (
    <Provider store={store}>
      <PaperProvider>
        <NavigationContainer>
          {
            isLoading
            ? <SplashScreen />
            : isAuthenticatedUser ? <RootNavigator /> : <AuthNavigator />
          }
        </NavigationContainer>
      </PaperProvider>
    </Provider>
  );
};

И вот мой AuthNavigator, который является Stack: 

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

// Components
import Login from '../../login/Login';

const AuthStack = new createStackNavigator();

export const AuthNavigator = () => {
    return(
        <AuthStack.Navigator>
            <AuthStack.Screen name="LoginScreen" component={Login} />
        </AuthStack.Navigator>
    );
};

А вот RootNavigator, который Drawer: 

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';

// Components
import Dashboard from '../../home/Dashboard';
import DrawerContent from './DrawerContent';
import ToDoList from '../../active_lists/to_do_lists/ToDoList';

const MainMenuDrawer = createDrawerNavigator();

export const RootNavigator = () => {

  return (
    <MainMenuDrawer.Navigator drawerContent={(navigation) => <DrawerContent navigation={navigation} />}>
      <MainMenuDrawer.Screen name="Home" component={Dashboard} />
      <MainMenuDrawer.Screen name="To Do List" component={ToDoList} />
    </MainMenuDrawer.Navigator>
  );
};

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

1 Ответ

2 голосов
/ 11 мая 2020

Есть 2 проблемы:

  1. Вы выполняете navigation.navigate('RootNavigator', {screen: 'Home'});, что означает переход к экрану Home в навигаторе, вложенном в экран RootNavigator. но нет экрана с именем RootNavigator, у вас есть компонент с именем RootNavigator, но navigate исключает имя экрана.

    Глядя на ваш код, у вас нет вложенных навигаторов, оба навигатора по-прежнему в root, только что обработано условно. Таким образом, вы обычно делаете navigation.navigate('Home') для навигации.

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

  2. Когда вы определяете экраны / навигаторы условно, React Navigation позаботится о том, чтобы отображать правильные экраны автоматически после того, как вы измените условие. В этом случае вы не делаете navigate.

    Из документов потока аутентификации:

    Важно отметить, что при использовании такой настройки вы не Нет необходимости вручную переходить от к экрану Home, набрав navigation.navigate('Home'). React Navigation автоматически перейдет на экран Home, когда isSignedIn станет true.

    Auth flow docs: https://reactnavigation.org/docs/auth-flow#how -it-will-work

    Итак, что вам нужно сделать, это изменить состояние isAuthenticatedUser в вашем компоненте. Вы можете следовать руководству в документации для примера с использованием контекста React, но если вы используете Redux, переместите это состояние в Redux или любую другую библиотеку управления состоянием, которую вы используете.

    И, наконец, удалите navigation.navigate после успешного входа в систему, поскольку это произойдет автоматически, когда вы обновите свое состояние.

...