Javascript 例外：undefined不是对象（评估'；导航'；）

我在

Books.js的堆栈导航器中有四个屏幕：

function Books(props) {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={BooksMenu} />
            <Stack.Screen name="Order Book" component={BookOrder} />
            <Stack.Screen name="My Books" component={MyBooks} />
            <Stack.Screen name="Details" component={MyBooksDetails} />
        </Stack.Navigator>
    );
}

我已经重新构造了默认的
道具
，它位于
BookCell
上，只是
MyBooks
屏幕中的一个自定义组件

function BooksCell({ navigation }) {...

包含
BookCell
组件的屏幕仍具有默认的
道具

function MyBooks(props) {...

因此，子屏幕（即组件
BooksCell
）将
navigation
作为重构的道具，其父屏幕
MyBooks
作为默认的
props
以及
MyBooks
的父屏幕
BooksMenu
也将
navigation
作为重构的道具

function BooksMenu({ navigation }) {...

希望这是有意义的。我是一个新的本地反应者，所以我有一个想法可能是错误的，但不确定如何修复它。
对
（{navigation}）
和
（道具）
的解构没有什么区别。重要的是调用组件时提供了哪些道具

编写
（{navigation}）
意味着您的组件需要使用
导航
属性调用。它没有提供那个道具

导航器渲染顶层屏幕时，将使用道具
navigation
和
route
调用它们，例如
MyBooks
和
BooksMenu
BooksCell
不是屏幕，因此React导航不会为其提供任何道具

如果您想使用
BooksCell
中的道具
导航
，则必须提供该道具。您可以从拥有道具的父级传递道具

function MyBooks(props) {
  ...
  return (
    <BooksCell navigation={props.navigation} />
  );
}

只有顶级屏幕的组件才能获得导航道具。如果您想在BooksCell中访问它，那么您需要从父级传递它，或者从useNavigation钩子访问它。
function MyBooks(props) {
  ...
  return (
    <BooksCell navigation={props.navigation} />
  );
}

function BookCell() {
  const navigation = useNavigation();
  ...
}