前言

这篇文章来了解一下相关列表组件的使用，这些组件在展示数据的时候比较有用！在Android中有ScrollView，ListView等！那么对应的RN中也有类似的组件！

ScrollView

没错，在RN中也有ScrollView这个滚动视图组件，跟Android中的ScrollView一样，功能一样，用法呢也一样！
具体就是这样：

<ScrollView>
  <Text style={{fontSize: 20}}>我是可以滚动的！</Text>
  <Text style={{fontSize: 20}}>我是可以滚动的！</Text>
  <Text style={{fontSize: 20}}>我是可以滚动的！</Text>
  <Text style={{fontSize: 20}}>我是可以滚动的！</Text>
  <Text style={{fontSize: 20}}>我是可以滚动的！</Text>
  <Text style={{fontSize: 20}}>我是可以滚动的！</Text>
  <Text style={{fontSize: 20}}>我是可以滚动的！</Text>
  <Text style={{fontSize: 20}}>我是可以滚动的！</Text>
  <Text style={{fontSize: 20}}>我是可以滚动的！</Text>
  ...        
</ScrollView>

当然里边的组件可以是文本<Text>，也可以是其他的比如图片<Image>等！
<ScrollView>的用法非常简单，这里就不多说了！

长列表

对比Android中的ListView，RN中也有ListView这个组件，但是现在已经废弃！不再推荐使用了！需要了解的可以查看官方文档，这里就不再介绍了！

在RN v0.43出现版本两个新的列表组件取代了ListView，那就是FlatList和SectionList，适用于展示长列表数据的组件。

FlatList

这个呢跟ListView基本上一毛一样，适于展示长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
它有两个比较重要的属性：

• data：列表的数据源
• renderItem：从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染

我们还是来对比ListView，data呢就不用说了吧，数据源，JS中就是一个Array数组，java中可以是数组，也可以是一个List。
renderItem，我的理解呢就相当于Android中的setAdapter()方法，我们拿一个适配器将数据设置在子item的布局中！
这样是不是很好理解了！
没有学过Android的同学，可以忽略setAdapter()方法，renderItem就是依次将数据源中的数据设置在子item的组件上面！这样依次就展示出了一个列表来！
举个例子：

class FlatListTest extends Component {
  render() {
    return (
      <View style={flatListStyles.container}>
        <FlatList
          data={[
            {key: '大护法'},
            {key: '绣春刀II：修罗战场'},
            {key: '神偷奶爸3'},
            {key: '神奇女侠'},
            {key: '摔跤吧，爸爸'},
            {key: '悟空传'},
            {key: '闪光少女'},
          ]}
          renderItem={({item}) => <Text style={flatListStyles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}
;

const flatListStyles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

AppRegistry.registerComponent('AwesomeProject', () => FlatListTest);

需要注意的点：
①data接收的数组，需要写成{key:你的数据value}的形式，否则会有黄色的警告！
②renderItem绑定数据的时候：renderItem={({item}) => 你的子item的组件}，获取数据调用item.key。

SectionList

SectionList就相当于分组带标题的FlatList，我们可以为具有同样特征的一类数据添加一个分组标题，最常见的比如，我们的联系人，按照拼音字母分组。

对于SectionList的简单使用呢，需要了解下边3个属性:

• sections：这个属性同样接收的是一个数组，类似{title: 'L', data: [{key: '李四'}]}，里边的title，表示分组标题的名字，data，表示这个分组下的数据源，data下的内容跟上边讲FlatList中设置data相同！
• renderItem ：这个属性也是绑定数据到子item组件上的，跟FlatList中renderItem相同。
• renderSectionHeader：对比renderItem，这个属性是设置分组标题的，具体使用和renderItem类似！
  使用：renderSectionHeader={({section}) => 你要展示标题的组件}，获取标题的内容要调用：section.title

看一个例子：

class SectionListTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'L', data: [{key: '李四'}]},
            {title: 'W', data: [{key: '王五'}]},
            {title: 'Z', data: [{key: '赵六'},{key: '张三'}]},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
        />
      </View>
    );
  }
}
;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'skyblue',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

AppRegistry.registerComponent('AwesomeProject', () => SectionListTest);

另外一个需要注意的点：
在上边我们的例子中，不同的section使用渲染的都是同一个子组件，这里是<Text style={styles.item}>{item.key}</Text>，那么如果想要不同的section使用不同的子组件渲染，该怎么写呢？
这样写：

<SectionList
  sections={[ // 不同section渲染不同类型的子组件
    {data: [...], key: ..., renderItem: ...},
    {data: [...], key: ..., renderItem: ...},
    {data: [...], key: ..., renderItem: ...},
  ]}
/>

结语

本篇文章介绍了常用列表组件FlatList和SectionList的简单使用，关于列表组件涉及到的内容是比较多的，所以分两篇学习，在下一篇文章将学习为FlatList添加分割线，header，footer，空数据视图，下拉刷新，上拉加载等进阶的内容！
好了，下篇见！