react-navigation 6的native-stack找不到路由对象

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...

1. 标签导航

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

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