React Native FlatList - 在 Returns 组件的渲染方法中调用函数

Question

我正在使用 FlatList 创建一个可选列表，highlights/ticks 每个项目都被选中。

在 index.js 我是这样使用组件的：

<SelectableList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={(item) => <Text>{item.key}</Text>}
/>

on selectable-list.js 我将列表定义为：

renderItem = (item) => {
    return (
      <View>
        <Text>aaa</Text>
        {this.props.renderItem(item)}
        <Text>xxx</Text>
      </View>
    );
  }

render() {
  return (
    <FlatList
      data={this.state.data}
      renderItem={this.renderItem}
    />
  );
}

这是我得到的输出：

aaa

xxx

aaa

xxx

我希望它是：

aaa

一个

xxx

aaa

b

xxx

这条线不工作：

{this.props.renderItem(item)}

Answer 1

这是发送到 renderItem 的 arg 的控制台日志，我必须将 item.item 传递给函数才能工作

{ item: { key: 'a' },
index: 0,
separators: 
{ highlight: [Function: highlight],
unhighlight: [Function: unhighlight],
updateProps: [Function: updateProps] } }

Answer 2

FlatList renderItem 的参数格式为：

(info: {
   item: ItemT,
   index: number,
   ...
})

也就是说，您的渲染函数应该如下所示：

renderItem = ({item}) => {

没有

renderItem = (item) => {

React Native FlatList - 在 Returns 组件的渲染方法中调用函数

React Native FlatList - Calling A Function In The Render Method Which Returns A Component

react-native

react-native-flatlist