优雅的扩大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表单选项的设置方法
490 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
723 0
好的学习方法------快捷键汇总页面,ncpa.cpl,设置成一个路由,quick,里面存入快捷键,quick路由放快捷键,link放快捷方式
好的学习方法------快捷键汇总页面,ncpa.cpl,设置成一个路由,quick,里面存入快捷键,quick路由放快捷键,link放快捷方式
|
2月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
138 1
路由不跳转,常见流程-----ElementPlus如何点击某页跳转页,el-menu中必须加上router=“true“,否则不跳转,index写完成路由路径就行,后面的router也写完整的
路由不跳转,常见流程-----ElementPlus如何点击某页跳转页,el-menu中必须加上router=“true“,否则不跳转,index写完成路由路径就行,后面的router也写完整的
大事件项目16-----首页组件创建和路由配置
大事件项目16-----首页组件创建和路由配置
|
4月前
【UI】elementui select点击获取label 和 value
【UI】elementui select点击获取label 和 value
26 1
|
4月前
|
小程序
【微信小程序】-- 全局配置 -- window - 导航栏(十五)
【微信小程序】-- 全局配置 -- window - 导航栏(十五)
|
4月前
|
C++ 索引
C++ Qt开发:Tab与Tree组件实现分页菜单
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍`tabWidget`选择夹组件与`TreeWidget`树形选择组件,的常用方法及灵活运用。
76 0
C++ Qt开发:Tab与Tree组件实现分页菜单
|
10月前
|
JavaScript
uni-app点击按钮,生成列表元素
uni-app点击按钮,生成列表元素
83 1