Question

大家好我试图使用card点击TouchableOpacity（列表视图）进行导航。我还要传递cat_id（从服务器返回的响应）随之而来（到CourseDetail页面）？有可能吗？下面是我的代码，但我收到错误＆＃39;找不到变量导航＆＃39;。请帮助...

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 })}>

如何使用TouchableOpacity在卡片列表中导航反应原生？

1 个答案: