《ReactNative系列讲义》进阶篇---05.FlatList（二）

| 版权声明：本文为博主原创文章，未经博主允许不得转载。

一、简介

上篇文章中我们了解到了FlatList组件的基本用法，其实FlatList还有很多丰富的功能，可实现更多更灵活的业务需求，接下来让我们一起来看看吧~

二、基础知识

• 支持单独的头部文件

// Header布局
_renderHeader = () => (
   <View><Text>Header</Text></View>
);

// FlatList属性
ListHeaderComponent={ this._renderHeader }

• 支持单独的尾部文件

// Footer布局
_renderFooter = () => (
   <View><Text>Footer</Text></View>
);

// FlatList属性
ListFooterComponent={ this._renderFooter }

• 支持自定义行间分割线

// 自定义分割线
_renderItemSeparatorComponent = ({highlighted}) => (
   <View style={
   { height:1, backgroundColor:'#000' }}></View>
);

// FlatList属性
ItemSeparatorComponent={ this._renderItemSeparatorComponent }

• 支持下拉刷新

// 上拉加载
_onEndReached = () => {
   let newData = [];

   for (let i = 20; i < 30; i ++) {
       let obj = {
           id: i
           ,title: i + '生了只小柯基'
       };

       newData.push(obj);
   }

   this.dataContainer = this.dataCon