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 = 100;

export default class FlatListDemo extends Component {

    _flatList;

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

    _header = () => {
        return backgroundColor:'black'}]}>这是头部;
    }

    _footer = () => {
        return backgroundColor:'black'}]}>这是尾部;
    }

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

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

        return (
            flex:1}}>
                '滚动到指定位置' onPress={()=>{
                    //this._flatList.scrollToEnd();
                    //this._flatList.scrollToIndex({viewPosition:0,index:8});
                    this._flatList.scrollToOffset({animated: true, offset: 2000});
                }}/>
                flex:1}}>
                    (flatList)=>this._flatList = flatList}
                        ListHeaderComponent={this._header}
                        ListFooterComponent={this._footer}
                        ItemSeparatorComponent={this._separator}
                        renderItem={this._renderItem}

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

                        //horizontal={true}

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

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

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

            
        );
    }
}

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

效果图：

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

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

github下载地址