ReactNative 之FlatList踩坑封装总结

在RN中FlatList是一个高性能的列表组件，它是ListView组件的升级版，性能方面有了很大的提升，当然也就建议大家在实现列表功能时使用FlatList,尽量不要使用ListView，更不要使用ScrollView。既然说到FlatList，那就先温习一下它支持的功能。

  • 完全跨平台。

  • 支持水平布局模式。

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

  • 支持单独的头部组件。

  • 支持单独的尾部组件。

  • 支持自定义行间分隔线。

  • 支持下拉刷新。

  • 支持上拉加载。

  • 支持跳转到指定行（ScrollToIndex）。

今天的这篇文章不具体介绍如何使用，如果想看如何使用，可以参考我GitHub https://github.com/xiehui999/helloReactNative的一些示例。今天的这篇文章主要介绍我使用过程中感觉比较大的坑，并对FlatList进行的二次封装。
接下来，我们先来一个简单的例子。我们文章也有这个例子开始探讨。

        <FlatList
            data={this.state.dataList} extraData={this.state}
            refreshing={this.state.isRefreshing}
            onRefresh={() => this._onRefresh()}
            keyExtractor={(item, index) => item.id}
            ItemSeparatorComponent={() => <View style={{
                height: 1,
                backgroundColor: '#D6D6D6'
            }}/>}
            renderItem={this._renderItem}
            ListEmptyComponent={this.emptyComponent}/>
            
            
    //定义空布局
        emptyComponent = () => {
        return <View style={{
            height: '100%',
            alignItems: 'center',
            justifyContent: 'center',
        }}>
            <Text style={{
                fontSize: 16
            }}>暂无数据下拉刷新</Text>
        </View>
    }

在上面的代码，我们主要看一下ListEmptyComponent，它表示没有数据的时候填充的布局，一般情况我们会在中间显示显示一个提示信息，为了介绍方便就简单展示一个暂无数据下拉刷新。上面代码看起来是暂无数据居中显示，但是运行后，你傻眼了，暂无数据在最上面中间显示，此时高度100%并没有产生效果。当然你尝试使用flex:1，将View的高视图填充剩余全屏，不过依然没有效果。

那为什么设置了没有效果呢，既然好奇，我们就来去源码看一下究竟。源码路径在react-native-->Libraries-->Lists。列表的组件都该目录下。我们先去FlatList文件搜索关键词ListEmptyComponent，发现该组件并没有被使用，那就继续去render


  render() {
    if (this.props.legacyImplementation) {
      return (
        <MetroListView
          {...this.props}
          items={this.props.data}
          ref={this._captureRef}
        />
      );
    } else {
      return (
        <VirtualizedList
          {...this.props}
          renderItem={this._renderItem}
          getItem={this._getItem}
          getItemCount={this._getItemCount}
          keyExtractor={this._keyExtractor}
          ref={this._captureRef}
          onViewableItemsChanged={
            this.props.onViewableItemsChanged && this._onViewableItemsChanged
          }
        />
      );
    }
  }

MetroListView（内部实行是ScrollView）是旧的ListView实现方式，VirtualizedList是新的性能比较好的实现。我们去该文件

    //省略部分代码
    const itemCount = this.props.getItemCount(data);
    if (itemCount > 0) {
        ....省略部分代码
    } else if (ListEmptyComponent) {
      const element = React.isValidElement(ListEmptyComponent)
        ? ListEmptyComponent // $FlowFixMe
        : <ListEmptyComponent />;
      cells.push(
        /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
         * comment suppresses an error when upgrading Flow's support for React.
         * To see the error delete this comment and run Flow. */
        <View
          key="$empty"
          onLayout={this._onLayoutEmpty}
          style={inversionStyle}>
          {element}
        </View>,
      );
    }

再此处看到我们定义的ListEmptyComponent外面包了一层view,该view加了样式inversionStyle。

const inversionStyle = this.props.inverted
      ? this.props.horizontal
        ? styles.horizontallyInverted
        : styles.verticallyInverted
      : null;
      
样式：
verticallyInverted: {
    transform: [{scaleY: -1}],
  },
 horizontallyInverted: {
    transform: [{scaleX: -1}],
  },

上面的样式就是添加了一个动画，并没有设置高度，所以我们在ListEmptyComponent使用height:'100%'或者flex:1都没有效果，都没有撑起高度。

为了实现我们想要的效果，我们需要将height设置为具体的值。那么该值设置多大呢？你如果给FlatList设置一个样式，背景属性设置一个颜色，发现FlatList是默认有占满剩余屏的高度的（flex：1）。那么我们可以将ListEmptyComponent中view的高度设置为FlatList的高度，要获取FlatList的高度，我们可以通过onLayout获取。
代码调整：

//创建变量
fHeight = 0;

        <FlatList
            data={this.state.dataList} extraData={this.state}
            refreshing={this.state.isRefreshing}
            onRefresh={() => this._onRefresh()}
            keyExtractor={(item, index) => item.id}
            ItemSeparatorComponent={() => <View style={{
                height: 1,
                backgroundColor: '#D6D6D6'
            }}/>}
            renderItem={this._renderItem}
            onLayout={e => this.fHeight = e.nativeEvent.layout.height}
            ListEmptyComponent={this.emptyComponent}/>
            
            
    //定义空布局
        emptyComponent = () => {
        return <View style={{
            height: this.fHeight,
            alignItems: 'center',
            justifyContent: 'center',
        }}>
            <Text style={{
                fontSize: 16
            }}>暂无数据</Text>
        </View>
    }

通过上面的调整发现在Android上运行时达到我们想要的效果了，但是在iOS上，不可控，偶尔居中显示，偶尔又显示到最上面。原因就是在iOS上onLayout调用的时机与Android略微差别(iOS会出现emptyComponent渲染时onLayout还没有回调，此时fHeight还没有值)。

所以为了将变化后的值作用到emptyComponent，我们将fHeight设置到state中

state={
    fHeight:0
}

onLayout={e => this.setState({fHeight: e.nativeEvent.layout.height})}

这样设置后应该完美了吧，可是....在android上依然能完美实现我们要的效果，在iOS上出现了来回闪屏的的问题。打印log发现值一直是0和测量后的值来回转换。在此处我们仅仅需要是测量的值，所以我们修改onLayout

                      onLayout={e => {
                          let height = e.nativeEvent.layout.height;
                          if (this.state.fHeight < height) {
                              this.setState({fHeight: height})
                          }
                      }}

经过处理后，在ios上终于完美的实现我们要的效果了。

除了上面的坑之外，个人感觉还有一个坑就是onEndReached，如果我们实现下拉加载功能，都会用到这个属性，提到它我们当然就要提到onEndReachedThreshold，在FlatList中onEndReachedThreshold是一个number类型，是一个他表示具体底部还有多远时触发onEndReached，需要注意的是FlatList和ListView中的onEndReachedThreshold表示的含义是不同的，在ListView中onEndReachedThreshold表示具体底部还有多少像素时触发onEndReached，默认值是1000。而FlatList中表示的是一个倍数（也称比值，不是像素），默认值是2。
那么按照常规我们看下面实现

            <FlatList
                data={this.state.dataList}
                extraData={this.state}
                refreshing={this.state.isRefreshing}
                onRefresh={() => this._onRefresh()}
                ItemSeparatorComponent={() => <View style={{
                    height: 1,
                    backgroundColor: '#D6D6D6'
                }}/>}
                renderItem={this._renderItem}
                ListEmptyComponent={this.emptyComponent}
                onEndReached={() => this._onEndReached()}
                onEndReachedThreshold={0.1}/>

然后我们在componentDidMount中加入下面代码

    componentDidMount() {
        this._onRefresh()
    }

也就是进入开始加载第一页数据，下拉的执行onEndReached加载更多数据，并更新数据源dataList。看起来是完美的，不过.....运行后你会发现onEndReached一直循环调用（或多次执行），有可能直到所有数据加载完成，原因可能大家也能猜到了，因为_onRefresh加载数据需要时间，在数据请求到之前render方法执行，由于此时没有数据，onEndReached方法执行一次，那么此时相当于加载了两次数据。

至于onEndReached执行多少次就需要onEndReachedThreshold的值来定了，所以我们一定要慎重设置onEndReachedThreshold，如果你要是理解成了设置像素，设置成了一个比较大的数，比如100，那完蛋了....个人感觉设置0.1是比较好的值。

通过上面的分析，个人感觉有必要对FlatList进行一次二次封装了，根据自己的需求我进行了一次二次封装

import React, {
    Component,
} from 'react'
import {
    FlatList,
    View,
    StyleSheet,
    ActivityIndicator,
    Text
} from 'react-native'
import PropTypes from 'prop-types';

export const FlatListState = {
    IDLE: 0,
    LoadMore: 1,
    Refreshing: 2
};
export default class Com extends Component {
    static propTypes = {
        refreshing: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
    };
    state = {
        listHeight: 0,
    }

    render() {
        var {ListEmptyComponent,ItemSeparatorComponent} = this.props;
        var refreshing = false;
        var emptyContent = null;
        var separatorComponent = null
        if (ListEmptyComponent) {
            emptyContent = React.isValidElement(ListEmptyComponent) ? ListEmptyComponent : <ListEmptyComponent/>
        } else {
            emptyContent = <Text style={styles.emptyText}>暂无数据下拉刷新</Text>;
        }
        if (ItemSeparatorComponent) {
            separatorComponent = React.isValidElement(ItemSeparatorComponent) ? ItemSeparatorComponent :
                <ItemSeparatorComponent/>
        } else {
            separatorComponent = <View style={{height: 1, backgroundColor: '#D6D6D6'}}/>;
        }
        if (typeof this.props.refreshing === "number") {
            if (this.props.refreshing === FlatListState.Refreshing) {
                refreshing = true
            }
        } else if (typeof this.props.refreshing === "boolean") {
            refreshing = this.props.refreshing
        } else if (typeof this.props.refreshing !== "undefined") {
            refreshing = false
        }
        return <FlatList
            {...this.props}
            onLayout={(e) => {
                let height = e.nativeEvent.layout.height;
                if (this.state.listHeight < height) {
                    this.setState({listHeight: height})
                }
            }
            }
            ListFooterComponent={this.renderFooter}
            onRefresh={this.onRefresh}
            onEndReached={this.onEndReached}
            refreshing={refreshing}
            onEndReachedThreshold={this.props.onEndReachedThreshold || 0.1}
            ItemSeparatorComponent={()=>separatorComponent}
            keyExtractor={(item, index) => index}
            ListEmptyComponent={() => <View
                style={{
                    height: this.state.listHeight,
                    width: '100%',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>{emptyContent}</View>}
        />
    }

    onRefresh = () => {
        console.log("FlatList:onRefresh");
        if ((typeof  this.props.refreshing === "boolean" && !this.props.refreshing) ||
            typeof  this.props.refreshing === "number" && this.props.refreshing !== FlatListState.LoadMore &&
            this.props.refreshing !== FlatListState.Refreshing
        ) {
            this.props.onRefresh && this.props.onRefresh()
        }

    };
    onEndReached = () => {
        console.log("FlatList:onEndReached");
        if (typeof  this.props.refreshing === "boolean" || this.props.data.length == 0) {
            return
        }
        if (!this.props.pageSize) {
            console.warn("pageSize must be set");
            return
        }
        if (this.props.data.length % this.props.pageSize !== 0) {
            return
        }
        if (this.props.refreshing === FlatListState.IDLE) {
            this.props.onEndReached && this.props.onEndReached()
        }
    };


    renderFooter = () => {
        let footer = null;
        if (typeof this.props.refreshing !== "boolean" && this.props.refreshing === FlatListState.LoadMore) {
            footer = (
                <View style={styles.footerStyle}>
                    <ActivityIndicator size="small" color="#888888"/>
                    <Text style={styles.footerText}>数据加载中…</Text>
                </View>
            )
        }
        return footer;
    }
}
const styles = StyleSheet.create({
    footerStyle: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
        height: 44,
    },
    footerText: {
        fontSize: 14,
        color: '#555555',
        marginLeft: 7
    },
    emptyText: {
        fontSize: 17,
        color: '#666666'
    }
})

propTypes中我们使用了oneOfType对refreshing类型进行限定，如果ListEmptyComponent有定义，就是使用自定义分View,同理ItemSeparatorComponent也可以自定义。

在下拉加载数据时定义了一个ListFooterComponent，用于提示用户正在加载数据，refreshing属性如果是boolean的话，表示没有下拉加载功能，如果是number类型，pageSize必须传，数据源长度与pageSize取余是否等于0,判断是否有更多数据（最后一次请求的数据等于pageSize时才有更多数据，小于就不用回调onEndReached）。当然上面的代码也很简单，相信很容易看懂，其它就不多介绍了。有问题欢迎指出。源码地址

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,049评论 25赞 707
  • 百度图片布局
    简介：百度图片相信大家都不会陌生，但是里面的布局实现效果确很麻烦。它是通过JS实现的，过程也相当麻烦。不要捉急，我...
    小码哥教育520it阅读 1,261评论 0赞 0
  • 南
    哈哈哈
    煮字人阅读 213评论 0赞 0
  • 侃价
    昨天在网上看到这么一句话——当你觉得什么都贵，在别人眼里你就廉价了。真是这样吗？今天我们就来侃侃“价”吧。 价，马...
    听万壑鸟鸣阅读 542评论 0赞 1