Create a Hole in the Interactive Web View for Touch Events

Question

We are trying to repeat the same thing as this plugin: https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/README.md (how this plugin works), but using response-native + mapbox gl (native).

The idea is simple: webview and mapview are "siblings", the webview is above the mapview, and part of the webview is transparent, and a map is displayed below it. We would like to ensure that any touch events that occur in this transparent area are not captured by the webview and bubble / regardless of the type of map, so you can touch / drag / enlarge the map.

Simply put: we want part (not all) of the web view not to capture events, but to allow the underlying view to capture them.

It seems that there are some native response methods that allow you to do this (conditionally control the capture of events) ( https://facebook.imtqy.com/react-native/docs/view.html#onstartshouldsetrespondercapture ), but we can not find any a working example for checking it, and we cannot fully understand the documentation that is provided (we cannot even understand if this callback should be specified for the parent view or child views).

Thus, basically, we need some kind of response tool to conditionally capture touch events.

Can anybody help us? The map / webview example can be too complicated, any conditional capture of events in two views should help a lot.

Answer 1

, , EvenEmitter Webview . , , .

, , . .

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)

Edit:

, , , .

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>

        );
    }

}

,