调用自定义组件时报undefined is not an object (evaluating 'navigation.push')如何解决

• 仅在React Navigation中直接注册的路由页面组件，会被框架自动注入navigation属性，你自定义的MyHeader属于普通业务组件，不会自动获取该属性。
• 你在MyScreen中调用MyHeader时没有传递navigation属性，导致MyHeader内部解构拿到的navigation值为undefined，调用navigation.push时就触发了对应报错。
• 直接把逻辑写在MyScreen中不报错，是因为MyScreen是注册的路由页面，本身可以拿到正确的navigation对象。

方案1：手动传递navigation属性 #

修改MyScreen中调用MyHeader的代码，将当前页面拿到的navigation作为属性传递给子组件即可：

import React from 'react';
import MyHeader from "../MyHeader";

function MyScreen({navigation}){
    return(
        <View>
            <MyHeader navigation={navigation} />
        </View>
    );
}

export default MyScreen;

方案2：MyHeader内部通过useNavigation钩子获取路由对象 #

无需逐层传递navigation属性，直接在子组件内部调用React Navigation提供的useNavigation钩子获取路由实例即可，修改MyHeader代码如下：

import { useNavigation } from '@react-navigation/native';

function MyHeader(){
    const navigation = useNavigation();
    const cartPress = () => navigation.push("Cart");

    return(
        <View>
            <TouchableOpacity onPress={cartPress}>
                <Text>Cart</Text>
            </TouchableOpacity>
        </View>
    );
}

export default MyHeader;

内容的提问来源于stack exchange，提问作者user15738832