将导航传递给功能组件

问题描述

这是我的主页代码：

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

我正在通过一系列静态数据和渲染卡映射到屏幕上 我将卡片设为可按压状态，以便将它们带到另一页， 当我单击卡片时，它会返回错误： Reference Error: Can't find variable: navigation 但是卡片上方的按钮可以正常工作

我在做什么错？ 我尝试了useNavigation挂钩，但是也没有用

更新 这是我的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 is not an object (evaluating 'navigation.navigate')

解决方案

此问题的解决方案是将ScrollViewWithCards转换为功能组件，然后将prop传递给它并添加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,})
            }
          >
            <HomeCard
              image={card.image}
              day={card.day}
              month={card.month}
              time={card.time}
              title={card.title}
              numberOfPeople={card.numberOfPeople}
            />
          </TouchableOpacity>
        </View>
      ))}
    </ScrollView>
  );
};

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

解决方法

您正在在render函数中设置const导航，而在其他函数中将无法访问它，因此您必须使用

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

,

在“路由”部分，您需要提及两个组件，

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

请不要忘记在上面导入文件。 然后您可以使用类似的导航道具

this.props.navigation //for class component
props.navigation //for functional component

或者如果您的父母中有亲子关系，请尝试以下一种方法：

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