Почему анимация для MapView.Marker в моем собственном режиме реакции не работает?

Question

Я создал вид карты и некоторые маркеры, используя MapView.Marker.Я переключаюсь между маркерами, используя вид прокрутки.Переключатель работает нормально, центрируя текущий маркер.

Также я создал анимацию, когда пользователь переключается на текущий маркер.Для этого я использовал интерполяции (непрозрачность и масштаб).Однако анимация не работает .Я сейчас тестирую на Android.Вот мой код:

   const interpolations = this.state.markers.map((marker, index) => {
          const inputRange = [
            (index - 1) * CARD_WIDTH,
            index * CARD_WIDTH,
            ((index + 1) * CARD_WIDTH),
          ];
          const scale = this.animation.interpolate({
            inputRange,
            outputRange: [1, 2.5, 1],
            extrapolate: "clamp",
          });
          const opacity = this.animation.interpolate({
            inputRange,
            outputRange: [0.35, 1, 0.35],
            extrapolate: "clamp",
          });
          return { scale, opacity };
        });

        return (
          <View style={styles.container}>
            <MapView
              ref={map => this.map = map}
              initialRegion={this.state.region}
              style={styles.container}
            >
              {this.state.markers.map((marker, index) => {
                const scaleStyle = {
                  transform: [
                    {
                      scale: interpolations[index].scale,
                    },
                  ],
                };
                const opacityStyle = {
                  opacity: interpolations[index].opacity,
                };
                return (
                  <MapView.Marker key={index} coordinate= {{latitude: marker.location.coordinates[0], longitude: marker.location.coordinates[1]}}>
                    <Animated.View style={[styles.markerWrap,opacityStyle]}>
                      <Animated.View style={[styles.ring, scaleStyle]} />
                      <View style={styles.marker} />
                    </Animated.View>
                  </MapView.Marker>
                );
              })}
            </MapView>


  markerWrap: {
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 17,
    borderWidth: 2,
    overflow: "hidden",
    width: 24,
    height: 24,
    borderColor: "rgba(130,4,150, 0.5)",
    backgroundColor: "rgba(130,4,150, 0.3)",
    position: "absolute",
  },
  marker: {
    borderRadius: 4,
    borderWidth: 1,
    width: 8,
    height: 8,
    backgroundColor: "rgba(130,4,150, 0.9)"
  },
  ring: {
    width: 24,
    height: 24,


  },

Пожалуйста, дайте знать ваше предложение.

Спасибо

Answer 1

Это известная проблема.Следующее было добавлено в официальные документы 3 года назад -

Проблема: Поскольку android необходимо отображать свои представления маркеров в виде растрового изображения, API-интерфейсы анимации могут быть несовместимы с представлениями маркеров.Не уверен, что это можно обойти или нет.

Вы можете найти его здесь - https://github.com/react-native-community/react-native-maps, в разделе «Использование MapView с Animated API».