我可以预期，在正常使用中，您会希望WebView上的触摸事件保持在WebView内，但就我而言，我正在使用WebView用 CSS 绘制一些文本(因为我无法使用 React-native 样式表来实现这一点(。
问题所在
在此代码中，WebView组件被注释掉，当我按下"hello world"文本时，将调用函数console.log('onPress called.');但是如果我取消注释WebView，则永远不会调用触摸事件。
有没有办法阻止WebView参加onPress事件？
import React, { Component } from 'react';
import { Text, TouchableOpacity, WebView } from 'react-native';
...
<TouchableOpacity
onPress={() => console.log('onPress called.')}
>
{/* <WebView
source={{
html: `
<h1
style="
font-family: 'Impact';
color: white;
font-size: 25px;
text-align: center;
letter-spacing: 1px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
"
>
HELLO WORLD from this
</h1>
`
}}
style={{
// position: 'absolute',
backgroundColor: 'transparent',
width: 200,
height: 100
}}
/> */}
<Text
style={{
position: 'absolute',
backgroundColor: 'transparent',
top: 100,
width: 200,
height: 100
}}
>hello world</Text>
</TouchableOpacity>
更新：
我试图按照用户 ValdaXD 的建议阻止指针事件。
在此示例中，当pointerEventsNone设置为 false 时，文本将是可单击的，但如果pointerEventsNone true，它将呈现WebView并且单击WebView将不会调用父 onPress 事件。
<TouchableWithoutFeedback
onPress={() => console.log({ isEditing: !isEditing })}
>
{!!pointerEventsNone ? (<View pointerEvents="none" style={{ height: 100, width: 200 }}>
<WebView
javaScriptEnabled={true}
injectedJavaScript={`document.body.addEventListener('click',
function(e){
window.postMessage("Message from WebView","*");
console.log(e);
})`}
onMessage={e => console.log("message", e)}
source={{
html: `
<html>
<body>
<h1
style="
font-family: 'Impact';
color: white;
font-size: 25px;
text-align: center;
letter-spacing: 1px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
"
>
HELLO WORLD from this
</h1>
</body>
</html>
`
}}
useWebKit
style={{
backgroundColor: 'transparent',
width: 200,
height: 100,
flex: 1
}}
/>
</View>)
: (<Text>hello world</Text>)
}
</TouchableWithoutFeedback>
我遇到了同样的问题，我所做的是用 TouchableWithoutFeedback 替换了 TouchableOpacity，并使用与父级相同的样式创建了一个视图，只是添加了额外的位置："绝对">并使用了如下所示的状态和可触摸方法：
<TouchableWithoutFeedback onPress={() => {
}} onPressIn={()=>{
this.setState({boolState:true})
}} onPressOut={()=>{
this.setState({boolState:false})
}}
>
<View style={parentStyle}>
{boolState && <View style={[parentStyle,{
alignItems: 'center',
backgroundColor:'rgba(0,0,0,0.48)',
justifyContent: 'center',
position: 'absolute',
left: 0,
top: 0,
bottom:0,
right:0,
marginTop:0,
padding:0}]}/>}
-------------------------
-------------------------
</View>
</View>
</TouchableWithoutFeedback>
是的，您应该将 Web 视图包装在带有指针事件的视图中 ='none'
<View style={{...}} pointerEvents="none">
<WebView .../>
</View>