React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用 FlatList或是 SectionList。
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
支持如下这些常用的功能：
- 完全跨平台。
- 支持水平布局模式。
- 行组件显示或隐藏时可配置回调事件。
- 支持单独的头部组件。
- 支持单独的尾部组件。
- 支持自定义行间分隔线。
- 支持下拉刷新。
- 支持上拉加载。
- 支持跳转到指定行（ScrollToIndex）。
属性
| 名称 | 类型 | 必填 | 说明 |
|---|---|---|---|
| renderItem | function | 是 | 从data中挨个取出数据并渲染到列表中。 |
| data | array | 是 | 为了简化起见，data 属性目前只支持普通数组。 |
| ItemSeparatorComponent | component | 否 | 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。 |
| ListEmptyComponent | component, function, element | 否 | 列表为空时渲染该组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。 |
| ListFooterComponent | component, function, element | 否 | 尾部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。 |
| ListHeaderComponent | component, function, element | 否 | 头部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。 |
| columnWrapperStyle | style object | 否 | 如果设置了多列布局（即将numColumns值设为大于 1 的整数），则可以额外指定此样式作用在每行容器上。 |
| extraData | any | 否 | 如果有除data以外的数据用在列表中（不论是用在renderItem还是头部或者尾部组件中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的 Object 或者数组中），然后再修改其值，否则界面很可能不会刷新。 |
| getItemLayout | function | 否 | getItemLayout是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。 |
| horizontal | boolean | 否 | 设置为 true 则变为水平布局模式。 |
| initialNumToRender | number | 否 | 指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。 |
| inverted | boolean | 否 | 翻转滚动方向。实质是将 scale 变换设置为-1。 |
| onEndReached | function | 否 | 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。 |
| onRefresh | function | 否 | 如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。 |
| refreshing | boolean | 否 | 在等待加载新数据时将此属性设为 true，列表就会显示出一个正在加载的符号。 |
方法
scrollToEnd()
滚动到底部。如果不设置getItemLayout属性的话，可能会比较卡。
scrollToIndex()
将位于指定位置的元素滚动到可视区的指定位置，当viewPosition 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央。
实例
1. 逻辑代码
import React, {Component} from 'react';
import {
StyleSheet,
FlatList,
Text,
View
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
turnOn: true,
turnOff: false
}
}
render() {
return (
<View style = {styles.container}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
FlatList
</Text>
</View>
<View style={styles.list}>
<FlatList
data = {[
{key: 'Java'},
{key: 'Android'},
{key: 'iOS'},
{key: 'Flutter'},
{key: 'React Native'},
{key: 'Kotlin'},
]}
renderItem = {({item})=><Text style = {styles.item}>{item.key}</Text>}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
title_view:{
flexDirection:'row',
height:50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text: {
fontSize:20,
color:'white'
},
list: {
flex: 1,
paddingTop: 22
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
2. 效果图
flatlist_demo.jpg
网友评论