React Native中如何用TouchableOpacity实现卡片导航并传参？

嘿，这个问题我之前也碰到过，很容易解决！先给你拆解一下问题，再一步步改代码：

为什么会出现"can't find variable navigate"？ #

你的HomeScreen组件里直接用了navigate，但它根本不知道navigate是什么——因为你没有拿到React Navigation提供的navigation对象。这个对象是导航栈里的组件才会默认拥有的，或者需要通过钩子/ props传递进来。

解决方案：获取navigation并传递cat_id参数 #

我给你两种常用的解决方式，选哪种都可以：

方式1：从props接收navigation（适合列表项组件） #

如果你的HomeScreen是作为列表项被父组件渲染的，那需要把父组件的navigation通过props传进来，然后在HomeScreen里使用：

修改HomeScreen组件：

const HomeScreen = ({course, navigation}) =>{ // 这里新增navigation参数
  const {name,featured_image,cat_id} = course;
  return(
    // 这里改成navigation.navigate，同时把cat_id作为参数传过去
    <TouchableOpacity onPress={() => navigation.navigate("CourseDetail", { cat_id })}>
      <Card>
        <CardSection>
          <View style={styles.thumbnailContainerStyle}>
            {course.term_id == '28' ? (<View></View>) : (
              <Text style={styles.userStyle}>{name} </Text>
            )}
          </View>
        </CardSection>
      </Card>
    </TouchableOpacity>
  );
};

然后在渲染HomeScreen的父组件里，记得把navigation传下去（比如父组件是导航栈里的屏幕）：

// 假设父组件是这样的
const ParentScreen = ({ navigation }) => {
  return (
    <FlatList
      data={yourCourseListData}
      renderItem={({ item }) => <HomeScreen course={item} navigation={navigation} />}
    />
  );
};

方式2：使用useNavigation钩子（React Navigation 5+推荐） #

如果你的项目用的是React Navigation 5及以上版本，可以直接用useNavigation钩子来获取导航对象，不用手动传props：

首先导入钩子：

import { useNavigation } from '@react-navigation/native';

然后修改HomeScreen：

const HomeScreen = ({course}) =>{
  const navigation = useNavigation(); // 获取navigation对象
  const {name,featured_image,cat_id} = course;
  return(
    <TouchableOpacity onPress={() => navigation.navigate("CourseDetail", { cat_id })}>
      {/* 原有代码不变 */}
    </TouchableOpacity>
  );
};

在CourseDetail页面接收cat_id参数 #

跳转过去之后，你需要在CourseDetail页面拿到这个cat_id，同样分两种情况：

函数组件用useRoute钩子 #

import { useRoute } from '@react-navigation/native';

const CourseDetail = () => {
  const route = useRoute();
  const { cat_id } = route.params; // 取出传递的cat_id

  return (
    <View>
      <Text>当前课程分类ID：{cat_id}</Text>
      {/* 其他页面内容 */}
    </View>
  );
};

Class组件从props获取 #

如果是Class组件，直接从this.props.route.params里拿：

class CourseDetail extends React.Component {
  render() {
    const { cat_id } = this.props.route.params;
    return (
      <View>
        <Text>当前课程分类ID：{cat_id}</Text>
      </View>
    );
  }
}

最后再确认一下你的StackNavigator配置，确保CourseDetail已经正确注册进去了，就像你写的那样：

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

这样改完之后，点击卡片就能正常跳转到详情页，同时也能拿到cat_id参数啦！

内容的提问来源于stack exchange，提问作者Neethu M