react-native - 如何在本机反应中使用 TouchableOpacity 从卡片列表中导航？

Question

大家好，我正在尝试使用单击card（列表视图）进行导航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
}
});

Answer 1

您应该进行以下更改。您需要通过导航访问导航方法，并且在您可以在功能组件中执行此操作之前（因为不再有 this.props）声明您的导航道具。

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

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

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