react-native - React Native FlatList - 在返回组件的渲染方法中调用函数

Question

我正在使用 FlatList 创建一个可选列表，该列表突出显示/勾选每个选定的项目。

在 index.js 上，我以这种方式使用组件：

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

在 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}
    />
  );
}

这是我得到的输出：

啊啊啊

xxx

啊啊啊

xxx

我希望它是：

啊啊啊

一个

xxx

啊啊啊

b

xxx

这条线不起作用：

{this.props.renderItem(item)}

Answer 1

FlatList renderItem的参数形式为：

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

意思是，你的渲染函数应该是这样的：

renderItem = ({item}) => {

不是

renderItem = (item) => {

Answer 2

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

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