代码之家 › 专栏 › 技术社区 › aliep

React Native FlatList-在Render方法中调用函数,该函数返回一个组件

react-native-flatlist react-native

0

aliep · 技术社区 · 8 年前

我使用FlatList创建一个可选列表,突出显示/勾选每个选中的项目。

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

在可选列表中。我将列表定义为:

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级

一

b

{this.props.renderItem(item)}

2 回复 | 直到 8 年前

1

4

Nick 8 年前

平面列表的参数 renderItem

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

renderItem = ({item}) => {

不是

renderItem = (item) => {

2

0

aliep 8 年前

item.item项目 到要工作的功能

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