在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>