React native 将导航传递给功能组件

这是我的主页代码：

从“React”导入React；
//更多进口
导出默认类Home扩展React.Component{
//一些代码
render（）{
const{navigation}=this.props；
返回(
//一些代码
导航。导航（“ThisLesson”）}
/>
//一些代码
{ScrollViewWithCards}
//一些代码
);
}
}
const styles=StyleSheet.create({
//某种风格
});
常数卡=[
{
第三天：，
月份：“一月”，
人数：“4”，
时间：“17:00-18:00”，
标题：“舞蹈课”，
image:require（“../../../assets/images/image1.jpeg”），
},
//更多的卡片。。。
];
const ScrollViewWithCards=(
{cards.map（（卡片，索引）=>(
导航。导航（“本课”{
图片：card.image，
日期：卡片日期，
月：卡。月，
时间：卡，时间，
标题：卡片，标题，
numberOfPeople:card.numberOfPeople，
})
}
>
))}
);

我正在通过一系列静态数据和渲染卡映射到屏幕上 我让卡片可以按，这样它们就可以把我带到另一页， 当我点击卡片时，它返回一个错误：

参考错误：找不到变量：导航

但卡上方的按钮工作正常

我做错了什么？ 我尝试了

useNavigation

Hook，但也没有成功

更新 这是我的HomeCard组件：

从“React”导入React；
//更多进口
常量HomeCard=（道具）=>{
返回(
//一些代码
);
};
导出默认家庭卡；
const styles=StyleSheet.create({
//某种风格
});
const smallAvatars=[
//一些数组
];

我将

{navigation}

传递给

ScrollViewWithCards

如下：

constScrollViewWithCards=（{navigation}）=>（）

但是现在我得到了另一个错误

TypeError:undefined不是一个对象（评估'navigation.navigate'）

解决方案 此问题的解决方案是将

ScrollViewWithCards

转换为函数组件，然后向其传递道具并添加返回：

const scrollview with cards=（道具）=>{
返回(
{cards.map（（卡片，索引）=>(
道具.导航.导航（“本课”{
图片：card.image，
日期：卡片日期，
月：卡。月，
时间：卡，时间，
标题：卡片，标题，
numberOfPeople:card.numberOfPeople，
})
}
>
))}
);
};

然后在主渲染中：

---

您正在渲染函数中设置常量导航，在其他函数中无法访问，因此必须使用

this.props.navigation.navigate

然后你可以简单地做

const ScrollViewWithCards =()=> (
  <ScrollView>
    {cards.map((card, index) => (
      <View key={index} style={styles.cardContainer}>
        <TouchableOpacity
          onPress={() =>
            this.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>
);

constScrollViewWithCards=（）=>(
{cards.map（（卡片，索引）=>(
this.props.navigation.navigate（“ThisLesson”{
图片：card.image，
日期：卡片日期，
月：卡。月，
时间：卡，时间，
标题：卡片，标题，
numberOfPeople:card.numberOfPeople，
})
}
>
))}
);

在布线部分，您需要像这样提及这两个组件

<Stack.Screen name="<your component name>" component={your component class} />

或者，如果您的组件中存在父子关系，请尝试以下方法：

<YOUR_COMPONENT navigation={props.navigation}/> // functional component
<YOUR_COMPONENT navigation={this.props.navigation}/> // class component

//功能组件
//类组件

但随后我得到另一个错误

TypeError:undefined不是一个对象（评估“navigation.navigate”）

我的组件是一个函数，不是一个类您将道具传递给ScrollViewWithCards对吗？你能用新代码更新这个问题吗？我不能写这行

我将得到元素类型无效请尝试使用this.props.navigation.navigate（“ThisLesson”，{}）我认为它是一个单独的组件

<YOUR_COMPONENT navigation={props.navigation}/> // functional component
<YOUR_COMPONENT navigation={this.props.navigation}/> // class component