React native 如何在react native中使用TouchableOpacity从卡片列表导航？

大家好，我正在尝试使用

TouchableOpacity

单击

卡（列表视图）进行导航。我还想将
cat_id
（服务器返回的响应）与此一起传递（到CourseDetail页）？是否可能？下面是我的代码，但我遇到错误“找不到变量导航”。请提供帮助

HomeScreen.js

const HomeScreen = ({course}) =>{
    const {name,featured_image,cat_id} = course;

    return(

<TouchableOpacity onPress={() =>navigate("CourseDetail")}>
    <Card>
     <CardSection>
     <View style={styles.thumbnailContainerStyle}>
         {course.term_id == '28' ? (<View></View>) : (
         <Text style={styles.userStyle}>{name}
         </Text> )}
    </View>
     </CardSection>
    </Card>
    </TouchableOpacity>
    );
};

const ScheduledApp = StackNavigator({
CourseDetail:{
    screen: CourseDetail
}
});

const主屏幕=（{course}）=>{
const{name，特色图片，cat_id}=course；
返回(
导航（“Coursedeail”）}>
{course.term_id='28'？（）：(
{name}
)}
);
};
const ScheduledApp=StackNavigator({
课程详情：{
屏幕：Coursedeail
}
});
您应该执行以下更改。您需要通过navigation访问navigate方法，并且在功能组件中执行该操作之前（因为不再有this.props）也要声明您的navigation prop

此外，您还可以在屏幕之间传递道具。传递导航函数的第二个参数，通过添加参数，您可以在导航页面中以如下形式访问它们：
navigation.state.params.cat_id
。（请注意，如果该页面是一个类，则需要编写
this.props.navigation.state.params.cat_id
）

const主屏幕=（{课程，导航}）=>{
const{name，特色图片，cat_id}=course；
返回(
navigation.navigate（“Coursedeail”，{cat_id}}>
我尝试了此操作，但出现了此错误。
未定义不是评估导航的对象。导航
。我错过了它，您还应该将此组件作为屏幕添加到StackNavigator。否则它将无法获得导航道具。很抱歉，我没有获得您的支持。您的意思是添加要导航的屏幕吗？就像我以前做的那样？最后，您定义了一个StackNavigator。您已经在那里添加了一个屏幕，这意味着它现在是一条路线。您也需要将此屏幕添加到某个地方，无论它属于哪个导航器。这意味着我也必须将其添加到
CoursedDetail
页面？
const HomeScreen = ({course, navigation}) =>{
    const {name,featured_image,cat_id} = course;

    return(
        <TouchableOpacity onPress={() => navigation.navigate("CourseDetail", { cat_id })}>