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     }    />   );  } }