react native FlatList 使用详解

高性能的简单列表组件，支持下面这些常用的功能：

• 完全跨平台。
• 支持水平布局模式。
• 行组件显示或隐藏时可配置回调事件。
• 支持单独的头部组件。
• 支持单独的尾部组件。
• 支持自定义行间分隔线。
• 支持下拉刷新。
• 支持上拉加载。

如果需要分组/类/区（section），请使用 SectionList

属性：

ItemSeparatorComponent：分割线组件，

ListFooterComponent：结尾组件

ListHeaderComponent：头组件

data：列表数据

horizontal：设置为true则变为水平列表。

numColumns：列数 组件内元素必须是等高的,无法支持瀑布流布局

columnWrapperStyle：numColumns大于1时，设置每行的样式

getItemLayout：如果我们知道行高可以用此方法节省动态计算行高的开销。

refreshing：是否正在加载数据

onRefresh：设置此属性需要一个标准的 RefreshControl 控件，刷新数据

renderItem：渲染每个组件

onViewableItemsChanged：当一个新的Item渲染或者隐藏 的时候调用此方法。参数：info: {viewableItems: Array, changed: Array} viewableItems：当前可见的Item，changed：渲染或者隐藏的Item。

scrollToEnd({params?: ?{animated?: ?boolean}})：滚动到末尾，如果不设置getItemLayout属性的话，可能会比较卡。

scrollToIndexparams: {animated?: ?boolean, index: number, viewPosition?: number}：滚动到制定的位置

scrollToOffset(params: {animated?: ?boolean, offset: number})：滚动到指定的偏移的位置。

Demo：

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    FlatList,
    Text,
    Button,
} from 'react-native';

var ITEM_HEIGHT = ;

export default class FlatListDemo extends Component {

    _flatList;

    _renderItem = (item) => {
        var txt = '第' + item.index + '个' + ' title=' + item.item.title;
        var bgColor = item.index %  ==  ? 'red' : 'blue';
        return <Text style={[{flex:,height:ITEM_HEIGHT,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
    }

    _header = () => {
        return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是头部</Text>;
    }

    _footer = () => {
        return <Text style={[styles.txt,{backgroundColor:'black'}]}>这是尾部</Text>;
    }

    _separator = () => {
        return <View style={{height:,backgroundColor:'yellow'}}/>;
    }

    render() {
        var data = [];
        for (var i = ; i < ; i++) {
            data.push({key: i, title: i + ''});
        }

        return (
            <View style={{flex:}}>
                <Button title='滚动到指定位置' onPress={()=>{
                    //this._flatList.scrollToEnd();
                    //this._flatList.scrollToIndex({viewPosition:,index:});
                    this._flatList.scrollToOffset({animated: true, offset: });
                }}/>
                <View style={{flex:}}>
                    <FlatList
                        ref={(flatList)=>this._flatList = flatList}
                        ListHeaderComponent={this._header}
                        ListFooterComponent={this._footer}
                        ItemSeparatorComponent={this._separator}
                        renderItem={this._renderItem}

                        //numColumns ={}
                        //columnWrapperStyle={{borderWidth:,borderColor:'black',paddingLeft:}}

                        //horizontal={true}

                        //getItemLayout={(data,index)=>(
                        //{length: ITEM_HEIGHT, offset: (ITEM_HEIGHT+) * index, index}
                        //)}

                        //onEndReachedThreshold={}
                        //onEndReached={(info)=>{
                        //console.warn(info.distanceFromEnd);
                        //}}

                        //onViewableItemsChanged={(info)=>{
                        //console.warn(info);
                        //}}
                        data={data}>
                    </FlatList>
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    txt: {
        textAlign: 'center',
        textAlignVertical: 'center',
        color: 'white',
        fontSize: ,
    }
});
           

效果图：

这2个属性暂时没研究明白，希望大家在评论里说下。

onEndReached：在android环境下不是滑动到底部出发

onEndReachedThreshold：

github下载地址