优雅的扩大RN组件点击范围

简介: 优雅的扩大RN组件点击范围

工作中,我们在开发的迭代任务中,会优先完成开发的业务需求,保证产品的各项功能模块稳定正常的上线和迭代。

一般情况下,我们通常是根据UI同学的效果图来绘制我们APP的功能UI展示图。

比如下面的这个效果图,这是一个卡片上的按钮,点击按钮会将竖向的整条数据进行删除操作。


微信图片_20220609220033.png


我们正常按照这个效果图,并用代码进行布局UI实现,完成功能开发,没有问题,但是却有一个用户体验的问题。

对于提升用户体验,在RN的官网是有一些建议的。

On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, padding, minWidth and minHeight style values can be useful for that. Alternatively, you can use hitSlop prop to increase interactive area without affecting the layout. 

大致意思:在真实手机上准确的点击一个按钮是非常困难的。应该确保组件的大小是44*44或者更大。通常我们通过设置padding,minWidth,minHeight的style的属性值,来扩大按钮的点击范围。但这种方式可能会影响我们的UI设计布局。我们可以使用hitSlop这个属性来扩大点击区域,并且不会影响我们的UI布局。

使用方法:

<TouchableOpacity
            style={{
              position: 'absolute', justifyContent: 'center', alignItems: 'center', top: - 10, right: -5, width: 30, height: 30, zIndex: 99999,
              elevation: 99999
            }}
            onPress={() => onPressDelete(itemData)}
            hitSlop={{left: 30, right: 30, top: 30, bottom: 30}}
          >
            <View style={{
              position: 'absolute', justifyContent: 'center', alignItems: 'center', top: 10, width: 30, height: 30, zIndex: 99999,
              elevation: 99999
            }}>
              <Image source={require('images/compared/delete_gray.png')} />
            </View>
          </TouchableOpacity>

微信图片_20220609220204.png

如上图及代码所示,相当于扩大了30的点击范围。

目录
相关文章
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
587 0
uni-app项目配置手机端底部的tab栏(一)
uni-app项目配置手机端底部的tab栏(一)
507 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
839 0
|
27天前
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
243 1
好的学习方法------快捷键汇总页面,ncpa.cpl,设置成一个路由,quick,里面存入快捷键,quick路由放快捷键,link放快捷方式
好的学习方法------快捷键汇总页面,ncpa.cpl,设置成一个路由,quick,里面存入快捷键,quick路由放快捷键,link放快捷方式
|
4月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
256 1
路由不跳转,常见流程-----ElementPlus如何点击某页跳转页,el-menu中必须加上router=“true“,否则不跳转,index写完成路由路径就行,后面的router也写完整的
路由不跳转,常见流程-----ElementPlus如何点击某页跳转页,el-menu中必须加上router=“true“,否则不跳转,index写完成路由路径就行,后面的router也写完整的
|
6月前
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
uniapp uni-combox 下拉提示无匹配项(完美解决--附加源码解决方案及思路)
364 0
|
JavaScript
uni-app点击按钮,生成列表元素
uni-app点击按钮,生成列表元素
98 1
|
JavaScript
Ant Design Vue select下拉列表动态更新选中值
Ant Design Vue select下拉列表动态更新选中值
266 0