React 原生贴图在初始渲染后对方位进行动画处理

Question

我正在尝试在组件首次渲染后立即在地图上调用方法。在这种情况下，this.map是未定义的，但不应该由 ref 设置吗？如何在组件DidMount方法中获取对MapView的引用？

import React from 'react';
import { MapView } from 'expo';
export default class Map extends React.Component {
  componentDidMount() {
    this.map.animateToBearing(25)
  }
  render() {
    return (
      <MapView
        ref={ref => { this.map = ref }}
        style={{ flex: 1 }}
        mapType="satellite"
        initialRegion={{
          latitude: 39.2741004,
          longitude: -76.6502307,
          latitudeDelta: 0.002,
          longitudeDelta: 0.001,
        }}
      />
    );
  }
}

Answer 1

查看此 Github 问题，您可能必须使用 onLayout 而不是 componentDidMount 。

例如：

<MapView
    ref={ref => { this.map = ref }}
    onLayout={() => this.map.animateToBearing(25)}
    ....
/>

Answer 2

    const [heading, setHeading] = useState(0);
    const cameraView = {
        center: {
            latitude: lat,
            longitude: lng,
        },
        pitch: 10,
        heading: heading,
        altitude: 1,
        zoom: 15
    };
    let getHeading = () => {
        Location.watchHeadingAsync(value => {
            setHeading(value.magHeading)
        });
    };
    useEffect(()=>{
        initialLocation();
        getHeading();
    }, [])

通过使用watchHeadingAsync，您可以不断更新标题。