如何在 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);
}

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