React Native可复用FlatList传递item.id到navigation报item未定义如何解决

item是ReusableFlatList组件内部renderItem回调的局部变量，父组件传入的onNavigate回调默认拿不到这个作用域下的变量，所以触发跳转时会报item未定义。

1. 修改可复用ReusableFlatList组件 #

触发onNavigate回调时，将当前遍历到的item作为参数传递给父组件：

const ReusableFlatList = (props) => (
  <FlatList
    data={props.data}
    renderItem={({ item }) => (
      <TouchableOpacity
        onPress={() => props.onNavigate(item)}
      >
        <View>
          <Image 
            source={{uri: item.image}}
          />
        </View>
        <View>
          <Text>{item.name}</Text>
        </View>
      </TouchableOpacity>
    )}
  />
)

2. 修改页面调用代码 #

在onNavigate回调中接收子组件传递的item参数即可正常取到id：

<ReusableFlatList 
  data={dataArray} 
  onNavigate={(item) => props.navigation.navigate('Screen', {id: item.id})} 
/>

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