前言

这篇文章来了解一下相关列表组件的使用，这些组件在展示数据的时候比较有用！在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}><FlatListdata={[{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}><SectionListsections={[{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使用不同的子组件渲染，该怎么写呢？
这样写：

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