React native React Native WebView防止在父TouchableOpacity上按onPress

我可以预期，在正常使用中，您会希望

WebView

上的触摸事件保持在

WebView

中，但在我的情况下，我使用

WebView

使用css绘制一些文本（因为我无法使用react原生样式表实现这一点）

问题 在这段代码中，

WebView

组件被注释掉，当我按下“hello world”文本时，调用函数

console.log（'onPress called'）

；但是如果我取消注释

WebView

，则不会调用touch事件

有没有办法阻止

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>

---

是的，你应该用pointerEvents='none'将webview包装在一个视图中

<View style={{...}} pointerEvents="none">
        <WebView .../>
        </View>

---

是的，您应该使用pointerEvents='none'将webview包装在一个视图中

<View style={{...}} pointerEvents="none">
        <WebView .../>
        </View>

---

我面临着同样的问题，我所做的是用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>

{
}}onPressIn={（）=>{
this.setState（{boolState:true}）
}}onPressOut={（）=>{
this.setState（{boolState:false}）
}}
>
{boolState&&}
-------------------------
-------------------------

我面临着同样的问题，我所做的是用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>

{
}}onPressIn={（）=>{
this.setState（{boolState:true}）
}}onPressOut={（）=>{
this.setState（{boolState:false}）
}}
>
{boolState&&}
-------------------------
-------------------------

这对我不起作用：

您应该将视图设置为绝对视图，而不是webview。在webview中使用style={{flex:1}}填充所有视图，并给出视图style={{//position:'absolute'，backgroundColor:'transparent'，width:200，height:100}}我尝试过在一个

hello World

中包装，似乎按下该元素时，

pointerEvents=“none”

会阻止onPress事件，但我想在父元素

TouchableOpacity

上触发onPress事件，但似乎`pointerEvents=“none”防止冒泡接触事件。是的。。所以将视图包装在touchableopacity内…--我想我已经完全按照你所描述的那样做了，但这似乎对我仍然不起作用。我将用一个例子来更新这个问题。这对我不适用：

您应该使视图成为绝对视图，而不是webview。在webview中使用style={{flex:1}}填充所有视图，并给出视图style={{//position:'absolute'，backgroundColor:'transparent'，width:200，height:100}}我尝试过在一个

hello World

中包装，似乎按下该元素时，

pointerEvents=“none”

会阻止onPress事件，但我想在父元素

TouchableOpacity

上触发onPress事件，但似乎`pointerEvents=“none”防止冒泡接触事件。是的。。所以将视图包装在touchableopacity内…--我想我已经完全按照你所描述的那样做了，但这似乎对我仍然不起作用。我将用一个例子来更新这个问题。