为什么 useNavigation 挂钩在自定义侧栏中不起作用？

Question

如果我创建自定义抽屉：

<DrawerStack.Navigator
      drawerContent={props => <SideMenu {...props} />}>

它需要传递 props 才能在其中获取导航对象。
如果我有以下内容：

<ClientsStack.Navigator>
      <ClientsStack.Screen name="Clients" component={ClientsScreen} />
      <ClientsStack.Screen
        name="ClientDetails"
        component={ClientDetailsScreen}
      />
    </ClientsStack.Navigator>

在 ClientsScreen 里面我有 FlatList 其中有：

renderItem={({ item }) => <ClientCard id={item.id} />}

在 ClientCard 组件内部，它不是屏幕，它只是虚拟组件
我可以在那里使用 useNavigation 挂钩。
为什么它可以在那里使用而不能在自定义抽屉组件中使用？

Answer 1

您不能在 drawerContent 中使用 useNavigation，因为该挂钩只能从您的屏幕及其子项中使用。

最初获得导航的唯一方法是将它从您的屏幕传递给他们的孩子。但是由于存在 useContext 挂钩，该库提供了一个 useNavigation 来轻松获取深层嵌套组件中的导航。（并大大简化了代码）

抽屉自定义组件不是屏幕或包裹在屏幕中。因此，没有理由使用 useNavigation 从中获取导航。而且我很容易猜到没有我们在其中有深层嵌套组件的用例，因为它通常只是一个菜单。

为什么 useNavigation 挂钩在自定义侧栏中不起作用？

Why useNavigation hook doesn't work in custom side bar?

react-native

react-navigation

react-navigation-v6