在 IOS 上不触发 React 本机地图标注按下

Question

我正在使用 React Native 地图，我正在尝试在按下标记标注时添加 en 事件侦听器。它适用于 Android 但不适用于 IOS。在第一个片段中，calloutPress 在 Android 上被调用，但在 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 上调用：

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

这是完整的class：

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
    }
});

Answer 1

您可以使用MapView.Callout

你能试试这个吗？

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

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

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

Answer 2

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

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

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

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 平台依赖。

在 IOS 上不触发 React 本机地图标注按下

React native maps callout press not triggering on IOS

ios

react-native

react-native-maps