React Native中FlatList的renderItem如何向Item组件传递自定义参数

直接在renderItem渲染子组件时追加自定义props即可，无需特殊API，修改分两步：

1. 修改FlatList的renderItem配置 #

渲染<Item />时，将myParam作为组件属性直接传入，属性值可以是固定值、状态变量、组件方法、renderItem自带的上下文参数等任意合法值：

<FlatList
   style={styles.scrollView}
   data={data}
   keyExtractor={({ id }, index) => id} 
   renderItem={({ item, index }) => (
     <Item 
       item={item} 
       myParam="这里替换为你实际需要传递的值" 
     />
   )}
/>

renderItem回调自带三个入参：item（当前行数据）、index（当前行索引）、separators（分割线控制对象），如果业务需要也可以一并传入Item组件。

2. 修改Item组件的入参接收 #

在Item组件的props解构中新增myParam字段，即可在组件内部直接使用传入的参数：

const Item = ({ item, myParam }) => {
   // 可直接使用myParam
   console.log('自定义参数myParam的值：', myParam)
   
   return (
     // 原有组件UI逻辑
   )
}

常见传参示例 #

• 传固定值：myParam="自定义字符串"、myParam={100}、myParam={true}
• 传父组件状态/方法：myParam={currentPage}、myParam={handleItemPress}
• 传当前行索引：myParam={index}

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