在允许孩子捕捉触摸的同时防止父母被点击

Posted 2021-05-06

在react-native中，有时防止父母捕捉和处理触摸/点击事件同时允许其子女接收事件并做出反应是有用的。具体来说，这在使用<View/>或<ImageBackground/>容器时很有用，该容器充当其子元素的透明背景（例如：基于渐变的阴影或用于居中绝对定位元素的包装器视图）。

答案

React Native为pointerEvents元素提供<View/>道具，可以设置为'none'以停止对触摸和点击作出反应，但允许孩子仍然可触摸的技巧是将pointerEvents道具设置为'box-none'而不是'none'。

警告：与常规CSS相比，pointerEvents是“prop”而不是样式。所以要使用它，你可以做到

<View style={styles.parentWithoutTouchEvents} pointerEvents='box-none'>
   <View style={styles.touchableChild}>
   </View>
</View>