反应原生地图标注按下未在 IOS 上触发 [英] React native maps callout press not triggering on IOS

问题描述

我正在使用本机地图，并且我正在尝试在按下标记标注时添加事件侦听器.它适用于Android，但不适用于IOS.在第一个片段中，calloutPress 在 Android 上被调用，但在 IOS 上没有:

I'm using react native maps and I'm trying to add en event listener when a marker callout is pressed. It works on Android but not on IOS. In this first snippet calloutPress gets called on Android but not on IOS:

<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    rotateEnabled={false}
    mapType="standard"
    initialRegion={region} 
>
    <Marker coordinate={markerCoordinate} onCalloutPress={() => this.calloutPress()}>
        <Callout>
            <View>
                <Text style={styles.calloutTitle}>My title</Text>
                <Text style={styles.calloutDescription}>My description</Text>
            </View>
        </Callout>
    </Marker>
</MapView>

我还在标注中尝试了可触摸的不透明度，现在 calloutPress 在 Android 或 IOS 上都不会被调用:

I also tried a touchable opacity inside the callout, now calloutPress is not called either on Android or IOS:

<MapView
    provider={PROVIDER_GOOGLE}
    style={styles.map}
    rotateEnabled={false}
    mapType="standard"
    initialRegion={region}
>
    <Marker coordinate={markerCoordinate}>
        <Callout>
            <TouchableOpacity onPress={() => this.calloutPress()}>
                <Text style={styles.calloutTitle}>My title</Text>
                <Text style={styles.calloutDescription}>My description</Text>
            </TouchableOpacity>
        </Callout>
    </Marker>
</MapView>

这是完整的课程:

import React, { Component } from "react";
import { View, StyleSheet, Text, TouchableOpacity } from "react-native";
import MapView, { Marker, Callout, PROVIDER_GOOGLE } from "react-native-maps";

export default class MapTabs extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.mapContainer}>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    style={styles.map}
                    rotateEnabled={false}
                    mapType="standard"
                    initialRegion={region}
                >
                    <Marker coordinate={markerCoordinate}>
                        <Callout>
                            <TouchableOpacity onPress={() => this.calloutPress()}>
                                <Text style={styles.calloutTitle}>My title</Text>
                                <Text style={styles.calloutDescription}>My description</Text>
                            </TouchableOpacity>
                        </Callout>
                    </Marker>
                </MapView>
            </View>
        );
    }

    calloutPress() {
        console.log("hello!");
    }
}

const region = {
    latitude: 54.403664,
    longitude: 14.769657,
    latitudeDelta: 30,
    longitudeDelta: 30
};

const markerCoordinate = { latitude: 54.403664, longitude: 14.769657 };

const styles = StyleSheet.create({
    mapContainer: {
        width: "100%",
        height: "100%",
        zIndex: 0
    },
    map: {
        flex: 1
    },
    calloutTitle: {
        fontSize: 17,
        marginBottom: 5,
        fontWeight: "bold"
    },
    calloutDescription: {
        fontSize: 14
    }
});

推荐答案

经过一些额外的研究，我发现了这个未解决的问题 https://github.com/react-native-community/react-native-maps/issues/2223

After some additional research I found this open issue https://github.com/react-native-community/react-native-maps/issues/2223

问题指出，在 MapView 上使用 provider={PROVIDER_GOOGLE} 和自定义样式会使 onCalloutPress 无法在 IOS 上触发.使用本机提供程序时确实会触发.

The issue states that using provider={PROVIDER_GOOGLE} and a custom style on MapView is making onCalloutPress not trigger on IOS. It does trigger when using native provider.

显然，标注上有一个 onPress 事件，使用它也可以在 IOS 上运行.这是使用 google 提供程序在 android 和 ios 上运行的最终解决方案，它仅在每个平台上触发一次:

Apparently there's an onPress event on the callout and using that makes it work on IOS as well. Here's a final solution working on both android and ios with google provider, it only trigger once on each platform:

import React, { Component } from "react";
import { View, StyleSheet, Text } from "react-native";
import MapView, { Marker, Callout, PROVIDER_GOOGLE } from "react-native-maps";

export default class MapTabs extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.mapContainer}>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    style={styles.map}
                    rotateEnabled={false}
                    mapType="standard"
                    initialRegion={region}
                >
                    <Marker
                        coordinate={markerCoordinate}
                        onCalloutPress={() => this.calloutPress()}
                    >
                        <Callout onPress={() => this.calloutPress()}>
                            <View>
                                <Text style={styles.calloutTitle}>My title</Text>
                                <Text style={styles.calloutDescription}>My description</Text>
                            </View>
                        </Callout>
                    </Marker>
                </MapView>
            </View>
        );
    }

    calloutPress() {
        console.log("hello!");
    }
}

const region = {
    latitude: 54.403664,
    longitude: 14.769657,
    latitudeDelta: 30,
    longitudeDelta: 30
};

const markerCoordinate = { latitude: 54.403664, longitude: 14.769657 };

const styles = StyleSheet.create({
    mapContainer: {
        width: "100%",
        height: "100%",
        zIndex: 0
    },
    map: {
        flex: 1
    },
    calloutTitle: {
        fontSize: 17,
        marginBottom: 5,
        fontWeight: "bold"
    },
    calloutDescription: {
        fontSize: 14
    }
});

如果您不想添加未触发的事件侦听器，请使 onPress 和 onCalloutPress 平台依赖.

If you don't want to add event listeners that aren't triggered, make the onPress and onCalloutPress platform dependent.

这篇关于反应原生地图标注按下未在 IOS 上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！