React Navigation v5: как получить параметры маршрута родительского навигатора внутри дочернего экрана - PullRequest
Новая
       16

React Navigation v5: как получить параметры маршрута родительского навигатора внутри дочернего экрана

0 голосов
/ 09 апреля 2020

Итак, у меня есть вложенные навигаторы

Main BottomTab.Navigator

  • Profile Bottom Tab # 1 (Stack.Navigator)
    • Profile Просмотр (Экран)
    • Подписчики (Экран)
    • Подписка (Top Tab.Navigator)
      • Страницы (Экран)
      • Группы (Экран)
  • Feed Bottom Tab # 2 (Stack)
  • Некоторые другие Bottom Tab # 3 (Stack)

Проблема заключается в том, что при переходе от экрана просмотра профиля к следующему навигатору я передаю некоторые параметры родительскому элементу после навигатора и хочу, чтобы все эти параметры были на дочерних вкладках Экраны (страницы / группы).

Но маршрут экранов дочерней вкладки не получает параметры, которые передаются в родительский навигатор (Follow Navigator)

Есть ли способ сделать это?

Вот мой код: Стек профиля 

const ProfileStack = () => (
  <Stack.Navigator
    initialRouteName='profileView'
  >
    <Stack.Screen
      name='profileView'
      component={ProfileScreen}
      options={{
        headerMode: 'screen',
        headerShown: false,
      }}
    />

    <Stack.Screen
      name='followers'
      component={FollowersScreen}
      options={{
        headerTitle: 'Followers',
      }}
    />
    <Stack.Screen
      name='following'
      component={FollowingTabs}
      options={{
        headerTitle: 'Following',
      }}
    />
 </Stack.Navigator>

FollowTabs 

const Tabs = createMaterialTopTabNavigator();
export const FollowingTabs = () => (
  <Tabs.Navigator
    initialRouteName='page'
    lazy
    swipeEnabled
  >
    <Tabs.Screen
      component={PageScreen}
      name='page'
      options={{ tabBarLabel: '2 Pages' }}
    />
    <Tabs.Screen
      component={GroupScreen}
      name='groups'
      options={{ tabBarLabel: '3 Groups' }}
    />
  </Tabs.Navigator>
);

Из профиля Просмотр Экран Я пытаюсь перейти к следующему экрану вкладок и должен передать некоторые параметры следующим образом. 

const onPressHandler = () => {
    navigation.navigate('following', **{ isPublicProfile, firstName }**);  // These parameters are passed to route of the following Tabs Navigator
  };

И когда я пытаюсь прочитать эти параметры в дочерних вкладках (страницы / группы), они не определены 

const PageScreen = ({ route }) => {
  const { isPublicProfile, firstName } = route.params; // undefined?? Cant read parent's params
...

Буду признателен за любую помощь.

Редактировать: Я нашел эту открытую проблему на github (https://github.com/react-navigation/rfcs/issues/43) Разве это пока невозможно?

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Итак, в итоге я использовал React.Context, как рекомендовано официальной навигацией React Документация . Пожалуйста, следуйте официальной документации для получения дополнительной информации.

1- Используйте контекст React и оберните навигатор провайдером контекста для передачи данных на экраны (рекомендуется).

Вот мое решение: 

const DEFAULT_CONTEXT = {
  isPublicProfile: false,
  ...
};

const FollowingTabNavigatorContext = createContext(DEFAULT_CONTEXT);

Навигатор вкладок «В родительской подписке» 

const Tabs = createMaterialTopTabNavigator();

export const FollowingTabs = ({ route }) => {
  const { isPublicProfile } = route.params;
  return (
    <FollowingTabNavigatorContext.Provider value={{ isPublicProfile }}>
      <Tabs.Navigator
        initialRouteName='pages'
        lazy
        swipeEnabled
      >
        <Tabs.Screen
          component={PageScreen}
          name='pages'
          options={{ tabBarLabel: '2 Pages' }}
        />
        <Tabs.Screen
          component={GroupScreen}
          name='groups'
          options={{ tabBarLabel: '3 Groups' }}
        />
      </Tabs.Navigator>
    </FollowingTabNavigatorContext.Provider>
  );
};

FollowingTabs.propTypes = propTypes;
FollowingTabs.defaultProps = defaultProps;

И, наконец, В моей дочерней вкладке отображаются экраны: 

export const GroupScreen = () => {
  const { isPublicProfile } = useContext(FollowingTabNavigatorContext);
  ...
}
0 голосов
/ 09 апреля 2020

Не совсем понял.

Вы попадаете на другую страницу нормально, но проблема в том, что вы не можете восстановить параметры?

...