如何使用本机反应定义按钮上的点击区域？

Question

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

它运行良好，但是即使我的图标大小合适，点击区域似乎真的很窄，我很难解决。

你知道我如何在我的按钮上定义一个点击区域以便更容易点击吗？我已经尝试过这个hitslop道具，但它对我不起作用（也许它已被弃用？）。

这是我的按钮：

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

我正在使用 Expo 并在 iPhone 6s Plus 上进行测试。

Answer 1

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

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

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