react-native - 在 react-native webview 中为触摸事件创建一个洞

Question

我们试图重复这个插件所做的同样的事情:https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/README.md (此插件如何工作)但使用 react-native + mapbox gl(native)。

这个想法很简单:webview 和 mapview 是“兄弟”，webview 位于 mapview 之上，部分 webview 是透明的，mapview 显示在其下方。我们希望发生在这个透明区域的任何触摸事件都不会被 webview 和气泡/任何 map View 捕获，以便您可以触摸/拖动/缩放 map 。

简单地说:我们希望 webview 的一部分(不是全部)不捕获事件，而是允许底层 View 捕获它们。

看起来 react native 中有一些方法允许这样做(有条件地控制事件捕获)( https://facebook.github.io/react-native/docs/view.html#onstartshouldsetrespondercapture )但我们找不到任何工作示例来测试它，我们无法完全理解提供的文档(我们甚至无法理解是否应该为父 View 或 subview 指定此回调)。

所以基本上我们只需要一些 react-native 工具来有条件地捕获触摸事件。

任何人都可以帮助我们吗？ map/webview 的示例可能太复杂了，两个 View 中的任何条件捕获事件都应该有很大帮助。

Answer 1

我不确定这是否是完美的解决方案，但您可以做的是创建一个 EvenEmitter 并让 Webview 捕获所有点击。应该由 map 处理的那些，我可以发送到 map 本身。

我在屏幕上使用它们，其中可能会创建多个组件，但它们可以发送到父屏幕。它主要用于处理模态屏幕。

import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';

this._eventEmitter = new EventEmitter();

        this._eventEmitter.addListener('modal', (data) => {
            this.setState({
                visibleModal: true,
                modalData: data
            });
        });

然后你可以像emitter.emit("modal", data)一样使用它们

编辑:

这是另一种方法，它也向您展示了如何使用您在问题中提出的方法。

class Class extends Component {

    onStartShouldSetResponder = () => true;
    onEvent = (e) => {
        let object = {};
        object.locationX = e.nativeEvent.locationX;
        object.locationY = e.nativeEvent.locationY;
        object.pageY = e.nativeEvent.pageY;
        object.pageX = e.nativeEvent.pageX;
        object.target = e.nativeEvent.target;
        //object.touches = e.nativeEvent.touches; //These will trigger a cyclic error while parsing but you can access them
        //object.changedTouches = e.nativeEvent.changedTouches;
        object.identifier = e.nativeEvent.identifier;
        alert(JSON.stringify(object));

        if (object.pageX > this.state.x && object.pageX < (this.state.x + this.state.width) && object.pageY > this.state.y && object.pageY < (this.state.y + this.state.height))
            alert("inside") //Here you can trigger whatever function you need from the underlying view
    }

    onLayout = (event) => {
        this.setState({
            x: event.nativeEvent.layout.x,
            y: event.nativeEvent.layout.y,
            width: event.nativeEvent.layout.width,
            height: event.nativeEvent.layout.height,
        });
    }

    render(){

        return(    

            <ScrollView>

            <View ref={"target"} style={{
                position: 'absolute',
                height: 200,
                width: 200,
                left: 100,
                top: 100,
                backgroundColor: 'rgba(0,0,0,0.5)'
            }}
            onLayout={this.onLayout}
            />

            <View 
            onl
            onStartShouldSetResponder={this.onStartShouldSetResponder} 
            onResponderMove={this.onEvent}
            style={{
                backgroundColor: 'rgba(255,0,0,0.3)',
                width: '100%',
                height: 150
            }}/>

            <TouchableWithoutFeedback 
            onPress={this.onEvent}
            onLongPress={this.onEvent}
            style={{
                backgroundColor: 'rgba(0,255,0,0.3)',
                width: '100%',
                height: 150
            }}> 
            <View style={{height: 150, backgroundColor: 'rgba(0,255,0,0.3)'}}/>
            </TouchableWithoutFeedback>

            <View 
            onTouchStart={this.onEvent}
            onTouchEnd={this.onEvent}
            style={{
                backgroundColor: 'rgba(0,0,255,0.3)',
                width: '100%',
                height: 150
            }}> 
            </View>

            </ScrollView>

        );
    }

}

也许这会帮助您将事件传递给其他 View