Expo环境下React Native Maps当前位置按钮不显示如何解决

react-native-maps 接入Google Maps provider时，「我的位置」按钮的渲染有硬性前置条件：应用已拿到前台定位权限、设备全局定位服务处于开启状态，两个条件缺一不可。仅在组件props里开启showsMyLocationButton、showsUserLocation不会自动触发权限申请，这就是为什么地图瓦片、指南针、比例尺、路况图层都能正常显示，唯独定位按钮不出现的根本原因。

• 安装定位依赖
  Expo项目统一使用expo-location模块处理定位权限申请与定位能力，执行以下命令安装兼容当前Expo SDK的版本：

  npx expo install expo-location
  

• 主动申请运行时定位权限
  不要等MapView组件自行处理权限，在页面加载时主动触发权限申请，拿到权限后再渲染MapView，避免组件初始化时权限状态为拒绝、后续权限通过后不自动挂载按钮的问题，参考代码：

  import { useState, useEffect } from 'react';
  import { View, Alert } from 'react-native';
  import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
  import * as Location from 'expo-location';
  
  export default function MapPage() {
    const [locationGranted, setLocationGranted] = useState(false);
    const [region, setRegion] = useState({
      latitude: 39.9042,
      longitude: 116.4074,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    });
  
    useEffect(() => {
      (async () => {
        const { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
          Alert.alert('权限提示', '未授予位置权限将无法显示当前位置按钮');
          return;
        }
        setLocationGranted(true);
      })();
    }, []);
  
    return (
      <View style={{flex: 1}}>
        {locationGranted && (
          <MapView
            style={{flex: 1}}
            showsUserLocation={true}
            showsTraffic={true}
            showsCompass={true}
            provider={PROVIDER_GOOGLE}
            initialRegion={region}
            showsMyLocationButton={true}
            showsScale={true}
          />
        )}
      </View>
    )
  }
  

• 补充Expo配置声明
  打开项目根目录的app.json，补充两端的权限声明，避免编译时缺失必要权限配置：

  {
    "expo": {
      "ios": {
        "infoPlist": {
          "NSLocationWhenInUseUsageDescription": "需要获取位置权限以在地图上展示你的当前位置"
        }
      },
      "android": {
        "permissions": ["ACCESS_FINE_LOCATION", "ACCESS_COARSE_LOCATION"]
      }
    }
  }
  

• 生效操作
  • 如果你使用标准Expo Go调试，重启Expo服务即可
  • 如果你使用自定义开发客户端，配置完app.json后需要执行npx expo prebuild --clean清理旧的原生配置，再重新编译安装客户端，新的权限配置才会生效

如果以上步骤完成后按钮仍未显示，依次检查以下项：

• 确认设备系统层级的定位服务总开关已开启，没有全局禁用定位
• 确认安装react-native-maps时使用的是npx expo install react-native-maps命令，而非直接npm/yarn安装最新版，避免版本和Expo SDK不兼容导致的隐性bug
• 检查MapView的父容器是否设置了overflow: hidden或者过小的尺寸，避免按钮被布局裁剪（如果指南针、比例尺控件正常显示可排除此项）

内容的提问来源于stack exchange，提问作者Ricky Anwar