Метод маркера в React-native-maps animateMarkerToCoordinate выдает неопределенную ошибку

Я использую react-native-maps для отображения вида карты в моем Приложение React Native. Я последовал примеру для анимации координаты маркера, но всякий раз, когда я вызываю метод animateMarkerToCoordinate (), я получаю неопределенную ошибку. Я пытаюсь вызвать указанный метод в моем componentWillReceiveProps после некоторых проверок.

Вот мой componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
    if(nextProps.user && JSON.stringify(nextProps.user.profile.location) != JSON.stringify(this.props.user.profile.location)) {
        const userCoordinate = this.state.userCoordinate
        const newUserCoordinate = {
            latitude: nextProps.user.profile.location.latitude,
            longitude: nextProps.user.profile.location.longitude,
        }

        if (Platform.OS === 'android') {
            console.log('platform = android')
            if (this.userMarker) {
                // none of this options work, both return undefined
                this.userMarker._component.animateMarkerToCoordinate(newUserCoordinate, 500)
                this.userMarker.animateMarkerToCoordinate(newUserCoordinate, 500)
            }

        } else {
            userCoordinate.timing(newUserCoordinate).start();
        }
    }
}

А вот часть моего метода рендеринга MapView:

<MapView
  style={styles.map}
  initialRegion={this.regionFrom(this.props.user.profile.location)}
  mapType='standard' >

    <Marker.Animated
      ref={marker => { this.userMarker = marker; }}
      coordinate={this.state.userCoordinate}
      onPress={() => this.handleOnPress()} >
        <UserMarker loaded={this.props.loaded} />
    </Marker.Animated>
</MapView>

И мое состояние, если это может помочь:

constructor(props) {
    super(props);

    this.state = {
        region: this.regionFrom(this.props.user.profile.location),
        profileSelected: null,
        userPreviewVisible: false,
        userCoordinate: new AnimatedRegion({
            latitude: props.user.profile.location.latitude,
            longitude: props.user.profile.location.longitude,
        }),
    }
}

Вот ошибка журнала (такая же ошибка появляется всякий раз, когда я использую marker._component или просто маркер, я попытался изменить ее в коде, чтобы узнать, была ли это проблема):

введите здесь описание изображения

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

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


react-native google-maps android javascript react-native-maps
person Gabriel Schneider    schedule 06.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

  1. Вы использовали Expo или create-react-native-app, который объединяет те же версии библиотек, что и Expo.
  2. Вы используете react-native-maps версию ниже v0.20.0.

Без вашего package.json я не могу сказать, в какой ситуации вы оказались, поэтому я объясню, что происходит в обеих ситуациях.

Дело №1

Последняя версия Expo SDK (v25) обновляется только до _ 4_ v0.19.0. Если вы проследите историю фиксации, вы увидите, что эта функция была добавлена ​​в v0 .20.0. Таким образом, у вас нет возможности использовать этот метод. Вместо этого вам придется использовать тот же код, что и для iOS. Таким образом, вы можете избавиться от всего этого блока if и просто использовать:

userCoordinate.timing(newUserCoordinate).start();

Однако производительность на Android будет ужасной, что послужило причиной для этого исправления.

Дело № 2

Причина та же, что и выше. Вы можете сделать откат и использовать тот же код, что и выше, однако я рекомендовал исправить это, обновив версии react-native и react-native-maps, чтобы вы могли использовать новый метод. Таким образом вы получите более качественную анимацию на Android. Помните о жесткой react-native зависимости от версии, которая есть у react-native-maps. Чтобы уточнить:

  • В настоящее время последний react-native-maps выпуск - это v0.20.1, и он сильно зависит от react-native v0.51.0.
  • Поэтому, если вы использовали v0.20.1 с v0.54.0, ваш проект не запустится, и вы получите ошибки.

Если по какой-то причине вам необходимо использовать более новую версию react-native, я проверил и обнаружил, что установка последней react-native-maps версии из основной ветки позволит ей работать с react-native версиями до последней версии (v0.54.0). Для этого переустановите зависимость react-native-maps с помощью:

# Using yarn:
yarn add https://github.com/react-community/react-native-maps.git

# Using npm:
npm install https://github.com/react-community/react-native-maps.git --save

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

person Michael Cheng    schedule 07.03.2018
comment
Я действительно использую react-native-maps v0.19.0. До вашего ответа я использовал тот же метод, что и для iOS. Я постараюсь перейти на последнюю версию react-native-maps, спасибо. - person Gabriel Schneider; 08.03.2018