react native 实现类似QQ的侧滑列表效果
如果列表行数据需要更多的操作,使用侧滑菜单是移动端比较常见的方式,也符合用户的操作习惯,对app的接受度自然会相对提高点。最近得空就把原来的react-native项目升级了侧滑操作,轻轻松松支持android和ios双平台,效果如下。
选择组件说来惭愧,使用了react native快一年,还是不懂怎么使用experimental的组件。而rn的侧滑列表组件还处于实验性阶段,文档几乎是没有的,网上搜了下也没啥资料,好在还有源码和注释。首先引入实验性组件,google下才知道是直接引用的方式,把它当作一个已经npm install的第三方组件来使用就行。类似这样: import SwipeableListView from 'SwipeableListView'; 虽然还是有其它react native侧滑组件可以选择,但想着尽量用rn提供的,就没去细看了。因为react native提供的侧滑列表注释里已经写明,目标是集成到当前的ListView组件,合二为一。因而对于现有的普通列表界面,要替换成侧滑列表,改动相对小些。 开始动手需要改动的几个地方如下:
import SwipeableListView from 'SwipeableListView'; import SwipeableQuickActions from 'SwipeableQuickActions'; import SwipeableQuickActionButton from 'SwipeableQuickActionButton';
<SwipeableListView maxSwipeDistance={120} renderQuickActions={(rowData,sectionId,rowId) => this._renderActions(rowData,sectionId)} enableEmptySections={true} initialListSize={10} pageSize={10} ...
dataSource: new SwipeableListViewDataSource({ getSectionHeaderData: (dataBlob,sectionId) => dataBlob[sectionId],getRowData: (dataBlob,rowId) => dataBlob[sectionId].getRow(rowId),rowHasChanged: (row1,row2) => row1 !== row2,sectionHeaderHasChanged: (s1,s2) => s1 !== s2 })
_renderActions(rowData,sectionId) { return ( <SwipeableQuickActions style={styles.rowActions}> { sectionId !== 2 && <SwipeableQuickActionButton imageSource={{}} text={"更多"} onPress={() => this._moreActions(rowData,sectionId)} style={styles.rowAction} textStyle={styles.rowText}/> } <SwipeableQuickActionButton imageSource={{}} text={"删除"} onPress={() => this._delete(rowData)} style={styles.rowActionDestructive} textStyle={styles.rowText}/> </SwipeableQuickActions> ); } 这样大体上就差不多,细节的地方靠填坑。 踩坑rn已经坑很多了,这种实验性的组件就更坑爹,改造过程磕磕碰碰在所难免。稍微记录下,方便后来人。
dataSource: this.state.dataSource.cloneWithRowsAndSections({s1:this.listSource.datas},['s1'],null)
<SwipeableQuickActionButton imageSource={{}} text={"修改"} onPress={() => this._toProject(rowData)} style={styles.rowAction} textStyle={styles.rowText}/>
基于坑爹的以上,调整下设计需求,勉强过关。只显示两个按钮,最多支持两种颜色。 给侧滑视图设置一个背景色,让它也作为左边第一个按钮的颜色。不过这里会出现一点小状况,如果原始行的点击组件是使用TouchableOpacity,一旦行被按下,侧滑按钮就会一览无余的露点了。这时需要把原始行的点击组件替换为其它的,我选了另一个实验性组件TouchableBounce,当然也可以用别的。TouchableBounce被按下去会缩小,还好只是露出该边,勾引用户去侧滑也是好的。 列表行处于侧滑打开的状态,只能有一行,这个还算符合国际标准。不过点击侧滑行,并不会收起侧滑,也没有提供控制接口。不过源码里面可以找到一点蛛丝马迹,通过改变数据源来控制。一般人我不会告诉他是这么操作的 this.state.dataSource.setOpenRowID(null); 完成好在我的要求不高,就着源码,改动起来也算简单,大致能满足要求。
相关代码: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |