Question

在 Flatlist 的 renderItem 内导航

2022-08-24

510

react-native react-native-flatlist react-native-navigation

我有一个组件 InventoryScreen ，它包含一个像这样的 Flatlist ：

<FlatList
            numColumns={2}
            data={filteredData}
            keyExtractor={(item, index) => index.toString()}
            renderItem={renderItem}
            stickyHeaderIndices={[0]}
            keyboardDismissMode={"on-drag"}>
</FlatList>
<TouchableOpacity
      onPress={() => navigation.navigate("ItemScreen") }> // <--- Here, it works.
</TouchableOpacity

在 InventoryScreen 内，我可以使用 navigation 。

renderItem：

const renderItem = ({ item }: { item: ItemResponse }) => {
  return <ItemView item={item} />;
};

ItemView

const ItemView = ({ item }: { item: ItemResponse }) => {
  return (
<TouchableOpacity
      onPress={() => navigation.navigate("ItemScreen") }> // <--- This is what I want.
</TouchableOpacity

但是，因为 ItemView 中没有可用的 navigation ，所以我无法在那里导航。当尝试将 navigation 传递给 renderItem 时， FlatList 中出现错误：

类型 'ListRenderItemInfo<ItemResponse>' 中缺少属性 'navigation'，但在类型 '{ item: ItemResponse; navigation: any; }' 中是必需的。

如何访问 ItemView 中的导航？

Answer 1

请尝试一下 根组件

const RootComp = ({navigation})=>{

    const renderItem = ({ item }: { item: ItemResponse }) => {
      return <ItemView item={item} navigation={navigation} />;
    };

return (
<FlatList
            numColumns={2}
            data={filteredData}
            keyExtractor={(item, index) => index.toString()}
            renderItem={renderItem}
            stickyHeaderIndices={[0]}
            keyboardDismissMode={"on-drag"}>
</FlatList>
)

}

ItemView

const ItemView = ({ item, navigation }: { item: ItemResponse }) => {
  return (
<TouchableOpacity
      onPress={() => navigation.navigate("ItemScreen") }> // <--- This is what I want.
</TouchableOpacity

Answer 2

你可以像从父级传递普通道具一样传递导航道具

const renderItem = ({ item }: { item: ItemResponse }) => {
  return <ItemView item={item}  nav={props.navigation} />;
};

希望这有效

Answer 3

我希望您可以在这里访问导航吗？然后只需将导航作为props

875643615

然后使用：

449764114

Gaurav Roy

2022-08-24