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

最新推荐文章于 2026-02-10 10:28:13 发布

原创

最新推荐文章于 2026-02-10 10:28:13 发布 · 置顶 · 4.4k 阅读

收录于

本文是《ReactNative系列讲义》的进阶篇，详细介绍了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