React Native touchableOpacity on android borderRadius无法工作

Question

我在按钮的样式中使用了边框半径，样式显示正确，但是，单击裁剪半径的区域仍然有效。

这是我的实现示例。

<View style={Style.userCircleContainerParent}>
    <TouchableOpacity style={Style.userCircleContainer} onPress={() => this.onAvatarClick()}>
        {this.props.state.pictureUrl
          ? <Image source={{uri: this.props.state.pictureUrl}} style={Style.userCircleImage} />
          : <Image source={loadingImage} style={Style.userCircleImage} />}
    </TouchableOpacity>
</View>

样式

  userCircleContainerParent: {
    alignSelf: 'center',
    height: userIconSize,
    width: userIconSize,
    borderRadius: userIconSize / 2,
    backgroundColor: 'white'
  },

  userCircleContainer: {
    alignSelf: 'center',
    height: userIconSize,
    width: userIconSize,
    borderRadius: userIconSize / 2,
    backgroundColor: 'white'
  },

  userCircleImage: {
    alignSelf: 'center',
    height: userIconSize - 5,
    width: userIconSize - 5,
    marginTop: 2.5,
    borderRadius: (userIconSize - 5) / 2,
    backgroundColor: 'transparent'
  },

图片 active click area

Answer 1

将此道具添加到第一个视图

pointerEvents = {'box-none'}

https://facebook.github.io/react-native/docs/view.html#pointerevents