React Native扩大点击区域

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

一般情况下，我们通常是根据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://segmentfault.com/a/1190000021450223

这里其实更重要的是如何和UI确定icon的规范例如定义一些统一的按钮大小。防止图片大小不一调整位置德问题