Реагировать на проблему с исходными картами

У меня есть MapView, который используется в функции fitToCoordinates. Функция масштабирует карту, чтобы соответствовать начальной точке (текущему местоположению пользователя) и конечной точке. Ниже представлен объект MapView:

<MapView
      ref={map => { this.map = map; }}
      region={{
        latitude: this.props.startLatitude,
        longitude: this.props.startLongitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421
      }}
      style={styles.mapContainer}
      showsCompass={false}
      showsUserLocation
    >

      <MapViewDirections
        origin={{ latitude: this.props.startLatitude, longitude: this.props.startLongitude }}
        destination={this.props.optimalDestination}
        apikey={GOOGLE_API_KEY}
        strokeWidth={2}
        strokeColor={COLORS.MAIN.hexCode}
      />

      {this.walkLine()}

      {this.optimalAddressFound()}

      {this.fitCoordinates()}

    </MapView>

Функция fitToCoordinates, на которую ссылается объект MapView, выглядит следующим образом:

fitCoordinates() {
if (this.props.optimalAddressFound && this.props.destinationMapFit) {
  this.map.fitToCoordinates(
    [{ latitude: this.props.startLatitude,
      longitude: this.props.startLongitude },
    { latitude: this.props.optimalAddressLat,
    longitude: this.props.optimalAddressLng }],
    { edgePadding: { top: 30, right: 30, bottom: 30, left: 30 } }
  );
 }
}

Все работает нормально, за исключением случаев, когда пользователь открывает меню ящика навигации React, переходит на другую страницу, а затем возвращается на страницу карты. Если они это сделают, ссылка на объект MapView станет неопределенной, и функция fitToCoordinates завершится с ошибкой (TypeError: Cannot ready property 'fitToCoordinates' of undefined).

У меня вопрос: как я могу поддерживать ссылку на карту, если мой пользователь переходит на другие экраны? Я попытался создать функцию для хранения объекта MapView в моем хранилище Redux, но кажется, что хранилище Redux не может принять объект в редукторе.


react-native react-redux react-navigation react-native-maps
person JamesK    schedule 20.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

что-то типа

navigation.navigate({key: 'map-screen', routeName: 'Map'});
person Christian    schedule 20.03.2019
comment
Спасибо за ответ! Поскольку навигация происходит в DrawerNavigator, знаете ли вы, может ли / как ваше предложение работать в DrawerNavigator? - person JamesK; 24.03.2019
comment
да, я, когда вы щелкаете по элементу в ящике, будет вызван вышеупомянутый метод. По ключу Map-Screen всегда вызывается с одним и тем же экземпляром - person Christian; 26.03.2019