React native 反应本机可接触区域过大

我正在尝试创建一个带有图像的自定义按钮。但是图像最初非常大，所以我必须调整它的大小以适应屏幕。然而，我似乎无法调整TouchableHighlight的大小，因为它应该是一个按钮

如图所示，图像周围的黑色区域是可触摸的，而我只希望图像是可触摸的

所以我需要找到一种方法将可触摸图像缩小到与图像相同的大小

这是我目前使用的代码：

<TouchableHighlight
            style={styles.button}
            onPress={() =>
              navigate('SplashScreen')
            }>
            <Image
              style={styles.button}
              source={require('./Slices/home1/Home102.png')}
            />
          </TouchableHighlight>

touch: {
    // height: 50,
    // width: Dimensions.get('window').width,
    // padding: 0,
    // flex: -1,
  },
  button: {
    // flex: 1,
    // padding:0,
    width: Dimensions.get('window').width,
    resizeMode: 'contain',
  },

导航（'SplashScreen'）
}>
触摸：{
//身高：50，
//宽度：尺寸。获取（'窗口'）。宽度，
//填充：0，
//弹性：-1，
},
按钮：{
//弹性：1，
//填充：0，
宽度：尺寸。获取（'窗口'）。宽度，
resizeMode:'包含'，
},

---

我尝试了很多样式选项，但似乎没有任何效果。

删除TouchableHighlight的所有样式。此外，resizeMode样式仅适用于图像组件，对TouchableHighlight无效。你必须知道，任何东西都是可触摸的——在可触摸组件内的东西。你不需要设计任何可触摸的高光

从样式设置中删除resizeMode，如果图像的高度是我从您提供的图像中看到的宽度的1/3，则将aspectRatio={3}添加到图像的道具中。

因此这不是最优雅的解决方案，但我尝试了这些建议，但它们都不起作用。所以我刚刚计算出了图像的准确纵横比，并做了如下操作：

touch: {
    // height: 50,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').width/2.7,
    // padding: 0,
    // flex: -1,
  },
  button: {
    // flex: 1,
    // padding:0,
    // aspectRatio: 3,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').width/2.7,
    resizeMode: 'contain',
  },

这就奏效了：）