Можно ли изменить pinColor MapView Market программно, нажав любую кнопку?

Я реализовал MapView с реактивными картами. Я пытаюсь изменить pinColor маркера, щелкнув по нему.

Примечание. У меня большое количество маркеров. Поэтому я не думаю, что обновление всего представления может быть хорошим решением. Мне нужно напрямую изменить цвет выбранного маркера.

Я не нашел, как это сделать. Я пробовал ниже код:

class TestMap extends React.Component {
constructor(props) {

this.state = {
    testColor: "#FFFFFF",
    userLatitude:0,
    userLongitude:0,
    data:[]
}
}

render() {
return (
<MapView
        provider={PROVIDER_GOOGLE}
        showsTraffic={true}
        showsBuildings={true}
        toolbarEnabled={true}
        loadingEnabled={true}
        style={styles.map}
        initialRegion={{
          latitude: this.state.userLatitude,
          longitude: this.state.userLongitude,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        }}
        onPoiClick={this.onPoiClick}
        showsUserLocation={true}
        followsUserLocation={true}
        showsMyLocationButton={true}
        loadingBackgroundColor="#FEA405"
        loadingIndicatorColor="white"
        onLongPress={e => this.onMapPress(e)}
        enableZoomControl
      >
        {this.ListMarkers()}
</MapView>
)};

ListMarkers() {
return this.state.data.map((data, i) => {
  return (
    <Marker
      key={i}
      onPress={e => this.onPressMarker(e, i, data)}
      coordinate={{
        longitude: data.LONGITUDE,
        latitude: data.LATITUDE
      }}
      pinColor={this.state.testColor}
    />
)}
)};

onPressMarker(e, index, data) {
   this.setState({testColor:"#000000"});
}
}

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

Спасибо за вашу помощь.


react-native react-native-maps
person Alexander Chef    schedule 23.12.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

    constructor(props) {
      this.state = {
        selectedPin: -1,
      }
    }

    ListMarkers = () => {
    return this.state.data.map((data, i) => {
      return (
        <Marker
          key={i}
          onPress={e => this.onPressMarker(e, i, data)}
          coordinate={{
            longitude: data.LONGITUDE,
            latitude: data.LATITUDE
          }}
          pinColor={ i === this.state.selectedPin ? '#FF0000' : '#FFFFFF'}
        />
    )}
    )};

    onPressMarker = (e, index, data)=> {
       this.setState({selectedPin:index});
    }
person Mariano Miani    schedule 23.12.2018
comment
Привет, Мариано, я попробовал твое решение, но оно не работает. - person Alexander Chef; 24.12.2018
comment
Я только что понял, что # 000000 не работает. После того, как я изменил его на красный, теперь он работает. Спасибо. - person Alexander Chef; 24.12.2018
comment
Мариано, вы тестировали это на Android или iOS? Он работает с ios, но в приложении для Android произошел сбой :( вывод -----------> Попытка удалить индекс представления выше количества дочерних элементов 0 тег просмотра: 1455 подробно: тег просмотра: 1455 детей (0): [ ], indexToRemove(1): [ 0, ], tagsToDelete(1): [ 2453, ] - person Alexander Chef; 24.12.2018