如何在 onPress 的 react-native-maps 中获取标记的键或坐标

Question

我正在使用react-native-maps来渲染带有多个标记的MapView。我想在用户单击标记时执行一些操作和动画。为此，我将一个函数(例如，onMarkerPress(绑定到每个标记的onPress。我遇到的问题是我无法弄清楚如何找出触发该功能的标记。有没有办法获得对标记/识别键道具的引用？甚至坐标也可以像我一样使用这些坐标来查找标记。

Answer 1

我找到了两种方法。很可能第一个是最佳选择：

1. 将您需要的有关标记的信息作为第二个参数传递给_onMarkerPress的绑定，如下所示：

render() {
    return (
        <View>
            <Text>MySupaFancyMap</Text>
            <MapView
                style={styles.map}
                region={this.state.region}
                onRegionChangeComplete={this._onRegionChangeComplete.bind(this)}
            >
                <MapView.Marker
                    coordinate={this.state.marker.latlng}
                    title={this.state.marker.title}
                    description={this.state.marker.description}
                    onPress={this._onMarkerPress.bind(this, this.state.marker)}
                />
            </MapView>
        </View>
    );
}
_onMarkerPress (markerData) {
    alert(JSON.stringify(markerData));
}

在我的例子中，this.state.marker 是一个这样的对象：

       {
            latlng: {
                latitude: REGION.latitude,
                longitude: REGION.longitude
            },
            title:'MyHouse',
            weather: '26 Celsius'
        }

2. 从事件信息中提取您需要的信息，如下所示：

 <MapView>
//codes here
onPress={this._onMarkerPress.bind(this)}
>
 
<MapView.Marker
       coordinate={this.state.marker.latlng}         
/>
<MapView>

并具有：

_onMarkerPress (mkr) {
    console.warn(mkr.nativeEvent.coordinate);
}

我肯定会选择第一个解决方案。有关标记的更多详细信息，请参阅此处：https://github.com/airbnb/react-native-maps/blob/master/docs/marker.md

注意：作为最佳实践，建议您在渲染时不要绑定。更好的解决方案是将它们添加到构造函数中，如下所示：

constructor (props) {
  super(props);
  this._onMarkerPress = this._onMarkerPress.bind(this);
}

或使用箭头功能。当我写答案时，我不知道这一点。