React Native - 无法在 ImageBackground 中单击TouchableOpacity答案

【问题标题】：React Native - Can't clickTouchableOpacity inside ImageBackgroundReact Native - 无法在 ImageBackground 中单击TouchableOpacity
【发布时间】：2020-03-13 20:25:48
【问题描述】：

我想在图片中创建一个旋转图标：

<ImageBackground style={stylesNative2.image} source={{ uri }} >   
  <TouchableOpacity onPress={ () => { alert("handler here") }} tyle={styles.rotateImageIcon}>
    <Icon name='rotate-ccw' type='Feather' style={styles.rotateImageIcon} />
  </TouchableOpacity>
</ImageBackground>

const stylesNative2 = StyleSheet.create({
  image: {
    zIndex: 0,
    position: 'absolute',
    height: h,
    width: WIDTH,
    resizeMode: 'cover',
    transform: [{ rotate: this.state.imageRotation + 'deg' }]
  }
});

const styles = StylesManager.getStyles({
  rotateImageButton: {
    backgroundColor: 'transparent',
    elevation: 0,
    zIndex: 1
  },
  rotateImageIcon: {
    marginTop: '1rem',
    marginLeft: '1rem',
    fontSize: '1.7rem',
    color: 'white',
  }
});

图标出现，但 TouchableOpacity 不起作用。知道为什么它不起作用吗？

【问题讨论】：

你能分享一个展览链接吗？所以我可以检查并恢复？

标签： image react-native rotation

【解决方案1】：

我认为是因为ImageBackgroud 有一个pointerEvent 像这样的：

pointer-events: none;

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

您可以尝试将您的<TouchableOpacity> 包装在<View> 上吗？

【讨论】：

【解决方案2】：

也许是 zIndex... 可触摸的不透明度是透明的，因此您不必在其上添加 zIndex。

【讨论】：