Question

我可以预期，在正常使用中，您希望WebView上的触摸事件保持在WebView内，但是在我的情况下，我正在使用WebView进行绘制一些带有CSS的文本（因为我无法使用react-native样式表实现此功能）。

问题

在此代码中，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>

更新：

我试图阻止用户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>

Answer 1

是的，您应该将webview封装在一个指针指标为'none'的视图中

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

Answer 2

我遇到了同样的问题，我所做的是将 TouchableOpacity 替换为 TouchableWithoutFeedback ，并使用与父级相同的样式创建了一个视图，并添加了额外的 position：“绝对” ，并使用了如下所示的状态和可触摸方法：

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

React-Native WebView防止onPress对父级TouchableOpacity

问题

更新：

2 个答案: