[TOC]

概述

文章参考：https://www.jianshu.com/p/3203f413a887

React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。

FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

下面的例子创建了一个简单的FlatList，并预设了一些模拟数据。首先是初始化FlatList所需的data，其中的每一项（行）数据之后都在renderItem中被渲染成了Text组件，最后构成整个FlatList。

下面，我们来看一下测试的Demo。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/**
 * React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。

FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。

FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。

FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

下面的例子创建了一个简单的FlatList，并预设了一些模拟数据。首先是初始化FlatList所需的data，其中的每一项（行）数据之后都在renderItem中被渲染成了Text组件，最后构成整个FlatList。
 */
import React, { Component } from 'react';
// 从“react-native” 导入以下这些控件
import { StyleSheet, FlatList, View, Image, SectionList, Text } from 'react-native';


/**
 * 默认导出的组件
 */
export default class DemoBasicFlatListApp extends Component {

  render() {
    return (
      <View style={styleS.container}>
        <BasicFlatlist></BasicFlatlist>

        <BasicSectionList></BasicSectionList>
      </View>
    );
  }
}


/**
 * 基本的长列表数据
 */
class BasicFlatlist extends Component {
  render() {
    return (
      <View style={styleS.flatlistcontainer}>
        {/* 添加FlatList长列表 */}
        <FlatList
          data={[
            { key: 'Devin' },
            { key: 'Jackson' },
            { key: 'James' },
            { key: 'Joel' },
            { key: 'John' },
            { key: 'Jillian' },
            { key: 'Jimmy' },
            { key: 'Julie' },
          ]}
          renderItem={({ item }) => <Text style={styleS.itemStyle}>{item.key}</Text>}
        />
      </View>
    );
  }
}

/**
 * 基本的长列表数据
 */
class BasicSectionList extends Component {
  render() {
    return (
      <View style={styleS.sectionlistContainer}>
        {/* 添加需要分组的数据SectionList长列表 */}
        <SectionList
          sections={[
            { title: 'D', data: ['Devin'] },
            { title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie'] },
            { title: 'T', data: ['Devin'] },
          ]}
          renderItem={({ item }) => <Text style={styleS.itemStyle}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styleS.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}


const styleS = StyleSheet.create({
  flatlistcontainer: {

  },
  sectionlistContainer: {

  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(47,247,247,1.0)',
  },
  container: {
    flex: 1,
    paddingTop: 22,
  },
  itemStyle: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});