javascript - 防止 parent 被点击，同时允许 child 捕捉触摸

Question

在react-native有时，阻止父级捕获和处理触摸/点击事件，同时允许其子级接收事件并对事件使用react是很有用的。具体来说，这在使用 <View/> 时很有用。或 <ImageBackground/>充当其子元素透明背景的容器(例如:基于渐变的阴影或用于将绝对定位元素居中的包装 View )。

Answer 1

React Native 提供了一个 pointerEvents支持 <View/>可以设置为'none'的元素为了停止对触摸和点击使用react，但是让 child 仍然可以触摸的技巧是设置 pointerEvents支持 'box-none'而不是 'none' .

警告:与常规 CSS 相比，pointerEvents是 prop 而不是 style。所以要使用它，你可以做

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