React Native Maps 在初始渲染后动画到方位答案

【问题标题】：React Native Maps animate to bearing after initial renderReact Native Maps 在初始渲染后动画到方位
【发布时间】：2017-10-08 00:25:55
【问题描述】：

我试图在组件首次呈现后立即在地图上调用一个方法。在这种情况下，this.map 是未定义的，但它不应该由 ref 设置吗？如何在 componentDidMount 方法中获取对 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,
        }}
      />
    );
  }
}

【问题讨论】：

标签： react-native react-native-maps

【解决方案1】：

看看这个Github issue，你可能不得不使用onLayout而不是componentDidMount。

例如：

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

【讨论】：

我仍然收到 _this2.map.animateToBearing 不是函数的错误
@pjb3 如果您尝试来自airbnb/react-native-maps 的MapView 会怎样？也许expo 中捆绑的MapView 是旧版本

【解决方案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，您可以不断更新标题。

【讨论】：