ios - 使用 React Native 中的 Uber 或 Ola 等动画在谷歌地图上旋转标记

Question

我正在做一个类似于 UBER 或 OLA 的项目。我为此使用了react-native-maps库。我使用 React Native 地理位置来获取当前位置。我还参考了这个react-native-maps 示例。但标记的旋转不起作用。谁能帮忙？我哪里错了？

这段代码在 Android 上运行良好，但在 iOS 上不行

提前致谢。

下面我分享我的代码

render(){
     return(
           <MapView
              ref={component => (this.map = component)}
              provider={PROVIDER_GOOGLE}
              style={styles.mapStyle}
            >

              <Marker. Animated
                coordinate={{
                  latitude: this.state.currentLocation.latitude,
                  longitude: this.state.currentLocation.longitude
                }}
                ref={marker => {
                  this.marker = marker;
                }}
                flat
                style={{
                  transform: [
                    {
                      rotate:
                        this.state.currentLocation.heading === 
                   undefined
                          ? "0deg"
                          : `${this.state.currentLocation.heading}deg`
                    }
                  ]
                }}
                image={"rickshaw"}
              />
)}

我已经更新了componentDidUpdate中的标记位置

 componentDidUpdate(prevProps, prevState) {
    if (prevState.currentLocation !== this.state.currentLocation) {
      let newCoordinate = this.state.currentLocation;
      let previousLocation = prevState.currentLocation;
      if (utility.getOS() === "android") {
        console.log("update marker");
        if (this.marker) {
          this.marker._component.animateMarkerToCoordinate(
            this.state.currentLocation,
            1000
          );
        }
      } else {
        if (newCoordinate !== null && previousLocation !== null) {
          const oldCoordinate = new AnimatedRegion({
            latitude: previousLocation.latitude,
            longitude: previousLocation.longitude
          });
          oldCoordinate.timing(newCoordinate).start();
        }
      }
    }
  }

标签： iosreact-nativegeolocationreact-native-maps