什么是sectionView，ListView和FlatList的核心概念？ SecionList

Question

我很反应原生。我想知道作为react-native的SectionView，ListView和FlatView之间的核心差异是什么？我应该使用它们的情况。

Answer 1

ListView （已弃用）

它是一个已弃用的类，用于创建List。你也可以阅读List documentation.

DEPRECATED - 使用其中一个新的列表组件，例如FlatList或SectionList

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => <Text>{rowData}</Text>}
/>

FlatList

现在您应该使用此类来创建列表。它的性能优于ListView。因为ListView在大数据时很慢。但FlatList管理它显着。

它具有ListView上的许多功能

• 完全跨平台。
• 可选水平模式。
• 可配置的可见度回调。
• 标题支持。
• 页脚支持。
• 分隔支持。
• 拉到刷新。
• 滚动加载。
• ScrollToIndex支持。

以下是FlatList的创建方式

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

SecionList

当需要将列表分成多个部分时使用。它的实现与FlatList略有不同。它需要两个项目。

1. 标题/头
2. 数据

它具有所有FlatList功能，并且还具有部分支持。

• 完全跨平台。
• 可配置的可见度回调。
• 列表标题支持。
• 列表页脚支持。
• 项目分隔符支持。
• 节头支持。
• 节分隔符支持。
• 异构数据和项呈现支持。
• 拉到刷新。
• 滚动加载。

这是实施

// Example 1 (Homogeneous Rendering)
<SectionList
  renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
  renderSectionHeader={({section: {title}}) => (
    <Text style={{fontWeight: 'bold'}}>{title}</Text>
  )}
  sections={[
    {title: 'Title1', data: ['item1', 'item2']},
    {title: 'Title2', data: ['item3', 'item4']},
    {title: 'Title3', data: ['item5', 'item6']},
  ]}
  keyExtractor={(item, index) => item + index}
/>