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 <Text style={[{flex:1,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:2,backgroundColor:'yellow'}}/>;    }    render() {        var data = [];        for (var i = 0; i < 100; i++) {            data.push({key: i, title: i + ''});        }        return (            <View style={{flex:1}}>                <Button title='滚动到指定位置' onPress={()=>{                    //this._flatList.scrollToEnd();                    //this._flatList.scrollToIndex({viewPosition:0,index:8});                    this._flatList.scrollToOffset({animated: true, offset: 2000});                }}/>                <View style={{flex:1}}>                    <FlatList                        ref={(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}>                    </FlatList>                </View>            </View>        );    }}const styles = StyleSheet.create({    txt: {        textAlign: 'center',        textAlignVertical: 'center',        color: 'white',        fontSize: 30,    }});

效果图：

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

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

github下载地址