Expo React Native地图页面首次加载不自动展示当前位置如何解决

问题原因 #

你代码里存在3个核心问题导致无法自动跳转定位：

• 定位成功后没有调用state更新方法，直接给currentLatitude/currentLongitude变量赋值不会触发组件重渲染，地图无法拿到最新坐标
• 坐标初始值设为了unknown字符串，属于非法数值，地图初始加载时识别不了有效区域，就会显示默认全球海洋视图
• watchPosition回调里对坐标做了两次JSON.stringify处理，最终得到的是带双引号的字符串，不是合法的数值类型，地图无法解析

修正方案 #

1. 调整state初始值

// 把初始坐标改成合法的数值，用你之前设置的默认坐标即可
const [currentLatitude, setCurrentLatitude] = useState(37.4214418);
const [currentLongitude, setCurrentLongitude] = useState(126.9891955);

2. 修正定位回调逻辑

把useEffect里的定位逻辑改成如下内容，获取坐标后调用state更新方法，去掉多余的序列化处理：

useEffect(() => {
    (async () => {
        let {status} = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted'){
            setErrorMsg("Permission to access location was denied");
            return;
        }

        // 获取当前位置后更新state
        navigator.geolocation.getCurrentPosition(
            position => {
                setCurrentLatitude(position.coords.latitude);
                setCurrentLongitude(position.coords.longitude);
            },
            error => alert(error.message),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        );
        // 实时监听位置变化更新state
        const watchId = navigator.geolocation.watchPosition(position => {
            setCurrentLatitude(position.coords.latitude);
            setCurrentLongitude(position.coords.longitude);
        });
        setWatchID(watchId);
    })();
    // 组件卸载时清除定位监听，避免内存泄漏
    return() => {
        navigator.geolocation.clearWatch(watchID);
    }
}, []);

可选优化：平滑过渡到当前位置

如果想要更顺滑的跳转效果，可以给MapView绑定ref，拿到定位后调用animateToRegion方法跳转，比直接修改region的跳转动画更自然：

// 先声明map ref
const mapRef = useRef(null);

// 定位成功后调用跳转逻辑
const location = position.coords;
mapRef.current?.animateToRegion({
    latitude: location.latitude,
    longitude: location.longitude,
    latitudeDelta: 0.005,
    longitudeDelta: 0.005
}, 1000); // 1秒过渡动画

// MapView组件绑定ref
<MapView
    ref={mapRef}
    // 其余原有属性保持不变
/>

修正后页面加载拿到定位权限后，就会自动跳转到你的当前位置，不需要手动点击定位按钮。

内容的提问来源于stack exchange，提问作者박나겸