javascript - react 导航 v5 : How to get route params of the parent navigator inside the child screen

Question

所以我有嵌套的导航器

主 BottomTab.Navigator

• 配置文件 底部选项卡 # 1(Stack.Navigator)
  • 个人资料 View (屏幕)
  • 关注者(屏幕)
  • 以下(顶部选项卡。导航器)
    • 页面(屏幕)
    • 群组(屏幕)
• Feed 底部标签#2(堆栈)
• 一些其他底部标签#3(堆叠)

问题是当我从 Profile View 屏幕导航到 Following Navigator 时，我将一些参数传递给父级 Following Navigator，并且我想要子选项卡屏幕(页面/组)中的所有这些参数。

但是子标签屏幕的路由没有获取传递给父导航器(Following Tab 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>

关注标签

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>
);

我试图从 profileView 屏幕导航到以下选项卡屏幕，需要按如下方式传递一些参数。

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

当我尝试在子选项卡(页面/组)中读取这些参数时，这些参数是未定义的

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

如有任何帮助，我们将不胜感激。

编辑:我在 GitHub (https://github.com/react-navigation/rfcs/issues/43) 上发现了这个 Unresolved 问题，这还不可能吗？

Answer 1

所以我最终使用了官方 React Navigation 推荐的 React.Context documentation .请按照官方文档获取更多信息。

1- Use React context and wrap the navigator with a context provider to pass data to the screens (recommended).

这是我的解决方案:

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);
  ...
}