Как получить ключ или координаты маркера в реакционных картах в onPress?

Question

Я использую react-native-maps для визуализации MapView с несколькими маркерами. Я хочу выполнить некоторые действия и анимации, когда пользователь нажимает на маркер. Для этого я привязываю функцию (например, onMarkerPress) к каждому маркеру onPress. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу понять, как узнать, какой маркер запускает функцию. Есть ли способ получить ссылку на маркер/идентификационный ключ? Даже координаты будут делать, поскольку я могу использовать их для поиска маркера.

Answer 1

Я нашел 2 способа сделать это. Скорее всего, первый из них является лучшим выбором:

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

В моем случае это .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); 
} 

или использовать функцию стрелки. Когда я написал ответ, я не знал об этом.