解决方案

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

我正在通过一系列静态数据和渲染卡映射到屏幕上我将卡片设为可按压状态，以便将它们带到另一页，当我单击卡片时，它会返回错误： 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,
                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

您正在在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>
);

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

将导航传递给功能组件

解决方案

2 个答案: