react-native – 使用分隔符React Native NativeBase ListView

我目前使用React Native的ListView来显示带有节标题的列表(renderSectionHeader):

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => <JobListDetail firstOccurrence={rowData} />}
  renderSectionHeader={(sectionData,sectionId) => <ListSectionHeader sectionId={sectionId} />}
/>

dataSource包含一个对象Array,其中包含键中的section头,以及一个列表项数组,如此值

{
  Section 1: [{firstName: 'A',lastName: 'B'},{firstName: 'C',lastName: 'D'}],Section 2: [{firstName: 'E',lastName: 'F'},{firstName: 'G',lastName: 'H'}]
}

我想知道是否可以使用NativeBase的List组件实现相同(并且具有更好看的布局).但是,我找不到有关如何传入节标题的任何信息:

<List dataArray={items} renderRow={(data) =>
    <ListItem>
        <Text>{data}</Text>
    </ListItem>
} />

这是否可能,如果是,是否有使用它而不是React Native的ListView的缺点?

解决方法

理论上,NativeBase的List应该接受React Native的ListView支持的道具.

可以使用itemHeader prop渲染节标题:

<ListItem itemHeader>
  <Text>ACTION</Text>
</ListItem>

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...