这是我的主页代码：

import React from "react";
//More Imports

export default class Home extends React.Component {
 //Some Code
  render() {
    const { navigation } = this.props;

    return (
      <ScrollView>
      //Some Code
          <View style={styles.barContainer}>
            <Button
              title="Add Lesson"
              onPress={() => navigation.navigate("ThisLesson")}
            />
          </View>
          //Some Code
          {ScrollViewWithCards}
      //Some Code
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
//Some Style
});

const cards = [
  {
    day: "3",
    month: "Jan",
    numberOfPeople: "4",
    time: "17:00-18:00",
    title: "Dance Class",
    image: require("../../../assets/images/image1.jpeg"),
  },
  //More Cards...
];

const ScrollViewWithCards = (
  <ScrollView>
    {cards.map((card, index) => (
      <View key={index} style={styles.cardContainer}>
        <TouchableOpacity
          onPress={() =>
            navigation.navigate("ThisLesson", {
              image: card.image,
              day: card.day,
              month: card.month,
              time: card.time,
              title: card.title,
              numberOfPeople: card.numberOfPeople,
            })
          }
        >
          <HomeCard
            image={card.image}
            day={card.day}
            month={card.month}
            time={card.time}
            title={card.title}
            numberOfPeople={card.numberOfPeople}
          />
        </TouchableOpacity>
      </View>
    ))}
  </ScrollView>
);

我正在映射一组静态数据并将卡片渲染到屏幕上 我让卡片可按压，这样它们就会带我到另一个页面， 当我点击卡片时，它 返回错误： 引用错误：找不到变量：导航 但卡片上方的按钮工作正常

我做错了什么？ 我尝试了 useNavigation Hook，但它也不起作用

更新 这是我的 HomeCard 组件：

import React from "react";
//More Imports

const HomeCard = (props) => {
  

  return (
    <View style={styles.container}>
//Some Code
    </View>
  );
};
export default HomeCard;

const styles = StyleSheet.create({
//Some Style
});

const smallAvatars = [
//Some Array
];

我将 {navigation 传递给 ScrollViewWithCards ，如下所示：

const ScrollViewWithCards =({navigation})=>()

但现在我又收到另一个错误 TypeError：undefined 不是对象（正在评估“navigation.navigate”）

解决方案

此问题的解决方案是将 ScrollViewWithCards 转换为函数组件，然后将 props 传递给它并添加 return：

const ScrollViewWithCards = (props) => {
  return (
    <ScrollView>
      {cards.map((card, index) => (
        <View key={index} style={styles.cardContainer}>
          <TouchableOpacity
            onPress={() =>
              props.navigation.navigate("ThisLesson", {
                image: card.image,
                day: card.day,
                month: card.month,
                time: card.time,
                title: card.title,
                numberOfPeople: card.numberOfPeople,
              })
            }
          >
            <HomeCard
              image={card.image}
              day={card.day}
              month={card.month}
              time={card.time}
              title={card.title}
              numberOfPeople={card.numberOfPeople}
            />
          </TouchableOpacity>
        </View>
      ))}
    </ScrollView>
  );
};

然后在主渲染中： <ScrollViewWithCards导航={this.props.navigation} />