在Expo中为react-native-maps的MapView组件配置showUserLocation权限

1. 配置Expo权限声明 #

在项目根目录的app.json（或app.config.js）中添加位置权限配置，Expo依赖这些配置向系统发起权限申请：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSLocationWhenInUseUsageDescription": "需要访问您的位置以显示地图定位"
      }
    },
    "android": {
      "permissions": [
        "ACCESS_FINE_LOCATION",
        "ACCESS_COARSE_LOCATION"
      ]
    }
  }
}

• iOS必须填写NSLocationWhenInUseUsageDescription，否则权限请求会直接失败；
• Android需声明ACCESS_FINE_LOCATION和ACCESS_COARSE_LOCATION两个权限，确保能获取精确/粗略位置。

2. 修复组件中的useEffect问题 #

你的代码里useEffect没有依赖数组，会导致组件渲染时无限重复执行权限请求和位置获取，修改如下：

useEffect(() => {
  // 仅当Modal显示时执行逻辑
  if (!show) return;
  
  (async () => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      setErrorMsg('Permission to access location was denied');
      return;
    }
    let location = await Location.getCurrentPositionAsync({});
    setLocation(location);
  })();
}, [show]); // 添加依赖数组，仅当show状态变化时触发

3. 补充优化点 #

• showUserLocation={true}需要位置权限已授予，否则地图不会显示用户位置；
• 可添加权限拒绝后的引导，比如跳转系统设置页面（需导入import * as Linking from 'expo-linking'）；
• 确保已安装expo-location依赖：执行npx expo install expo-location。

修改后的完整组件代码：

import MapView, { Marker, Callout } from 'react-native-maps';
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Modal, Button } from 'react-native';
import * as Location from 'expo-location';
import * as Linking from 'expo-linking';

export default function Map(props) {
  const { handler, show } = props;
  const [location, setLocation] = useState({ coords: { longitude: 0, latitude: 0 } });
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    if (!show) return;

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

    getLocation();
  }, [show]);

  let text = "waiting...";
  if (errorMsg) {
    text = errorMsg;
  }

  return (
    <Modal animationType='slide' transparent={true} visible={show}>
      <View style={styles.container}>
        <Button title='CLOSE' color='white' onPress={handler} />
        {errorMsg && (
          <Button 
            title="Open Settings" 
            onPress={() => Linking.openSettings()} 
          />
        )}
        <MapView 
          showUserLocation={true}
          style={styles.map} 
          initialRegion={{
            latitude: location.coords.latitude || 37.78825,
            longitude: location.coords.longitude || -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
          <Marker 
            coordinate={{
              latitude: location.coords.latitude,
              longitude: location.coords.longitude
            }} 
            pinColor='black'
          >
            <Callout>
              <Text>I'm here</Text> 
            </Callout>
          </Marker>
        </MapView>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  container: {
    height: '80%',
    margin: 10,
    marginTop: '30%',
    padding: 10, 
    paddingTop: 0,
    backgroundColor: '#2997FF',
    borderRadius: 10,
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  map: {
    width: '100%',
    height: '92%',
  },
  paragraph: {
    margin: 50
  }
}); 

内容的提问来源于stack exchange，提问作者Aarya Chamkeri