Question

我试图在组件首次渲染后立即调用地图上的方法。在这种情况下，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,
        }}
      />
    );
  }
}

Answer 1

查看此Github issue，您可能必须使用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，您可以不断更新标题。

在初始渲染后，React Native Maps动画显示轴承

2 个答案: