Как обновить карту в response-native-maps? - PullRequest
Новая
       5

Как обновить карту в response-native-maps?

0 голосов
/ 08 января 2019

Я использовал response-native-maps в моем приложении отслеживания местоположения. А теперь я хочу очистить (обновить) карту со всеми маркерами и полилиниями без обновления компонента реакции, когда пользователь останавливает отслеживание местоположения (с помощью кнопки). Есть ли способ сделать это?

1 Ответ

0 голосов
/ 08 января 2019

В какой-то момент, если вы захотите изменить то, что видно на вашем компоненте в реакции, нет другого пути, кроме как перерисовать ваш компонент.

Я не знаю react-native-maps, но я думаю, что эту проблему можно решить с помощью знаний об общих реакциях.

Маркеры и полигоны в react-native-maps добавляются как дочерние элементы MapView, поэтому в зависимости от того, как вы храните свои маркеры / линии, вы можете просто полагаться на состояние реакции или изменения реквизита для обновления * 1008. *.

Например, если ваши маркеры хранятся в состоянии вашего компонента, вы можете сделать что-то вроде этого: 

class MyLocationTracker extends React.Component {
  state = { markers: [{ latlng: { latitude: 1, longitude: 1 } }] }

  render = () => {
    return (
      <View>
        <Text onPress={() => this.setState({ markers: [] })}>Reset markers</Text>
        <MapView>
          {this.state.markers.map((marker) => <Marker coordinate={marker.latlng} />)}
        </MapView>
      </View>
    )
  }
}

Когда state изменится, реакция снова вызовет функцию render() и обновит маркеры. Обратите внимание, что это также приведет к поиску компонента <MapView />. Если вы хотите избежать перерисовки компонента <MapView />, вы можете переместить логику в новый компонент, который будет обрабатывать только маркеры, например: 

class MyLocationTracker extends React.Component {
  render = () => {
    return (
      <View>
        <Text onPress={this.markers.reset}>Reset markers</Text>
        <MapView>
          <MyMarkers ref={(comp) => { this.markers = comp }} />
        </MapView>
      </View>
    )
  }
}

class MyMarkers extends React.Component {
  state = { markers: [{ latlng: { latitude: 1, longitude: 1 } }] }

  reset = () => {
    this.setState({ markers: [] })
  }

  render = () => {
    return (
      <View>
        {this.state.markers.map((marker) => <Marker coordinate={marker.latlng} />)}
      </View>
    )
  }
}

Опять же, изменения в состоянии приведут к повторному отображению вашего компонента. Но теперь, поскольку меняется только состояние <MyMarkers />, он будет перерисовываться сам, но не что-либо еще.

Надеюсь, это поможет:)

...