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下载地址

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值