在另一个内部调用组件时获取未定义不是对象（评估 'navigation.push'）

Question

这是我的组件：

function MyHeader({navigation}){

    let cartPress = () => navigation.push("Cart");

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

}

export default MyHeader;

当我在以下组件中调用它时：

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

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

}

export default MyScreen;

我在 MyScreen 组件中收到以下错误：

TypeError: undefined is not an object (evaluating 'navigation.push').

然而，当我调用 MyHeader 组件中的内容而不调用 AppHeader 组件时，我没有收到该错误：

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

function MyScreen({navigation}){
    let cartPress = () => navigation.push("Cart");

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

}

export default MyScreen;

问题是什么？

Answer 1

您没有将 navigation 属性 传递给 <MyHeader /> 组件，尝试：<MyHeader navigation={navigation} />