Question

我有一个方形TouchableOpacity按钮，其中间的图形只是一个小点图标，其余部分是透明背景。我发现在许多Android设备中按下它很困难，因为显然只有不透明的区域是可触摸的，其余的不是。

有没有办法控制TouchableOpacity或其他类似按钮的兄弟姐妹的可触摸区域？

Answer 1

我只是添加一些代码以便于引用：

<View style={Styles.buttonStyle}>
    <TouchableOpacity onPress={onBtn1Pressed} hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}>
        <Text style={Styles.textStyle}>
           Button text
         </Text>
    </TouchableOpacity>
</View>

父按钮容器具有以下样式。由于宽度为150，我左右为50，以增加可点击区域。

 buttonStyle:{
    alignItems:'center',
    backgroundColor: '#F92660',
    width:150,
    height:50,
    marginTop:20,
    marginBottom:10,
    marginRight:15,
    padding:5,
  },

Answer 2

我遇到了同样的问题，我的抽屉图标可以从标题的任何地方触摸。我通过为抽屉图标添加一个新视图并在其中添加图标及其属性来解决这个问题。

之前

    return (
      <View style={styles.header}>
        <StatusBar backgroundColor="transparent" translucent={true} />
        <TouchableOpacity
          style={styles.trigger}
          onPress={() => {
            this.props.navigation.goBack();
          }}
        >
            <Ionicons name="arrow-back" size={35} color={"grey"} />
        </TouchableOpacity>
      </View>
    );
  }
}

之后

    return (
      <View style={styles.header}>
        <StatusBar backgroundColor="transparent" translucent={true} />
        <TouchableOpacity
          style={styles.trigger}
          onPress={() => {
            this.props.navigation.goBack();
          }}
        >
          <View style={{ width: 40, height: 40 }}>
            <Ionicons name="arrow-back" size={35} color={"grey"} />
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

在反应原生中控制可触摸区域

2 个答案: