React-Native WebView предотвращает onPress для родительского TouchableOpacity - PullRequest
Новая
       18

React-Native WebView предотвращает onPress для родительского TouchableOpacity

0 голосов
/ 10 февраля 2019

Я могу ожидать, что при обычном использовании вы бы хотели, чтобы события касания на WebView оставались в пределах WebView, но в моем случае я использую WebView для рисования некоторого текста с помощью css (потому чтоя не могу добиться этого с помощью таблицы стилей реагирования).

Проблема

в этом коде, компонент WebView закомментирован, и когда я нажимаю на "привет мир"текст, вызывается функция 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, текст будет кликабельным, но если pointerEventsNonetrue, будет отображаться 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>

1 Ответ

0 голосов
/ 10 февраля 2019

Да, вы должны обернуть веб-представление в представление с pointerEvents = 'none' 

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