Question

我正在使用react-native-maps来渲染带有多个标记的MapView。我想在用户点击标记时执行一些操作和动画。为此，我将一个函数（例如onMarkerPress）绑定到每个Marker的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.Marker
       coordinate={this.state.marker.latlng}         
       onPress={this._onMarkerPress.bind(this)}
/>

和：

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

或使用箭头功能。当我写下答案时，我对此并不了解。

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

1 个答案: