PHP防QQ列表右划,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组件,合二为一。因而对于现有的普通列表界面,要替换成侧滑列表,改动相对小些。
开始动手
需要改动的几个地方如下:
引入组件,至少引入以下3个组件。
import SwipeableListView from 'SwipeableListView';
import SwipeableQuickActions from 'SwipeableQuickActions';
import SwipeableQuickActionButton from 'SwipeableQuickActionButton';
列表ListView替换为SwipeableListView。在render中直接修改即可,同时需要再提供maxSwipeDistance
和 renderQuickActions两个属性,用于设置侧滑菜单的长度和菜单按钮的渲染方法。
maxSwipeDistance={120}
renderQuickActions={(rowData, sectionId, rowId) => this._renderActions(rowData, sectionId)}
enableEmptySections={true}
initialListSize={10}
pageSize={10}
...
DataSource数据源替换为SwipeableListView.getNewDataSource()。如果需要设置数据源的接口方法,可以先引入SwipeableListViewDataSource,再去重写它的接口。跟原有的差不多,例如:
dataSource: new SwipeableListViewDataSource({
getSectionHeaderData: (dataBlob, sectionId) => dataBlob[sectionId],
getRowData: (dataBlob, sectionId, rowId) => dataBlob[sectionId].getRow(rowId),
rowHasChanged: (row1, row2) => row1 !== row2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
})
实现侧滑视图渲染接口renderQuickActions。返回一个视图。代码差不多这个样子:
_renderActions(rowData, sectionId) {
return (
{ sectionId !== 2 &&
onPress={() => this._moreActions(rowData, sectionId)}
style={styles.rowAction} textStyle={styles.rowText}/>
}
onPress={() => this._delete(rowData)}
style={styles.rowActionDestructive} textStyle={styles.rowText}/>
);
}
这样大体上就差不多,细节的地方靠填坑。
踩坑
rn已经坑很多了,这种实验性的组件就更坑爹,改造过程磕磕碰碰在所难免。稍微记录下,方便后来人。
目前(v0.37)侧滑列表组件的数据源只支持有分组的接口,不提供无分组的简化接口,相当不爽。每次列表重载要克隆的时候只好写个全套。
dataSource: this.state.dataSource.cloneWithRowsAndSections({s1:this.listSource.datas}, ['s1'], null)
侧滑的背景视图与原始行一样高矮胖瘦,如果原始行有margin,就有露底的尴尬,需要稍微调整下原始行的样式。
侧滑按钮的属性,图标是必须提供的!!完全不考虑你需不需要,直接强加于人。绕过的办法是传递一个无法显示图片的对象,比如一对花括号。
onPress={() => this._toProject(rowData)}
style={styles.rowAction} textStyle={styles.rowText}/>
查看了源码,侧滑按钮的间距被强制写死了4dip,无法自定义样式。如果想要实现类似QQ那样的侧滑效果,就不能给每个按钮都设置背景色,需要稍微投机取巧下。
所有行的侧滑按钮总长度都是一致的,如果有的行要两个按钮有的只要一个按钮,也只能捉襟见肘的放任着。暂无解决办法。
添加了三个侧滑按钮,也只显示最后两个,直接无语,莫名其妙的最多只支持两个。
基于坑爹的以上,调整下设计需求,勉强过关。只显示两个按钮,最多支持两种颜色。
给侧滑视图设置一个背景色,让它也作为左边第一个按钮的颜色。不过这里会出现一点小状况,如果原始行的点击组件是使用TouchableOpacity,一旦行被按下,侧滑按钮就会一览无余的露点了。这时需要把原始行的点击组件替换为其它的,我选了另一个实验性组件TouchableBounce,当然也可以用别的。TouchableBounce被按下去会缩小,还好只是露出该边,勾引用户去侧滑也是好的。
列表行处于侧滑打开的状态,只能有一行,这个还算符合国际标准。不过点击侧滑行,并不会收起侧滑,也没有提供控制接口。不过源码里面可以找到一点蛛丝马迹,通过改变数据源来控制。一般人我不会告诉他是这么操作的
this.state.dataSource.setOpenRowID(null);
完成
好在我的要求不高,就着源码,改动起来也算简单,大致能满足要求。
PHP防QQ列表右划,react native 实现类似QQ的侧滑列表效果相关推荐
- [RN] React Native 实现 类似京东 的 沉浸式状态栏和搜索栏
React Native 实现 类似京东 的 沉浸式状态栏和搜索栏 其原理其实就是在要 隐藏 部分的那个View 前面加入 StatusBar 代码! 代码如下: <StatusBaranima ...
- 【稀饭】react native 实战系列教程之首页列表UI实现
首页设计与实现 首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来. 设计 (图丑,莫见怪~) ...
- 3、React Native实战——实现QQ的登录界面
今天记录的是使用React Native实现QQ的登录界面,如果不了解React Native,请看React Native中文网站:http://reactnative.cn/ 下面是一张手机QQ的 ...
- 使用React Native构建类似Tinder的加载器
在这篇文章中我会尝试描述在React Native中构建一个类似Tinder的加载器所遇到的调整我把它分成三个挑战. 挑战1:布局 在上面的截图中,你可以看到头像和它后面的圆,都在屏幕正中间. 感谢 ...
- php仿qq群聊,用Python写一个类似qq群聊的聊天室
用Python写一个聊天室 功能 : 类似qq群聊 1. 进入聊天室需要输入姓名,姓名不能重复 2. 有人进入聊天室会向其他人发送通知 xxx 进入了聊天室 3. 一个人发消息,其他人会收到消息 xx ...
- qq android远程协助,Android 实现远程控制(类似QQ的远程协助)
Android 实现远程控制(类似QQ的远程协助) 发布时间:2019-04-29 10:18, 浏览次数:441 , 标签: Android QQ 这里简单的给个思路和已经实现点击的Demo 明确两 ...
- android 仿qq聊天背景,Android,_安卓实现类似QQ刚换聊天背景的功能,Android - phpStudy...
安卓实现类似QQ刚换聊天背景的功能 自己实现了一下,但对于一些手机一设置背景就出现闪退不知道为什么,大体思路就是获得用户选择的uri,然后如果屏幕分辨率小于图片的分辨率就对图片进行下处理,防止OOM. ...
- React Native入门(七)之列表组件的使用(2)关于FlatList的一切
前言 在上一篇博客中了解了列表组件的相关内容,主要是静态的展示了一个列表数据,了解了ScrollVIew,FlatList和SectionList的基本用法,本篇文章就深入的了解一个常用的一个列表组件 ...
- MFC 列表控件CListCtrl加载类似QQ界面的头像与文字
本文主要讲述使用VS2012 MFC的CListCtrl(列表)控件加载类似于QQ界面的图片与文字数据.主要通过CListCtrl::InsertColumn.InsertItem.SetItemTe ...
最新文章
- ZOOKEEPER安装及测试
- 电动力学每日一题 2021/10/15 Fourier变换法计算均匀电流密度产生的磁场
- 【译】深入理解LSTM网络
- IT是产品、IT是服务、IT是能力
- java自学方法_JAVA自学 方法
- 大话数据结构:最短路径算法
- flask mysql项目模板渲染_21. Flask 模板 - 宏、继承、包含
- 51nod1743-雪之国度【最小生成树,LCA,并查集】
- mysql 魔术设置_mysql主从复制实践
- Must-read papers on deep learning to hash
- SQL Server中的执行计划
- 机器学习_一条会说666的咸鱼
- mybatis比mysql安全吗_MyBatis 和 SQL 注入的恩恩怨怨
- python3.7怎么用ghost.py_python ghost.py使用笔记
- 解决Unable to find taglib [cr] for URI: [WBE-INF/tlds/testlib.tld]] with root cause的可能性方案
- 线性代数知识点总结之行列式
- get请求中文乱码问题解决
- Money is not everthing
- js 浏览器语音播报
- mac格式化固态为exFAT格式
热门文章
- 程序员求职面试三部曲之三:快速适应新的工作环境
- Django08-1:模型层(ORM)--聚合查询/分组查询/F与Q查询/开启事务/常用字段及参数/自定义字段/数据库查询优化
- Redis 数据持久化的方案的实现
- 存储服务器的操作系统,存储服务器是什么操作系统
- 用Swashbuckle(swagger-ui)显示API帮助并进行调试
- ArcGIS实验教程——实验三十五:ArcGIS Model Builder与空间建模原理、案例详解
- ArcGIS 10.6 Data Interoperability Tools的安装与使用(附安装包下载)
- C和指针之字符串编程练习11(统计一串字符包含the的个数)
- Android之如何用dextra.ELF64查看安卓手机“设置“图标的源代码
- java中s方法_Java中Arrys数组常用的方法