将导航传递给函数组件

Question

这是我的主页代码：

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

我正在通过一组静态数据和渲染卡将其映射到屏幕上我把卡片做成可按的，这样它们就能把我带到另一页，当我点击卡片时 Returns 一个错误：Reference Error: Can't find variable: navigation 但是卡片上方的按钮工作得很好

我做错了什么？我尝试了 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 is not an object (evaluating '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 navigation={this.props.navigation} />

Answer 1

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

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

Answer 2

在路由部分，你需要像这样提到这两个组件，

<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

将导航传递给函数组件

Passing Navigation to a Function Component

react-native

react-native-navigation

解决方案