如何使用本机响应来定义按钮上的单击区域？

Question

我目前正在使用react native开发应用程序，我使用react-navigation在屏幕之间导航，使用标题中的按钮（例如后退箭头）。

它运作良好，但即使我的图标尺寸合适，点击区域看起来也很窄，我也很挣扎。

您知道如何在我的按钮上定义点击区域，以便更轻松地点击它吗？我已经尝试了hitslop道具，但它不适合我（也许它已被弃用？）。

这是我的按钮：

var backArrow =
  <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
    <Ionicons name="ios-arrow-back" size={22} color="#ff8c00" />
  </TouchableOpacity>

我在iPhone 6s Plus上使用Expo和测试。

Answer 1

将Ionicons包裹在TouchableOpacity中只会提供与Ionicons组件一样大的可点击区域。您可以使用以下结构增加可点击区域的大小：

<TouchableOpacity>
  <View>
    <Ionicons />
  </View>
</TouchableOpacity>

通过将View设置为您需要的大小。