Javascript 反应本机：获取反应本机贴图的旋转角度

我正在建立一个跟踪司机的用户界面，我更新了轨迹和方向。。。 对于自定义标记，我使用了变换和驱动程序标题值的旋转，标记与标题对应的动画效果非常好，但问题是当我旋转地图时，在旋转地图后，标记不会沿着地图旋转， 是否有任何可能的方法可以旋转地图并保持标记的旋转

import React from 'react';
import { View, StyleSheet, Platform, Image } from 'react-native';
import MapView, { AnimatedRegion } from 'react-native-maps';
import { connect } from 'react-redux';
import { Card, Heading, Text, Button } from '@shoutem/ui';
import { Icon } from 'react-native-elements';
import { DARK } from '../../config';
import * as actions from '../../actions';
import { Loading } from '../../components/common';

const DEFAULT_PADDING = { top: 40, right: 40, bottom: 40, left: 40 };
const IUST = {
    latitude: 33.9260206, longitude: 75.0173499
};
let IntervalFlag = 0;
//Because without this componentWillUpdate will call setInterval as many times componentUpdates

class TrackDriver extends React.Component {
  state = {
    loading: true,
    error: false,
    coordinate: new AnimatedRegion({
      latitude: IUST.latitude,
      longitude: IUST.longitude,
    }),
  }
  onDone = (loadingFlag, error) => {
    this.setState({ loading: loadingFlag });
    this.setState({ error });
  }
  onLayout = () => {
    const { origin, des } = this.props.liveLocation;
    console.log(origin);
    console.log(des);
    setTimeout(
        () => {
            try {
                this.map.fitToCoordinates([{ latitude: Number(origin.lat), longitude: Number(origin.lng) }, { latitude: Number(des.lat), longitude: Number(des.lng) }], {
                    edgePadding: DEFAULT_PADDING,
                    animated: true,
                });
            } catch (e) {
                console.error(e);
            } 
        }, 1000
    );   
}
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  componentDidMount() {
    IntervalFlag = 0;
    this.setState({ loading: true });
    const { navigation } = this.props;
    const pool = navigation.getParam('pool');
    this.props.getJourneyState(pool, this.onDone);
  }  
  componentWillReceiveProps(nextProps) {
    const duration = 1000;

    if (this.props.liveLocation.origin !== nextProps.liveLocation.origin) {
      const newCoordinate = {
        latitude: Number(nextProps.liveLocation.origin.lat),
        longitude: Number(nextProps.liveLocation.origin.lng)
      };


      if (Platform.OS === 'android') {
        if (this.marker) {
          this.marker._component.animateMarkerToCoordinate(
            newCoordinate,
            duration
          );
        }
      } else if (this.props.liveLocation.origin != null) {
        const oldCoordinate = {
          latitude: Number(this.props.liveLocation.origin.lat),
          longitude: Number(this.props.liveLocation.origin.lng)
        };
        oldCoordinate.timing(newCoordinate).start();
        }
    }
  }
  componentWillUpdate() {
    const { navigation, liveLocation } = this.props;
    const pool = navigation.getParam('pool');
    if (this.state.loading === false && IntervalFlag === 0) {
      IntervalFlag = 1;
      this.interval = setInterval(() => this.props.trackDirections(pool, liveLocation.des), 3000);
     }
  }

  renderContent() {
    if (this.state.loading) {
      return (
        <Loading />
      );
    } else if (this.state.error) {
      return (
        <Card>
            <Heading> No directions available </Heading>
            <Button> 
              <Text> Retry </Text>
              <Icon name='refresh' />
            </Button>
        </Card>
      );
    } 
    if (this.props.liveLocation.origin !== null) {
      const { origin, des, coords } = this.props.liveLocation;
      return (
        <MapView
              provider='google'
              style={{ height: '100%', width: '100%' }}
              ref={ref => { this.map = ref; }}
              initialRegion={{
                latitude: Number(origin.lat),
                longitude: Number(origin.lng),
                longitudeDelta: 0.2,
                latitudeDelta: 0.2
              }}
              onLayout={this.onLayout}
        >
          {origin != null && <MapView.Marker.Animated 
            coordinate={{ latitude: Number(origin.lat), longitude: Number(origin.lng) }}
            ref={marker => { this.marker = marker }}
            style={{ transform: [{
              rotate: origin.heading === undefined ? '0deg' : `${origin.heading}deg`
            }]
          }}
            >
            <Image
              style={{ 
                height: 50,
                width: 50,
                transform: [{
                rotate: '270deg'
                }]
              }}
              source={require('../../assets/car.png')}
            />
          </MapView.Marker.Animated>}

           {des != null && <MapView.Marker 
            coordinate={{ latitude: Number(des.lat), longitude: Number(des.lng) }}
           >
             <Icon name='place' />
             </MapView.Marker>}

          {coords.length > 1 && 
                <MapView.Polyline
                            coordinates={coords}
                            strokeWidth={2}
                            strokeColor="black"
                />
                }
        </MapView>
      );
    }  
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
      {this.renderContent()}
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    liveLocation: state.activepool.liveLocation
  };
};
export default connect(mapStateToProps, actions)(TrackDriver);

从“React”导入React；
从“react native”导入{视图、样式表、平台、图像}；
从“react native maps”导入MapView，{AnimatedRegion}；
从'react redux'导入{connect}；
从'@shoutem/ui'导入{卡片、标题、文本、按钮}；
从“react native elements”导入{Icon}；
从“../../config”导入{DARK}；
将*作为操作从“../../actions”导入；
从“../../components/common”导入{Loading}；
const DEFAULT_PADDING={top:40，right:40，bottom:40，left:40}；
常数={
纬度：33.9260206，经度：75.0173499
};
让IntervalFlag=0；
//因为如果没有此组件，WillUpdate将调用setInterval的次数与ComponentUpdate的次数相同
类TrackDriver扩展了React.Component{
状态={
加载：对，
错误：false，
坐标：新的动画区域({
纬度：IUST.纬度，
经度，
}),
}
onDone=（加载标志，错误）=>{
this.setState（{loading:loadingFlag}）；
this.setState（{error}）；
}
onLayout=（）=>{
const{origin，des}=this.props.liveLocation；
控制台日志（源）；
控制台日志（des）；
设置超时(
() => {
试一试{
this.map.fitToCoordinates（[{纬度：编号（origin.lat），经度：编号（origin.lng）}，{纬度：编号（des.lat），经度：编号（des.lng）}）{
edgePadding：默认的\u填充，
是的，
});
}捕获（e）{
控制台错误（e）；
} 
}, 1000
);   
}
组件将卸载（）{
clearInterval（这个.interval）；
}
componentDidMount（）{
间隔标志=0；
this.setState（{loading:true}）；
const{navigation}=this.props；
const pool=navigation.getParam（'pool'）；
this.props.getJourneyState（pool，this.onDone）；
}  
组件将接收道具（下一步）{
常数持续时间=1000；
if（this.props.liveLocation.origin！==nextrops.liveLocation.origin）{
常数newCoordinate={
纬度：数字（nextrops.liveLocation.origin.lat），
经度：数字（nextrops.liveLocation.origin.lng）
};
如果（Platform.OS==='android'）{
如果（此标记）{
此.marker.\u component.animateMarkerToCoordinate(
新坐标，
期间
);
}
}else if（this.props.liveLocation.origin！=null）{
常数坐标={
纬度：数字（this.props.liveLocation.origin.lat），
经度：数字（this.props.liveLocation.origin.lng）
};
计时（newCoordinate.start（）；
}
}
}
componentWillUpdate（）{
const{navigation，liveLocation}=this.props；
const pool=navigation.getParam（'pool'）；
if（this.state.load==false&&IntervalFlag==0）{
间隔标志=1；
this.interval=setInterval（（）=>this.props.trackDirections（pool，liveLocation.des），3000）；
}
}
renderContent（）{
if（this.state.loading）{
返回(
);
}else if（this.state.error）{
返回(
没有可用的方向
重试
);
} 
if（this.props.liveLocation.origin！==null）{
const{origin，des，coords}=this.props.liveLocation；
返回(
{this.map=ref；}}
起始区={{
纬度：数字（原点纬度），
经度：编号（原点.lng），
纵向德尔塔：0.2，
纬度德尔塔：0.2
}}
onLayout={this.onLayout}
>
{origin！=null&&{this.marker=marker}
样式={{transform:[{
旋转：origin.heading==未定义？'0deg'：`${origin.heading}deg`
}]
}}
>
}
{des！=null&&
}
{coords.length>1&&
}
);
}  
}
render（）{
返回(
{this.renderContent（）}
);
}
}
常量mapStateToProps=状态=>{
返回{
liveLocation:state.activepool.liveLocation
};
};
导出默认连接（MapStateTrops，actions）（TrackDriver）；

您是否尝试过

标记器的
平铺
道具
 你试过
flat
prop的
Marker