在RN中FlatList是一個高性能的列表組件，它是ListView組件的升級版，性能方面有了很大的提升，當然也就建議大家在實現(xiàn)列表功能時使用FlatList,盡量不要使用ListView，更不要使用ScrollView。既然說到FlatList，那就先溫習一下它支持的功能。

完全跨平臺。 支持水平布局模式。 行組件顯示或隱藏時可配置回調(diào)事件。 支持單獨的頭部組件。 支持單獨的尾部組件。 支持自定義行間分隔線。 支持下拉刷新。 支持上拉加載。 支持跳轉到指定行（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      }}>暫無數(shù)據(jù)下拉刷新</Text>    </View>  }

在上面的代碼，我們主要看一下ListEmptyComponent，它表示沒有數(shù)據(jù)的時候填充的布局，一般情況我們會在中間顯示顯示一個提示信息，為了介紹方便就簡單展示一個暫無數(shù)據(jù)下拉刷新。上面代碼看起來是暫無數(shù)據(jù)居中顯示，但是運行后，你傻眼了，暫無數(shù)據(jù)在最上面中間顯示，此時高度100%并沒有產(chǎn)生效果。當然你嘗試使用flex:1，將View的高視圖填充剩余全屏，不過依然沒有效果。

那為什么設置了沒有效果呢，既然好奇，我們就來去源碼看一下究竟。源碼路徑在react-native-->Libraries-->Lists。列表的組件都該目錄下。我們先去FlatList文件搜索關鍵詞ListEmptyComponent，發(fā)現(xiàn)該組件并沒有被使用，那就繼續(xù)去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     }    />   );  } }