最近在写RN项目中需要实现一个带筛选功能的搜房列表,写完这个功能后发现有一些新的心得,在这里写下来跟大家分享一下。
开始之前,我们先看一下最终实现的效果
文章中的代码都来自代码传送门–NNHybrid。主要集中在SearchHousePage.js
、searchHouse.js
和FHTFilterMenuManager.m
。我会通过列表下拉刷新和上拉加载更多的实现、使用Redux以及RN与原生iOS通信这三方面向大家分享这个页面的开发过程。
首先我们来看一下列表是如何实现的。
如何实现下拉刷新和上拉加载更多
在移动端的开发过程中,写一个带下拉刷新和上拉加载更多的列表可以说是一个常态。在React Native中我们一般使用FlatList或SectionList组件实现,这里我使用FlatList来实现这个列表。
我们知道FlatList默认是有下拉刷新功能的,但是自定义效果比较差,而且效果也不如iOS中MJRefresh的效果好,另外FlatList没有加载更多的功能,所以需要我们自己去实现下拉刷新和上拉加载更多。在下拉刷新的时候如果出现空数据或者报错,我们可能需要分别实现对应的占位视图。
基于上述要求,我们可以通过改变state中的headerRefreshState的值对头部刷新控件样式进行更改,而通过props中的footerRefreshState的值对底部刷新控件样式进行更改。
根据上面所述,我们可以用下面这张图来描述列表在不同刷新状态时候对应的样式。
主要代码
RefreshConst
1 | // 默认刷新控件高度 |
RefreshFlatList
1 | import React, { Component } from 'react'; |
PlaceholderView
PlaceholderView.js
用来实现占位图
1 | export default class PlaceholderView extends Component { |
最终实现
在SearchHousePage.js
中实现列表,主要代码如下:
1 | footerRefreshComponent(footerRefreshState, data) { |
各状态对应的效果图
NoMoreData
列表无数据时的Failure
列表有数据时的Failure
EmptyData
综上
到这里,我们已经完成了一个带下拉刷新和上拉加载更多的列表,并且实现了空数据占位。接着就是介绍数据的加载,在React Native实现一个带筛选功能的搜房列表(2)中我会介绍如何使用redux进行数据的加载。另外上面提供的代码均是从项目当中截取的,如果需要查看完整代码的话,在代码传送门–NNHybrid中。
相关代码路径:
1 | RefreshFlatList: /NNHybridRN/components/refresh/RefreshFlatList.js |