将道具传递给组件的问题

Question

我正在努力将道具传递到某些组件中。我有一组正在使用的数据，但无法访问道具以使用这些数据。

我似乎可以访问组件文件夹中的道具，但由于某种原因，我无法从同一文件夹中访问道具。

任何想法将不胜感激。在此先感谢各位。

const homeOptions = [
  {
    name: "Create A Beast Workout",
    body: "Quick Start Workout",
    image: require("../assets/images/ChickSquat.jpg"),
    id: "1",
  },
  {
    name: "Beast Workout Diary",
    body: "Create and manage your workout shedule",
    image: require("../assets/images/DoubleBis.jpg"),
    id: "2",
  },
  {
    name: "Pre-Made Workouts",
    body: "Use one of our pre-made workouts",
    image: require("../assets/images/ChickA.jpg"),
    id: "3",
  },
  {
    name: "Statistics",
    body: "Analyse your personal statistics",
    image: require("../assets/images/WorkoutInProgress.jpg"),
    id: "4",
  },
  {
    name: "History",
    body: "Keep track of your workout history",
    image: require("../assets/images/ChickH.jpg"),
    id: "5",
  },
];

const HomeScreen = (props) => {
  console.log(props);
  return (
    <View style={Styles.containerTop}>
      <View>
        <HomeScreenImage style={Styles.top} />
        <View style={Styles.top}>
          <BigButton title="Beast" />
        </View>
      </View>
      <SafeAreaView style={Styles.flatListContainer}>
        <FlatList
          data={homeOptions}
          renderItem={({ item }) => (
            <TouchableOpacity
              style={Styles.container}
              onPress={() =>
                props.navigation.navigate({
                  routeName: "StackNavigator",
                  params: {
                    cardId: props.info.id,
                    cardImage: props.info.image,
                    cardName: props.info.name,
                    cardBody: props.info.body,
                  },
                })
              }
            >
//////below is where im having the problem accessing props  /////////////////
              <View style={Styles.cardContainer}>
                <Image style={Styles.imageStyle} source={props.info.image} />
                <View style={Styles.infoStyle}>
                  <Text style={Styles.titleStyle}>{props.info.name}</Text>
                  <Text style={Styles.bodyTextStyle}>{props.info.body}</Text>
                </View>
              </View>
            </TouchableOpacity>
        
        />
      </SafeAreaView>
    </View>
  );
};