React Native Expo应用中Google Map无法显示用户当前位置问题

问题现象 #

冷启动应用时，GoogleMapView组件内的useEffect未触发控制台打印location，地图也不显示用户当前位置；修改代码热重载后，能正常打印location并显示位置，但再次冷启动又恢复异常。

问题原因 #

核心问题在GoogleMapView的useEffect依赖项设置：

• 你的useEffect依赖数组为空[]，这意味着它只会在组件第一次挂载时执行一次。
• 而App.js中获取用户位置是异步操作（请求权限+获取当前位置），组件挂载时location还处于初始的null状态，所以useEffect内的逻辑不会执行。
• 热重载时，App.js已经完成了位置获取，location已有值，此时组件重新挂载，useEffect就能触发逻辑。

另外，mapRegion的初始值设为数组[]也有问题，MapView的region需要接收对象类型，初始值不匹配可能引发额外错误。

解决方案 #

1. 将location加入GoogleMapView的useEffect依赖数组，确保当location从null更新为实际位置数据时，useEffect重新执行。
2. 把mapRegion的初始值改为符合格式的默认对象，避免地图初始化报错。

修改后的代码 #

GoogleMapView组件 #

import { View, Text, StyleSheet } from 'react-native'
import React, { useContext, useEffect, useState } from 'react'
import MapView, { PROVIDER_GOOGLE } from "react-native-maps"
import { Dimensions } from 'react-native'
import { UserLocationContext } from '../../Context/UserLocationContext'

export default function GoogleMapView() {
    // 初始值改为默认区域对象，可根据需求调整
    const [mapRegion, setmapRegion] = useState({
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0522,
        longitudeDelta: 0.0421,
    })
    const { location } = useContext(UserLocationContext)

    useEffect(() => {
        if (location) {
            console.log("User location", location)
            setmapRegion({
                latitude: location.coords.latitude,
                longitude: location.coords.longitude,
                latitudeDelta: 0.0522,
                longitudeDelta: 0.0421,
            })
        }
    }, [location]) // 加入location作为依赖项

    return (
        <View style={{ marginTop: 20 }}>
            <Text style={styles.text}>Top Near By Places</Text>
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    showsUserLocation={true}
                    provider={PROVIDER_GOOGLE}
                    region={mapRegion}
                />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    map: {
        width: Dimensions.get("screen").width * 0.93,
        height: Dimensions.get("screen").height * 0.23,
        alignSelf: "center",
    },
    container: {
        borderRadius: 20,
        overflow: "hidden"
    },
    text: {
        fontWeight: "bold",
        fontSize: 16,
        marginBottom: 10
    }
})

额外优化建议 #

• 在App.js中可以添加加载状态，比如显示ActivityIndicator，直到位置获取完成或权限被拒绝，提升用户体验。
• 处理位置获取失败的情况，比如在GoogleMapView中显示错误提示。

内容的提问来源于stack exchange，提问作者Muskan Verma