开发者问题收集

params undefined 不是路由 react native 中的对象

2020-07-07
1079

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

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;
1个回答

在堆栈导航中,您传递如下所示的项目

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

但在选项卡导航中,您未传递任何内容,但您可以传递如下所示的初始参数

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

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

Guruparan Giritharan
2020-07-07