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

【问题标题】：React Native FlatList - Calling A Function In The Render Method Which Returns A ComponentReact Native FlatList - 在返回组件的渲染方法中调用函数
【发布时间】：2017-07-12 14:21:18
【问题描述】：

我正在使用 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

啊啊

xxx

这条线不工作：

{this.props.renderItem(item)}

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

FlatList renderItem 的参数格式为：

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

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

renderItem = ({item}) => {

不是

renderItem = (item) => {

【讨论】：

我错过了 ES6 的这个特性，谢谢！

【解决方案2】：

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

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

【讨论】：