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);

 

posted @ 2019-12-31 18:19  XYQ全哥  阅读(755)  评论(0编辑  收藏  举报