Можно ли программно изменить PinView Color MapView Market, нажав любую кнопку? - PullRequest
Новая
       61

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

0 голосов
/ 23 декабря 2018

Я реализовал 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"});
}
}

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

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

1 Ответ

0 голосов
/ 24 декабря 2018

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

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