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

这是我的控制台参数未定义，但是在堆栈中它在选项卡中未定义

Object { "key": "ListingEdit-oK0Wojum1iGcbBIxCnxNV", "name": "ListingEdit", "params": undefined, }

export default AppNavigation;

Answer 1

在堆栈导航中，您正在传递以下内容

onPress={() => navigation.navigate("ListingDetails", item)}

但是标签导航没有传递任何内容，但是您可以传递如下所示的初始参数

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

其中项目是AppNavigation函数中的变量。

参数未定义不是路由本机中的对象本机

1 个答案: