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

70 篇文章 3 订阅
28 篇文章 0 订阅

工作中,我们在开发的迭代任务中,会优先完成开发的业务需求,保证产品的各项功能模块稳定正常的上线和迭代。
一般情况下,我们通常是根据UI同学的效果图来绘制我们APP的功能UI展示图。
比如下面的这个效果图,这是一个卡片上的按钮,点击按钮会将竖向的整条数据进行删除操作。
在这里插入图片描述

我们正常按照这个效果图,并用代码进行布局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>

在这里插入图片描述

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

欢迎大家关注我的公众号:君伟说。
简书:君伟说。
掘金:https://juejin.im/user/58fdbbcbda2f60005dcbe47d

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值