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

Question

大家好，我正在尝试使用 TouchableOpacity 单击 card（列表视图）进行导航。我还想传递 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。（请注意，如果该页面是 class，则需要编写 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 })}>

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

How to navigate from a card list using TouchableOpacity in react native?

navigation

react-native

touchableopacity