react-native-maps 無法在無狀態組件中引用 MapView

Question

有很多關於如何在類組件中使用 react-native-maps 的示例，但我還沒有找到帶有無狀態組件的示例。 我使用無狀態組件來訪問全局狀態。 獲得用戶位置后，我需要從初始區域移動 MapView 的相機視圖，在互聯網上搜索后，我不知何故以無法正常工作的代碼結束。

import React, { useState, useEffect, useRef } from 'react'
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
...

const Explore = props => {
    const [userCoords, setUserCoords] = useState({
        latitude: 0,
        longitude: 0
    })

    const mapRef = useRef(null);

    onMapReady = () => {
        getUserLocation()
    }

    getUserLocation = async () => {
        Geolocation.getCurrentPosition(
            async (position) => {
                setUserCoords(position.coords)
                mapRef.animateToRegion({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                })
            },
            async (error) => {
                // See error code charts below.
                console.log("Geolocation Error" + error.code, error.message);
            },
            { enableHighAccuracy: true, timeout: 15000 }
        );
    }

    return(
    ...
    <MapView
         ref={mapRef}
         onMapReady={() => onMapReady()}
         region={{
             latitude: userCoords.latitude,
             longitude: userCoords.latitude,
             latitudeDelta: 0.0922,
             longitudeDelta: 0.0421,
             showsUserLocation={true}>
             ...
    </MapView>
    )
...
export default Explore

請幫幫我~謝謝

Answer 1

而不是使用的mapRef.animateToRegion你需要使用mapRef.current.animateToRegion

Answer 2

有很多關於如何在類組件中使用 react-native-maps 的示例，但我還沒有找到那些帶有無狀態組件的示例。 我使用無狀態組件來訪問全局狀態。 在獲得用戶的位置后，我需要從初始區域移動 MapView 的相機視圖，在互聯網上搜索后，我不知何故以無法正常工作的代碼結束。

import React, { useState, useEffect, useRef } from 'react'
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
...

const Explore = props => {
    const [userCoords, setUserCoords] = useState({
        latitude: 0,
        longitude: 0
    })

    const mapRef = useRef(null);

    onMapReady = () => {
        getUserLocation()
    }

    getUserLocation = async () => {
        Geolocation.getCurrentPosition(
            async (position) => {
                setUserCoords(position.coords)
                mapRef.animateToRegion({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                })
            },
            async (error) => {
                // See error code charts below.
                console.log("Geolocation Error" + error.code, error.message);
            },
            { enableHighAccuracy: true, timeout: 15000 }
        );
    }

    return(
    ...
    <MapView
         ref={mapRef}
         onMapReady={() => onMapReady()}
         region={{
             latitude: userCoords.latitude,
             longitude: userCoords.latitude,
             latitudeDelta: 0.0922,
             longitudeDelta: 0.0421,
             showsUserLocation={true}>
             ...
    </MapView>
    )
...
export default Explore

請幫幫我~謝謝