react-navigation 6 的本机堆栈找不到路由对象

Question

在 react-navigation 6 的“react-navigation/stack”下，它很好地运行了所有功能，如 useRoute、useNavigation..etc

但是，我将堆栈导航从 react-navigation/stack 更改为 react-navigation/native-stack。

native-stack 在“GroupHeaders 组件”中找不到路由对象

下面是我的代码。

1. 根导航

import { createNativeStackNavigator, NativeStackHeaderProps } from "@react-navigation/native-stack";

const RootNavigation = createNativeStackNavigator();
    <NavigationContainer>
        <RootNavigation.Navigator>
          <RootNavigation.Screen
            name="Main-root"
            component={TabNavigation}
            options={{ headerShown: false }}
          />
        
          <RootNavigation.Screen
            name="PostDetail-root"
            component={PostDetailContainer}
            options={{ header: () => <GroupHeaders /> }}. // ***** HERE
          />
         // ...other screen...

2. 标签导航

      <Tab.Navigator
        initialRouteName="home-tab"
        //...
        >
        <Tab.Screen
          name="home-tab"
          component={HomeNavigation}
          options={{
            headerShown: false,
            tabBarLabel: "Home",
            //...
          }}
        />

3. GroupHeaders 组件

const GroupHeaders = ({}) => {
  const route = useRoute(); //**** HERE, RN occurs error message of "~not find a route object~~" 
  // ... other code

Answer 1

您可以使用可选参数

reference document.

<RootNavigation.Screen
    name="PostDetail-root"
    component={PostDetailContainer}
    options={({ route }) => ({
    tabBarLabel: (props) => <GroupHeaders route={route} {...props}  />,
  })}/> // ***** HERE
/>

• 使用

  function GroupHeaders({route}) {
    console.log("route1",route);
    return (
        <Text>{route.name}</Text>
    )
  }