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

标签 react-native native-base

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

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => <JobListDetail firstOccurrence={rowData} />}
  renderSectionHeader={(sectionData, sectionId) => <ListSectionHeader sectionId={sectionId} />}
/>
dataSource包含一个对象数组,键中包含节标题,以及一个列表项数组作为值,如下所示
{
  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 的 Prop 支持。

部分标题可以用 itemHeader 呈现支柱:

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

关于react-native - 使用分隔符 React Native NativeBase ListView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43129763/

相关文章:

javascript - React Native - 使用 NativeBase Drawer 时无法读取未定义的属性 '_root'

android - NativeBase 中卡体中的表单不可见

javascript - 为什么我在 React Native 和 Native Base 中使用 TouchableOpacity 时图标消失了?

javascript - 当状态改变时,react-native自动打开模态

node.js - React Native bundle 错误 : Module `scheduler` does not exist in the Haste module map

ios - react 导航滑动返回不会触发

javascript - react native onChange 事件的名称类型值未定义

react-native - 如何通过 React Navigation 在 createBottomTabNavigator 中使用 AsyncStorage?

react-native - 如何知道 FlatList 中滚动(向上或向下)的状态?

javascript - Native Base如何获取List dataArray的ListItem索引?