React-Native FlatList学习简介

FlatList相当于ListView的升级版，优化了数据过大带来的性能问题，同时也增加了许多好用的功能。

FlatList的功能简介，复制过来的：

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

关于FlatList的属性：

必须属性：

data：列表数据，
renderItem：每行的渲染组件，一般返回一个View
其他属性：

ItemSeparatorComponent：分割线，一般返回一个View
ListFooterComponent：结尾组件，一般返回一个View
ListHeaderComponent：头组件，一般返回一个View
horizontal：设置为true则变为水平列表
numColumns：列数，默认一列
columnWrapperStyle：numColumns大于1时，设置每行的样式 
getItemLayout：如果我们知道行高可以用此方法节省动态计算行高的开销，此属性为异步执行，滑动太快容易显示空白 
refreshing：是否正在加载数据 
onRefresh：下拉刷新数据，需要一个方法
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})：滚动到指定的偏移的位置

实现一个FlatList：

'use strict';
import React, { Component } from 'react';
import {
    AppRegistry,
    FlatList,
    View,
    Button,
    Text,
    TouchableOpacity
} from 'react-native';

export default class RnflatListView extends React.PureComponent {

    _flatList;

    constructor(props) {
        super(props);
        this.state = {
            refer: false,
        }
    }

    _goToBottom = () => {
        this._flatList.scrollToEnd()
    };

    _goToTop = () => {
        this._flatList.scrollToOffset({animated: true, offset: 0})
    };

    _headerView = () => {
        return (
            <View style={{flex: 1, backgroundColor: '#a1f11a'}}>
                <Button onPress={this._goToBottom} title='点我到底部'>

                </Button>
            </View>
        )
    };

    _footView = () => {
        return (
            <View style={{flex: 1, backgroundColor: '#a1f11a'}}>
                <Button onPress={this._goToTop} title='点我到顶部'>

                </Button>
            </View>
        )
    };

    _renderItemView = (item) => {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', height: 44}}>
                <Text>这里显示的数据为：{item.key}，名称：{item.title}</Text>
            </View>
        )
    };

    _separatorView = () => {
        return (
            <View style={{flex: 1, backgroundColor: '#ff0000', height: 1}}>

            </View>
        )
    };

    _onRefresh = () => {
        this.setState({
            refer: true,
        });
        this.timer1 = setTimeout(
            ()=>{
                console.log('刷新结束');
                this.setState({
                    refer: false,
                });
            },
            5000,
        );
    };

    componentWillUnmount() {
        clearTimeout(this.timer1)
    }

    render() {
        var data = [];
        for (var i=0; i<100; i++) {
            data[i] = {key: i, title: '第' + i + '行'}
        }
        return(
            <View style={{backgroundColor: '#ffaaff', flex: 1, justifyContent: 'center'}}>
                <FlatList ref={(flatList)=>this._flatList = flatList} style={{backgroundColor: '#aaffaa', flex: 1, marginTop: 20}}
                          data={data}
                          renderItem={({item}) => this._renderItemView(item)}
                                  ListHeaderComponent = {this._headerView}
                                  ListFooterComponent = {this._footView}
                                  ItemSeparatorComponent = {this._separatorView}

                          // numColumns ={2} 分成两列
                          // columnWrapperStyle={{ borderWidth: 2, borderColor: 'black' }} 分列后设置边框
                    onViewableItemsChanged={(info)=>{
                         console.log(info);
                    }}
                          // horizontal = {true} 将列表横着放
                          refreshing = {this.state.refer}
                          onRefresh={this._onRefresh}
                          onEndReachedThreshold={-0.05}
                          onEndReached={(info) => {
                              alert("滑动到底部了");
                          } }
                />
            </View>
        )
    }
}
AppRegistry.registerComponent('RnflatListView', ()=> RnflatListView);

效果显示：

Untitled9.gif