FlatList

　　

　　之前使用的组件是ListView，当时要添加一个下拉刷新，上拉加载的功能，所以对ListView做了一些封装，但是后来看官方文档，不建议再使用ListView，因为效率问题，做过Android的朋友都知道，Android的ListView如果不自己处理一下，也是有效率问题的。所以官方又推出了FlatList，而且自带上拉下拉的功能。

　　

　　功能简介

　　

　　完全跨平台。

　　

　　支持水平布局模式。

　　

　　行组件显示或隐藏时可配置回调事件。

　　

　　支持单独的头部组件。

　　

　　支持单独的尾部组件。

　　

　　支持自定义行间分隔线。

　　

　　支持下拉刷新。

　　

　　支持上拉加载。

　　

　　支持跳转到指定行（ScrollToIndex）。 如果需要分组/类/区（section），请使用SectionList(这个我们会在之后的文章中介绍)

　　

　　使用

　　

　　FlatList如果只做简单使用也是很简单的，这里我们会分难以程度，逐渐介绍：

　　

　　直接使用

　　

　　<FlatList

　　

　　data={[{key: 'a'}, {key: 'b'}]}

　　

　　renderItem={({item}) => <Text>{item.key}</Text>}

　　

　　/>

　　

　　可以看出跟之前的ListView很像，但是其中少了dataSource，这里，我们只需要传递数据，其它的都交给FlatList处理好了。

　　

　　属性说明

　　

　　ItemSeparatorComponent 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。�在这里可以根据需要插入一个view

　　

　　ListEmptyComponent 列表为空时渲染该组件。可以是React Component, 也可以是一个render函数， 或者渲染好的element。

　　

　　ListFooterComponent 尾部组件

　　

　　ListHeaderComponent 头部组件

　　

　　columnWrapperStyle 如果设置了多列布局（即将numColumns 值设为大于1的整数），则可以额外指定此样式作用在每行容器上。

　　

　　data 为了简化起见，data属性目前只支持普通数组。如果需要使用其他特殊数据结构，例如immutable数组，请直接使用更底层的VirtualizedList 组件。

　　

　　extraData 如果有除data以外的数据用在列表中（不论是用在renderItem 还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。

　　

　　getItem 获取每个Item

　　

　　getItemCount 获取Item属相

　　

　　getItemLayout 是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。如果你的行高是固定的getItemLayout 用起来就既高效又简单，类似下面这样： getItemLayout={(data, index) => ( {length: 行高, offset: 行高 * index, index} )}注意如果你指定了SeparatorComponent，请把分隔线的尺寸也考虑到offset的计算之中。

　　

　　horizontal 设置为true则变为水平布局模式。

　　

　　initialNumToRender 指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。

　　

　　initialScrollIndex 指定渲染开始的item index

　　

　　keyExtractor 此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标。

　　

　　legacyImplementation 设置为true则使用旧的ListView的实现。

　　

　　numColumns 多列布局只能在非水平模式下使用，即必须是horizontal={false} 。此时组件内元素会从左到右从上到下按Z字形排列，类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。

　　

　　onEndReached 当列表被滚动到距离内容最底部不足onEndReachedThreshold 的距离时调用。

　　

　　onEndReachedThreshold 决定当距离内容最底部还有多远时触发onEndReached 回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。

　　

　　onRefresh 如果设置了此选项，则会在列表头部添加一个标准的RefreshControl 控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing 属性。

　　

　　onViewableItemsChanged 在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityconfig属性

　　

　　refreshing 在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号。

　　

　　renderItem 根据行数据data，渲染每一行的组件。这个参照下面的demo

　　

　　viewabilityConfig 请参考ViewabilityHelper 的源码来了解具体的配置。

　　

　　方法

　　

　　scrollToEnd 滚动到底部。如果不设置getItemLayout 属性的话，可能会比较卡。

　　

　　scrollToIndex 滚动到指定index的item 如果不设置getItemLayout 属性的话，无法跳转到当前可视区域以外的位置。

　　

　　scrollToItem 滚动到指定item，如果不设置getItemLayout 属性的话，可能会比较卡。

　　

　　scrollToOffset 滚动指定距离

　　

　　进阶使用

　　

　　在这里我准备了一份代码示例：

　　

　　const {width,height}=Dimensions.get('window')

　　

　　export default class Main extends Component{

　　

　　// 构造

　　

　　constructor(props) {

　　

　　super(props);

　　

　　}

　　

　　refreshing(){

　　

　　let timer =  setTimeout(()=>{

　　

　　clearTimeout(timer)

　　

　　alert('刷新成功')

　　

　　},1500)

　　

　　}

　　

　　_onload(www.ysgj1688.com){

　　

　　let timer =  setTimeout(()=>{

　　

　　clearTimeout(timer)

　　

　　alert('加载成功')

　　

　　},1500)

　　

　　}

　　

　　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.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}

　　

　　onRefresh={this.refreshing}

　　

　　refreshing={false}

　　

　　onEndReachedThreshold={0}

　　

　　onEndReached={

　　

　　this._onload

　　

　　}

　　

　　numColumns ={3}

　　

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

　　

　　//horizontal={true}

　　

　　getItemLayout={(data,index)=>(

　　

　　{length: 100, offset: (100+2) * index, index}

　　

　　)}

　　

　　data={data}>

　　

　　</FlatList>

　　

　　</View>

　　

　　</View>

　　

　　import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'; // 局部注册

　　

　　import BmGeolocation from www.sanxinyuLevip.com'vue-baidu-map/components/controls/Geolocation.vue'; //定位

　　

　　import BmMapType from  www.meiwanyule.cn 'vue-baidu-map/components/controls/MapType.vue'; //地图类型

　　

　　import BmCityList from www.yongshi123.cn'vue-baidu-map/components/controls/CityList.vue'; //城市列表

　　

　　import BmMarker from www.baishenyvip.com 'vue-baidu-map/components/overlays/Marker.vue'; //标记 点

　　

　　export default www.michenggw.com{

　　

　　_renderItem = (item) => {

　　

　　var txt = '第' + item.index + '个' + ' title=' + item.item.title;

　　

　　var bgColor = item.index % 2 == 0 ? 'red' : 'blue';

　　

　　return <Text style={[{flex:1,height:100,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'}}/>;

　　

　　}

　　

　　}

　　

　　const styles=StyleSheet.create(www.dasheng178.com{

　　

　　container:{

　　

　　},

　　

　　content:{

　　

　　width:width,

　　

　　height:height,

　　

　　backgroundColor:'yellow',

　　

　　justifyContent:www.365soke.com'center',

　　

　　alignItems:'center'

　　

　　},

　　

　　cell:{

　　

　　height:100,

　　

　　backgroundColor:'purple',

　　

　　alignItems:'center',

　　

　　justifyContent:'center',

　　

　　borderBottomColor:'#ececec',

　　

　　borderBottomWidth:1

　　

　　},

　　

　　txt: {

　　

　　textAlign: www.yongshiyule178.com'center',

　　

　　textAlignVertical: www.xintiandiyule1.com'center',

　　

　　color: 'white',

　　

　　fontSize: 30,

　　

　　}

　　

　　})

　　

　　运行效果如下： img

　　

　　总结

　　

　　总体来说Flatlist还是比ListView用起来方便的，而且提供的功能更多。

接了别人写得代码，ios 端有个flatlist 当数据不满一屏时，不能下拉刷新，从排查布局，到请教别人,花费了好久时间。

终于有大神帮忙解决了问题，主要原因是加了flatlist 的这个属性

alwaysBounceVertical={false}

不知道，当时写代码的人的初衷是什么，但总之代码处处有惊喜！

官网给的解释：

alwaysBounceVertical

当此属性为 true 时，垂直方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。当horizontal={true}时默认值为 false，否则为 true。

类型
			
必填
			
平台
		
bool
			
否
			
iOS
		

FlatList

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

export default class App extends Component {
    _flatList;

    _header = ()=>{
        return(
            <Text style={styles.headerStyle}>
                头部
            </Text>
        );
    }

    _footer = ()=>{
        return(
            <Text style={styles.headerStyle}>
                尾部
            </Text>
        );
    }

    _itemSeparator(){
        return(
            <View style={{height:1, backgroundColor:'orange'}}></View>
        );
    }

    _renderItem = (item)=>{
        var text = 'key = ' + item.index + 'title = ' + item.item.title;
        return(
            <View style={{height:100, backgroundColor:'red', justifyContent:'center', alignItems:'center'}}>
                <Text>
                    {text}
                </Text>
            </View>
        );
    }

    render() {
        var data = [];
        for (var i = 0; i < 100; i++){
            data.push(
                {key:i,title:i}
            );
        } 
        
        return (
            <View style={styles.container}>
                <Button
                    title='返回指定位置'
                    onPress={()=>{
                    this._flatList.scrollToEnd()
                }}>
                </Button>

                <FlatList
                    ref={(flatList)=>{this._flatList = flatList}}
                    ListHeaderComponent={this._header}
                    ListFooterComponent={this._footer}
                    ItemSeparatorComponent={()=>this._itemSeparator()}
                    renderItem={this._renderItem}
                    data={data}
                >

                </FlatList>
            </View>
        );

    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'gray',
    },
    headerStyle:{
        textAlign:'center',
        // textAlignVertical:'center',
        fontSize:30,
        color:'white',
    },
});

注意：
1. FlatList的必选协议: 
   1. data={}数据源,是数组里嵌套了字典结构。
   2. renderItem={item,index}数据源回调,item:是对应的数组中的一个该项元素，index：是当前的item的索引。
2. 可选协议  
   1. ListHeaderComponent={}头部控件回调
   2. ListFooterComponent={}脚部控件回调
   3. ItemSeparatorComponent={}分割线回调
3. 回调
   1. 以上回调和普通函数回调不相同，需要注意。