ReactNative 之FlatList使用及踩坑封装总结

日期：2020-05-11 栏目：程序人生浏览：次

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

转载注明出处：http://www.heiqu.com/514.html

ReactNative 之FlatList使用及踩坑封装总结

相关推荐