Question

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

on index.js我正在以这种方式使用组件：

<div id="chat">
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  </span>
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>spanasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdh</p>
  </span>
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  </span>
</div>

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

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

这是我得到的输出：

AAA

XXX

AAA

XXX

我希望它是：

AAA

一

XXX

AAA

B'/ P>

XXX

此专线无效：

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

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] } }

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

2 个答案: