[技术博客]利用第三方框架react-native-swipeout实现左右滑动出现按钮
在之前的开发中,为了实现用户不同手势操作能够对应不同的功能,我们考虑使用React-Native的API——PanResponder,实现识别用户的手势,实现不同的功能。但我们很快就发现,这样简单的实现,无任何反馈的话,用户很难知道具有这样的功能。因此,我们准备实现类似手机QQ消息界面的左滑出现几个按钮。使用react-native的第三方框架react-native-swipeout可以很简单的实现此功能。
安装react-native-swipeout
框架的github地址: react-native-swipeout
可以使用npm install --save react-native-swipeout
或 yarn add react-native-swipeout
命令安装框架
框架的使用
在框架的github项目中,开发者给出如下的示例代码
import Swipeout from 'react-native-swipeout';
// Buttons
var swipeoutBtns = [
{
text: 'Button'
}
]
// Swipeout component
<Swipeout right={swipeoutBtns}>
<View>
<Text>Swipe me left</Text>
</View>
</Swipeout>
阅读框架github项目中的文档,我们可以知道框架中实现了Swipeout组件,具有以下属性(props)
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
autoClose | bool | Yes | false | 是否会自动关闭按钮列表 |
backgroundColor | string | Yes | '#dbddde' | 背景颜色 |
close | bool | Yes | 当前列是否会关闭按钮 | |
disabled | bool | Yes | false | 是否禁用swipeout |
left | array | Yes | [] | 右滑时出现在左侧的按钮列表 |
onOpen | func | Yes | (sectionID, rowId, direction: string) => void 按钮列表开启会执行的函数 |
|
onClose | func | Yes | (sectionID, rowId, direction: string) => void 按钮列表关闭会执行的函数 |
|
right | array | Yes | [] | 左滑时出现在右侧的按钮列表 |
scroll | func | Yes | prevent parent scroll | |
style | style | Yes | style of the container | |
sensitivity | number | Yes | 50 | change the sensitivity of gesture |
buttonWidth | number | Yes | each button width |
left和right属性应为形如[{ text: 'Button' }]
的列表,其中支持的属性如下
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
backgroundColor | string | Yes | '#b6bec0' | 按钮的背景颜色 |
color | string | Yes | '#ffffff' | 字体颜色 |
component | ReactNode | Yes | null | pass custom component to button |
onPress | func | Yes | null | 按下后执行的函数 |
text | string | Yes | 'Click Me' | text |
type | string | Yes | 'default' | default, delete, primary, secondary |
underlayColor | string | Yes | null | 按时按钮背景颜色 |
disabled | bool | Yes | false | 是否禁用此按钮 |
具体使用代码
_renderItem = (item) => {
var BtnsLeft = [{ text: '清空', type: 'delete', onPress: ()=> console.log('清空列表')}];
var BtnsRight = [{ text: '删除', type: 'delete', onPress: ()=>console.log('删除单行数据')}];
return(
<Swipeout
close={!(this.state.sectionID === 'historylist' && this.state.rowID === Id)}
right={BtnsRight}
left={BtnsLeft}
rowID={Id}
sectionID='historylist'
autoClose={true}
backgroundColor='white'
onOpen={(sectionId, rowId, direction: string) => {
this.setState({
rowID: rowId,
sectionID: sectionId
});
}}
scroll={event => console.log('scroll event') }
>
<View style={flatStylesWithAvatar.cell}
>
具体内容
</View>
</Swipeout>
)
};
在渲染列表中的单行数据时,左右滑动可以出现不同操作的对应按钮,实现效果如下:
[技术博客]利用第三方框架react-native-swipeout实现左右滑动出现按钮的更多相关文章
- [技术博客]采用Bootstrap框架进行排版布局
[技术博客]采用Bootstrap框架进行排版布局 网页的前端框架有很多很多种,比如Bootstrap.Vue.Angular等等,在最开始其实并没有考虑到框架这回事,开始阅读往届代码时发现其部分采用 ...
- [技术博客] 利用SharedPreferences来实现登录状态的记忆功能
[技术博客] 利用SharedPreferences来实现登录状态的记忆功能 一.SharedPreferences简介 SharedPreferences是Android平台上一个轻量级的存储辅助类 ...
- [技术博客] 利用Vagrant+virtualbox在windows下进行linux开发
目录 加速box安装的方法 root账户登录 换源教程 安装rvm 访问rails server RubyMine连接虚拟机上的解释器 作者:庄廓然 在windows下进行linux开发:利用Vagr ...
- 技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
上次有人留言说,技术博客是程序员的标配,但据我所知绝大部分技术同学到现在仍然没有自己的技术博客.原因有很多,有的是懒的写,有的是怕写不好,还有的是一直想憋个大招,幻想做到完美再发出来,结果一直胎死腹中 ...
- 【技术博客】利用handler实现线程之间的消息传递
[技术博客]利用handler实现线程之间的消息传递 一.handler简介 在Android Studio的开发中,经常需要启动多个线程.比如向远程发送请求时,必须新开一个子线程,否则会造成程序崩溃 ...
- Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改
Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...
- 50家硅谷IT公司技术博客
分享一下 50 家硅谷优秀 IT 公司技术博客,从中可以了解企业文化,技术特色和设计语言,如果直接列出来很单调,加上点评,算吐槽版吧. 知名大厂 1. Facebook https://www.f ...
- 技术博客——微信小程序的架构与原理
技术博客--微信小程序的架构与原理 在两个月的微信小程序开发过程中,我曾走了不少弯路,也曾被很多现在看来十分可笑的问题所困扰.这些弯路与困扰,基本上都是由于当时对小程序的架构理解不够充分,对小程序的原 ...
- Facebook新框架React Native,一套搞定App开发[转]
Facebook新框架React Native,一套搞定App开发 本文来自微信公众号“给产品经理讲技术”(pm_teacher),欢迎关注. 做为一名产品经理,你是否遇到过这样的窘境,“帮我把字体调 ...
随机推荐
- 禁用浏览器自动给input填充账号和密码
如果input输入框type为text,设置autoComplete="off" <el-input v-model="ruleForm.loginId" ...
- 第一册:lesson 135.
原文:The latest report. question:Is Karen Marsh going to retire,do you think? Are you really going to ...
- Ansible-ansible命令
Ansible是用于执行"远程操作"的简单工具.该命令允许针对一组主机定义并运行单个任务剧本. 常用选项 说明 --ask-vault-pass 请求保险库密码 --become- ...
- Java变量常量声明和定义
一.常量和变量 1.常量变量定义 在程序中存在大量的数据来代表程序的状态,其中有些数据在程序的运行过程中值会发生改变,有些数据在程序运行过程中值不能发生改变,这些数据在程序中分别被叫做变量和常量. 2 ...
- 服务器安装python3环境
服务器安装python3环境 先安装相关包 yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel re ...
- 利用Metasploit攻击Android
首先我在Kali下生成一个Android的应用程序,即apk格式的文件,用到的命令是: msfvenom -p android/meterpreter/reverse_tcp LHOST=本地ip L ...
- jmap错误:unknown CollectedHeap type : class sun.jvm.hotspot.gc_interface.CollectedHeap
原文:https://www.jianshu.com/p/0e5d8db8ed5e 错误场景 今天使用jmap -heap命令查看堆的详细信息报错. [root@instance-2gak1pfv d ...
- CentOS7.5搭建Rsync,实现文件同步
Rsync(remote sync)是UNIX及类UNIX平台下一款神奇的数据镜像备份软件,它不像FTP或其他文件传输服务那样需要进行全备份,Rsync可以根据数据的变化进行差异备份,从而减少数据流量 ...
- 201671030110姜佳宇实验十四 团队项目评审&课程学习总结
作业 链接 作业所属课程 西北师范大学软件工程 作业要求 实验十四 团队项目评审&课程学习总结 作业目标 总结学习心得 本学期课程学习总结 解决实验一 软件工程准备任务5提出的问题: 问题一 ...
- 什么是 MFA?
Multi-Factor Authentication (MFA) 是一种简单有效的最佳安全实践方法,它能够在用户名和密码之外再额外增加一层安全保护. 启用 MFA 后,用户登录阿里云网站时,系统将要 ...