优雅的扩大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的点击范围。

目录
相关文章
uniapp input框监听回车搜索事件效果demo(整理)
uniapp input框监听回车搜索事件效果demo(整理)
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
502 0
uni-app项目配置手机端底部的tab栏(一)
uni-app项目配置手机端底部的tab栏(一)
427 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
736 0
|
2月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
153 1
|
4月前
|
小程序
【微信小程序】-- 全局配置 -- window - 导航栏(十五)
【微信小程序】-- 全局配置 -- window - 导航栏(十五)
|
4月前
|
C++ 索引
C++ Qt开发:Tab与Tree组件实现分页菜单
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍`tabWidget`选择夹组件与`TreeWidget`树形选择组件,的常用方法及灵活运用。
78 0
C++ Qt开发:Tab与Tree组件实现分页菜单
|
10月前
|
JavaScript
uni-app点击按钮,生成列表元素
uni-app点击按钮,生成列表元素
90 1
elementUI 的el-select组件编辑时点击没反应效果demo(整理)
elementUI 的el-select组件编辑时点击没反应效果demo(整理)
iframe框架学习笔记---点击切换路径
iframe框架学习笔记---点击切换路径
81 0