RN如何实现一个ExpandableList(可展开列表)组件

前言

今天想跟大家分享一个用RN实现的组件 - ExpandableList。恩&＃xff0c;没什么特殊的原因&＃xff0c;只是因为最近有一个需求要用到这东西&＃xff0c;而且RN没有提供现成的组件&＃xff0c;所以很(不)开(得)心(已)地做了一个。下面两张图是用这个组件实现的两个demo&＃xff0c;github地址在这儿&＃xff0c;有兴趣的可以戳https://github.com/SmallStoneSK/react-native-expandable-list瞅一眼&＃xff0c;喜欢的还可以star一个~

如果有哪说的不对的&＃xff0c;欢迎指出哦~

讨论与分析

好了&＃xff0c;废话不多说&＃xff0c;直接进入正题。首先&＃xff0c;我们先确定下要解决的问题&＃xff1a;

1. 组件结构怎么表示&＃xff1f;
2. 展开/收起动画怎么过渡&＃xff1f;
3. API设计成怎样让组件的实用性更强&＃xff1f;

1. 第一个问题

我们先将ExpandableList这个组件拆解一下&＃xff0c;看看都有哪些部分。看下面的这张图&＃xff0c;我们可以把一个ExpandableList看成是由一个个Group组成的&＃xff0c;而每个Group又了包含GroupHeader和GroupBody&＃xff0c;而其实GroupBody本身又是一个List。

分析完结构之后&＃xff0c;思路瞬间就有了&＃xff0c;这个结构用两个循环就可以表示出来了&＃xff0c;就像下面这样&＃xff1a;

{data.map((groupItem, groupIndex) &＃61;> {return ({renderGroupHeader.bind(this, groupItem. groupHeaderData, groupIndex)}{groupItem.groupListData.map((listItemData, listItemIndex) &＃61;> {return ({renderListItem.bind(this, listItemData, groupIndex, listItemIndex)});})});})}


2. 第二个问题

没错&＃xff0c;结构是很轻易地表示出来了。但是问题来了&＃xff0c;展开收起的这个动画过程应该怎么现实呢&＃xff1f;我们都知道在RN中如果要实现动画&＃xff0c;那Animated绝对是把好手。借助Animated&＃xff0c;我们可以很精准地控制动画的实现&＃xff0c;当然也包括这里的展开/收起动画。但是在这里&＃xff0c;就不劳烦这尊大佛啦~因为借助LayoutAnimation&＃xff0c;我们可以实现地更优雅&＃xff08;其实就是偷懒&＃xff09;。

在讲LayoutAnimation之前&＃xff0c;不妨先回顾下web中的transition。为啥捏&＃xff1f;因为个人觉得这两者就是很像&＃xff0c;只要给定了初始状态和终止状态&＃xff0c;那这中间的动画切换过程就不需要我们关心了。再来看这个展开/收起的动画&＃xff0c;是不是很符合这个条件。每个group都有两种状态&＃xff0c;即open和closed。因此&＃xff0c;当closed时&＃xff0c;我们设置groupBody的height为0就可以了。

3. 第三个问题

为什么要考虑API的设计呢&＃xff1f;因为这个组件实在太简单&＃xff0c;感觉都编不下去了&＃xff0c;不找个主题怎么凑字数。。。当然&＃xff0c;这是玩笑话。实际上&＃xff0c;在封装这个组件的时候&＃xff0c;还是遇到了一些调用上的问题&＃xff0c;就比如&＃xff1a;

1. 如何关联起TouchableXXX和展开/收起动画&＃xff1a; 毫无疑问&＃xff0c;展开/收起动画是这个组件本身就应该包掉的逻辑。但是&＃xff0c;不同需求的groupHeader样式都是各式各样的&＃xff0c;就比如最一开始的两个demo图。很明显&＃xff0c;两个点击区域都不同&＃xff0c;但是点击之后都要有展开/收起的功能&＃xff0c;动画的同时还有不同的点击功能。或许你会想到传一个回调函数给ExpandableList&＃xff0c;在点击GroupHeader的时候调用这个回调就好了。But&＃xff0c;再仔细想想&＃xff0c;别忘了TouchableXXX这一部分可是在自定义样式中的&＃xff0c;所以ExpandableList组件中是不会包掉touch操作的&＃xff0c;那传进来的回调到哪里去调用。。。
2. 如何提高组件的性能&＃xff1a; 上面虽然用了一个很粗浅的方法大概模拟了下组件的组成&＃xff0c;但是很明显&＃xff0c;用到的全是View。而既然是ExpandableList&＃xff0c;怎么也得对得起List这个词吧。。。这可是个列表&＃xff0c;要是数据多了&＃xff0c;渲染性能肯定不好。因此&＃xff0c;我们或许可以用ListView甚至FlatList来实现。不过也别忘了低版本的RN还不支持FlatList&＃xff0c;所以需要做一个降级处理。既然这里有那么多种实现方式&＃xff0c;那为何不暴露一个选项让用户选择ExpandableList组件到底是用哪种模式来构成。
3. 展开/关闭的状态维持&＃xff1a; 因为ExpandableList组件包掉了展开/收起动画这些操作&＃xff0c;那组件内部势必要保存所有group的展开/收起状态。而调用ExpandableList的组件应不应该也保存一份这些展开/收起状态呢&＃xff1f;就拿上面的仿QQ的那个demo为例&＃xff0c;注意每个分组在展开和收起的时候&＃xff0c;最前面的箭头样式是不一样的。所以问题就来了&＃xff0c;groupStatus是存储在组件内部的数据&＃xff0c;而在renderGroupHeader的时候&＃xff0c;FriendList难道也要存储一份所有group的展开/收起状态&＃xff1f;很显然&＃xff0c;这种信息都是冗余的。而且一旦有两份数据&＃xff0c;如何确保和组件内部的状态数组保持同步。这些工作无疑都不应该成为使用者的负担。
4. 数据传递 这个比较简单一点&＃xff0c;就是用户怎么知道自己点击的是第几个group&＃xff0c;以及是当前group中的第几个listItem。

这些问题在接下来的代码中都会有答案&＃xff0c;所以请继续往下看吧。

实现

1. 先定暴露给调用方的API

我们可以先敲定一下基础的暴露出来的接口方法&＃xff1a;

所以&＃xff0c;我们可以这么调用

2. 搭骨架

import React, {Component} from &＃39;react&＃39;;
import {View,ListView,ScrollView,FlatList,LayoutAnimation
} from &＃39;react-native&＃39;;export class ExpandableList extends Component {constructor(props) {super(props);this._supportFlatList &＃61; this. _supportFlatList.bind(this);this._renderUsingView &＃61; this._renderUsingView.bind(this);this._renderUsingFlatList &＃61; this._renderUsingFlatList.bind(this);this._renderUsingListView &＃61; this._renderUsingListView.bind(this);}_supportFlatList() {return !!FlatList;}_renderUsingFlatList() {// ...}_renderUsingView() {// ...}_renderUsingListView() {// ...}render() {const strategy &＃61; {&＃39;View&＃39;: this._renderUsingView,&＃39;ListView&＃39;: this._renderUsingListView,&＃39;FlatList&＃39;: this._supportFlatList() ? this._renderUsingFlatList : this._renderUsingListView};let {implementedBy} &＃61; this.props;if(!strategy[implementedBy]) {implementedBy &＃61; &＃39;FlatList&＃39;;}return strategy[implementedBy]();}
}


根据上面代码中的render方法可以看到&＃xff0c;最终使用哪种方式渲染我们的ExpandableList&＃xff0c;完全取决于implementedBy是什么&＃xff0c;也就是把这个决定权交给调用的人。当implementedBy的值没有设置&＃xff0c;或者是一个不合法的值的时候&＃xff0c;我们默认就使用FlatList来实现。而且&＃xff0c;还对FlatList进行了降级处理&＃xff0c;如果不支持FlatList的话&＃xff0c;就用ListView代替实现。

3. 填坑

坑一&＃xff1a;维护所有group的open/closed状态

因为每一个group都有自身的open/closed状态&＃xff0c;所以倒不如在state中维护一个状态数组。而且啊&＃xff0c;考虑到假如有这么一个场景&＃xff1a;列表在刚渲染出来的时候&＃xff0c;有几个group是open的&＃xff0c;有几个group是closed的。所以&＃xff0c;我们可以这么设计&＃xff1a;

export class ExpandableList extends Component {constructor(props) {super(props);this.state &＃61; {groupStatus: this._getInitialGroupStatus()};}_getInitialGroupStatus() {const {initialOpenGroups &＃61; [], data &＃61; []} &＃61; this.props;// true代表open, false代表closedreturn new Array(data.length).fill(false).map((item, index) &＃61;> {return initialOpenGroups.indexOf(index) !&＃61;&＃61; -1;});}
}

坑二&＃xff1a;3种不同的render实现

因为不管用哪种方式去渲染&＃xff0c;每个group的结构是相同的&＃xff0c;所以倒不如封装一个_renderGroupItem方法&＃xff0c;让这3种不同的render方法调用。也就是这样&＃xff1a;

export class ExpandableList extends Component {toggleOpenStatus(index, closeOthers) {// 支持在切换自身状态的时候&＃xff0c;同时把其他的group都关闭const newGroupStatus &＃61; this.state.groupStatus.map((status, idx) &＃61;> {return idx !&＃61;&＃61; index ? (closeOthers ? false : status) : !status;});this.setState({groupStatus: newGroupStatus});}_renderGroupItem(groupItem, groupId) {const status &＃61; this.state.groupStatus[groupId];const {groupHeaderData &＃61; [], groupListData &＃61; []} &＃61; groupItem;const {renderGroupHeader, renderGroupListItem, groupStyle, groupSpacing} &＃61; this.props;const groupHeader &＃61; renderGroupHeader && renderGroupHeader({status,groupId,item: groupHeaderData,toggleStatus: this.toggleGroupStatus.bind(this, groupId)});const groupBody &＃61; groupListData.length > 0 && ({groupListData.map((listItem, index) &＃61;> ({renderGroupListItem && renderGroupListItem({item: listItem,rowId: index,groupId})}))});return ({groupHeader}{groupBody});}_renderFlatListItem({item, index}) {return this._renderGroupItem(item, index);}_renderListViewItem(rowData, groupId, rowId) {return this._renderGroupItem(rowData, parseInt(rowId));}_renderUsingFlatList() {const {data&＃61;[], style} &＃61; this.props;return ( index}renderItem&＃61;{this._renderFlatListItem}/>);}_renderUsingView() {const {data &＃61; [], style} &＃61; this.props;return ({data.map((item, groupId) &＃61;> {return this._renderGroupItem(item, groupId);})});}_renderUsingListView() {const {data &＃61; [], style} &＃61; this.props;return ( r1 !&＃61;&＃61; r2}).cloneWithRows(data)}/>);}
}

稍微分析下上面的代码&＃xff1a;

1. _renderUsingView, _renderUsingListView, _renderUsingFlatList三个函数分别代表三种不同的实现方式&＃xff0c;但是最终都调用到了_renderGroupItem。

2. _renderGroupItem分两个部分渲染&＃xff1a;header和body。但是需要注意的是&＃xff0c;在执行renderGroupHeader方法的时候&＃xff0c;注意其中的参数。还记得文章一开始讨论的几个问题吗&＃xff1f;status, groupId, item, toggleStatus这四个参数就能解决之前的疑惑了。

   • status&＃xff1a;当前group的展开/收起状态。通过它&＃xff0c;我们在实现自定义GroupHeader的时候就可以知道目前的状态是什么了&＃xff0c;从而控制不同状态下的样式展示。
   • groupId&＃xff1a;当前的group索引。
   • item&＃xff1a;当前的groupHeaderData。
   • toggleStatus&＃xff1a;这是一个方法&＃xff0c;调用它可以控制当前group的展开/收起状态。之前讨论过touchableXXX的问题&＃xff0c;最终可以通过它来折中实现。即调用方在使用ExpandableList组件的时候&＃xff0c;不是要传一个renderGroupHeader属性吗&＃xff0c;在用户实现自定义的renderGroupHeader的时候&＃xff0c;我们把toggleStatus方法作为回调传回给renderGroupHeader。这样一来&＃xff0c;作为组件内部就不需要关心调用方的touchableXXX是怎么样的&＃xff0c;反正我已经把这个开关的权限交给你&＃xff0c;你想怎么调用就怎么调用。
3. 小扩展&＃xff1a;对于toggleOpenStatus&＃xff0c;我们还加了一个closeOthers的可选项。支持用户在展开某一个group的同时关闭其他的group&＃xff0c;具体实现看代码就好了&＃xff0c;非常简单。

坑三&＃xff1a;动画实现

前面就提到过&＃xff0c;用LayoutAnimation来实现我们的动画将非常简单。由于在之前的代码中&＃xff0c;我们已经通过status来控制整个groupBody的height&＃xff0c;所以我们只要这样就可以&＃xff1a;


export class ExpandableList extends Component {componentWillUpdate() {LayoutAnimation.easeInEaseOut(); // 也可以用LayoutAnimation.spring()}}


是的&＃xff0c;就只需要这一行代码&＃xff0c;列表在展开/收起的时候就不会干巴巴的了。LayoutAnimation会自动计算height&＃xff0c;并提供一个流畅的动画。

写在最后

说实话&＃xff0c;其实代码很简单&＃xff0c;只是用现成的组件进行一个封装&＃xff0c;但是要把方方面面的东西都考虑全了&＃xff0c;还真是不容易。所以上面的代码肯定还有可以优化的地方&＃xff0c;以及扩展更多的功能。

最后还是照惯例再贴个github的地址吧&＃xff1a;https://github.com/SmallStoneSK/react-native-expandable-list