Question

我已经创建了一个组件清单详细信息屏幕和列表项中的listitem，当有人单击卡片时，它就会显示一张卡片，它会显示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;

这三个选项卡都可以正常工作

当我单击此按钮时，出现以下错误

Answer 1

<Tab.Screen name="ListingEdit" component={ListingDetailsScreen} />

这将导航到ListingDetailsScreen，没有任何参数，

从ListingDetailsScreen调用<Tab.Navigator>时，您可以尝试传递参数：

尝试做：

<Tab.Screen 
  name="ListingEdit"
  component={() => <ListingDetailsScreen route={{ params: ITEM }} />}
/>

但是同样，您将不得不找到一种方法来将您的ITEM放入AppNavigation，以便您可以将其作为道具传递。

Answer 2

您可以尝试使用getParams。例如：route.getParams（'parameter_name'）。如果不起作用，则需要确认使用此代码。

console.log(route)

或 console.log（JSON.stringfy（route））结果，您可以检查是否返回了正确的路由。检查后，可以从路由对象获取正确的参数。希望你能成功。

未定义不是路由本机反应中的对象

2 个答案: