我创建了一个组件列表详细信息屏幕和列表项中的列表项，它有一张卡片，当人们点击卡片时它会显示 listingDetailScreen 当突然点击时发生同样的情况我想制作一个底部选项卡导航器并且在底部选项卡导航器中我已经传递了组件列表详细信息但它通过错误未定义不是一个对象这是我的列表屏幕的代码

const listings = [
  {
    id: 1,
    title: "Close your eyes",
    price: 10,
    image: require("../assets/child.png"),
  },
  {
    id: 2,
    title: "dare to surrender",
    price: 15,
    image: require("../assets/blur.png"),
  },
];
export default function ListingsScreens({ navigation }) {
  return (
    <ExpoScreen style={styles.screen}>
      <FlatList
        data={listings}
        keyExtractor={(listings) => listings.id.toString()}
        renderItem={({ item }) => (
          <CardList
            title={item.title}
            subtitle={"$" + item.price}
            image={item.image}
            onPress={() => navigation.navigate("ListingDetails", item)}
          />
        )}
      />
    </ExpoScreen>
  );
}

这是我的 Screendetailscreen

export default function ListingDetailsScreen({ route }) {
  console.log(route);
  const listing = route.params;
  return (
    <View style={styles.Screen}>
      <View style={styles.card}>
        <Image style={styles.CardImage} source={listing.image} />

        <View style={styles.tittleContainer}>
          <AppText style={styles.title}>{listing.title}</AppText>
          <AppText style={styles.subtitle}>{listing.price}</AppText>
        </View>
      </View>
      <ListItem
        image={require("../assets/dummyFemale.png")}
        title="Anna bella"
        sutitle="suck 5 person blood"
      />
    </View>
  );
}

在这里我制作了一个选项卡导航器

const Tab = createBottomTabNavigator();
const AppNavigation = () => (
  <Tab.Navigator>
    <Tab.Screen name="Feed" component={FeedNavigator} />
    <Tab.Screen name="ListingEdit" component={ListingDetailsScreen} />
    <Tab.Screen name="Account" component={AccountNavigator} />
  </Tab.Navigator>
);

export default AppNavigation;

这是三个选项卡，所有选项卡都在工作，接受中间一个

当我单击此按钮时，它会给我错误的