Question

我正在尝试使用图片创建自定义按钮。但是图像原本非常大，所以我必须调整它以适应屏幕。但是，我似乎无法调整应该使其成为按钮的TouchableHighlight。

正如您在图片中看到的那样，黑色区域可以在图像周围进行触摸，而我只希望图像可以触摸。

Picture of the issue, touchable area larger than image

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

这是我目前使用的代码：

<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',
  },

我尝试了很多样式选项，似乎没什么用。

Answer 1

删除TouchableHighlight的所有样式。 resizeMode样式也仅适用于Image组件，对TouchableHighlight无效。你必须知道在Touchable组件中一切都是可触摸的。你不需要为任何可触摸的亮点设计风格。

Answer 2

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

Answer 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',
  },

这有效：）

React Native Touchable Area太大了

3 个答案: