如何在FlatList的renderItem组件ItemView中使用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") }> // <--- 此处可正常工作
</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") }> // <--- 这是我想要实现的功能
</TouchableOpacity>

但由于ItemView中无法访问navigation，无法在其中实现导航。尝试将navigation传递给renderItem时，FlatList会报错：
Property 'navigation' is missing in type 'ListRenderItemInfo<ItemResponse>' but required in type '{ item: ItemResponse; navigation: any; }'.

请问如何在ItemView中访问navigation？

方法1：通过Props传递Navigation #

直接在renderItem里把navigation作为额外属性传给ItemView，同时调整组件的Props类型：

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

// 修改ItemView的Props定义与使用
const ItemView = ({ item, navigation }: { item: ItemResponse; navigation: any }) => {
  return (
    <TouchableOpacity
      onPress={() => navigation.navigate("ItemScreen")}>
      {/* 组件内部内容 */}
    </TouchableOpacity>
  );
};

如果用TypeScript，建议用NavigationProp做类型约束，更严谨：

import { NavigationProp } from '@react-navigation/native';
// 假设你的导航栈类型为RootStackParamList
type ItemViewProps = {
  item: ItemResponse;
  navigation: NavigationProp<RootStackParamList>;
};

const ItemView = ({ item, navigation }: ItemViewProps) => {
  // 组件逻辑
};

方法2：使用useNavigation钩子（推荐） #

如果ItemView是函数组件，可直接使用React Navigation提供的useNavigation钩子，无需手动传参：

import { useNavigation } from '@react-navigation/native';

const ItemView = ({ item }: { item: ItemResponse }) => {
  const navigation = useNavigation();
  
  return (
    <TouchableOpacity
      onPress={() => navigation.navigate("ItemScreen")}>
      {/* 组件内部内容 */}
    </TouchableOpacity>
  );
};

只要ItemView处于导航容器的上下文范围内，就能正常获取到导航实例，这种方式更简洁符合框架设计思路。

方法3：传递点击回调函数 #

把导航逻辑留在InventoryScreen中，仅将点击回调传给ItemView，让组件更通用：

// InventoryScreen中修改renderItem
const renderItem = ({ item }: { item: ItemResponse }) => {
  return <ItemView item={item} onPress={() => navigation.navigate("ItemScreen")} />;
};

// 修改ItemView
const ItemView = ({ item, onPress }: { item: ItemResponse; onPress: () => void }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      {/* 组件内部内容 */}
    </TouchableOpacity>
  );
};

这种方式让ItemView不依赖导航上下文，适合需要跨场景复用的组件。

内容的提问来源于stack exchange，提问作者greterpiffin