ReactNative: 使用列表组件FlatList组件

一、简介

在前面介绍Text组件时，我们将其封装过列表组件，用来显示大量的数据。ReactNative中对于大量数据清单列表展示的需求，有提供可用的列表组件，FlatList组件就是其中之一。FlatList组件的功能非常强大，既可以展示和增删数据，也可以支持下拉刷新和上拉加载，跟iOS中的UITableView大部分功能有些类似。该组件跨平台，支持水平布局模式。

 

二、API

FlatList组件提供的API比较丰富，属性分为：必选属性和可选属性，方法则是一些滚动监听。如下所示：

1、必选属性

//数据源，必不可少
data: ?Array<ItemT>

//数据源展示的元素节点，必不可少
renderItem: (info: {item: ItemT, index: number}) => ?React.Element<any>

2、可选属性

//分割线组件，不会出现在首行和末行
ItemSeparatorComponent?: ?ReactClass<any>

//表尾组件
ListFooterComponent?: ?ReactClass<any>

//表头组件
ListHeaderComponent?: ?ReactClass<any>

//多列时，设置每一行样式
columnWrapperStyle?: StyleObj

//额外数据，如果有除data以外的数据用在列表中（不论是用在renderItem还是头部或者尾部组件中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的 Object 或者数组中），然后再修改其值，否则界面很可能不会刷新
extraData?: any

//给某一个节点元素布局
getItemLayout?: (data: ?Array<ItemT>, index: number) => {length: number, offset: number, index: number}

//是否水平布局
horizontal?: ?boolean

//初始化渲染的节点元素数量
initialNumToRender: number

//用于提取指定索引处给定项目的唯一键。
keyExtractor: (item: ItemT, index: number) => string

//列数
numColumns: number

//当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用, 函数
onEndReached?: ?(info: {distanceFromEnd: number}) => void,

//决定当距离内容最底部还有多远时触发onEndReached回调，函数
onEndReachedThreshold?: ?number

//当可见区域元素发生改变时调用，函数
onViewableItemsChanged?: ?

//当刷新时调用，函数，如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能
onRefresh?: ?() => void

//是否正在刷新
refreshing?: ?boolean

//视图可见的配置
viewabilityConfig?: ViewabilityConfig

3、滚动方法

//滚到底部
scrollToEnd(params?: ?{animated?: ?boolean})

//滚到指定可视位置，当viewPosition 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央
scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number})

//滚到到某一个元素位置
scrollToItem(params: {animated?: ?boolean, item: ItemT, viewPosition?: number})

//设置滚动偏移
scrollToOffset(params: {animated?: ?boolean, offset: number})

 

三、使用

列举了这么多常用的API，现在简单使用一下，示例如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    FlatList
} from 'react-native';


export default class ReactNativeDemo extends Component {

    render() {
        return (
            <View style={[styles.flex,styles.bgColor]}>
                <FlatList
                    data={[
                        {key: '数学-------科目'},
                        {key: '语文-------科目'},
                        {key: '英语-------科目'},
                        {key: '历史-------科目'},
                        {key: '地理-------科目'},
                        {key: '生物-------科目'},
                        {key: '政治-------科目'},
                        {key: '化学-------科目'},
                        {key: '物理-------科目'},
                        {key: '数学-------科目'},
                        {key: '语文-------科目'},
                        {key: '英语-------科目'},
                        {key: '历史-------科目'},
                        {key: '地理-------科目'},
                        {key: '生物-------科目'},
                        {key: '政治-------科目'},
                        {key: '化学-------科目'},
                        {key: '物理-------科目'}
                    ]}
                    disableVirtualization={false}
                    initialNumToRender={5}
                    showsHorizontalScrollIndicator={true}
                    showsVerticalScrollIndicator={true}
                    keyExtractor={(item, index) => index.toString()}
                    ListHeaderComponent={React.createClass({
                        render () { return <View style={{backgroundColor:'red',height:100}}/> }
                    })}
                    ListFooterComponent={React.createClass({
                        render () { return <View style={{backgroundColor:'green',height:100}}/> }
                    })}
                    ItemSeparatorComponent={React.createClass({
                        render () { return <View style={{backgroundColor:'gray',height:1}}/> }
                    })}
                    renderItem={({item}) => <Text style={[styles.font,styles.size]}>{item.key}</Text>}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: 'white'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    font: {
        fontSize: 30,
        color: 'purple',
        textAlign: 'center'
    },
    size: {
        height: 50
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);