在React Native Expo中获取当前位置遇权限报错的解决方案咨询

核心问题分析 #

你遇到的「Error requesting location permission」「Not authorized to use location services」错误，主要是因为Expo环境下误用原生React Native的PermissionsAndroid API，加上缺少必要权限配置、代码细节错误导致的。

修复步骤 #

1. 改用Expo官方位置权限API #

Expo有专门的expo-location库处理位置功能，不要用原生的PermissionsAndroid。先确保安装依赖：

npx expo install expo-location

2. 修改权限请求逻辑 #

替换原有getLocation函数，适配Expo权限流程：

import * as Location from 'expo-location';

// ... 其他代码

const getLocation = async () => {
  try {
    // 请求前台位置权限
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      setLocationError('位置权限被拒绝');
      return;
    }

    // 获取当前位置
    let location = await Location.getCurrentPositionAsync({});
    console.log(location);
    fetchWeatherData(location.coords.latitude, location.coords.longitude);
  } catch (error) {
    console.error('请求位置权限出错:', error);
  }
};

3. 添加App配置文件的权限声明 #

在项目根目录的app.json（或app.config.js）中，添加对应平台的权限配置：

{
  "expo": {
    // ... 其他配置
    "android": {
      "permissions": ["ACCESS_FINE_LOCATION", "ACCESS_COARSE_LOCATION"]
    },
    "ios": {
      "infoPlist": {
        "NSLocationWhenInUseUsageDescription": "WeatherApp需要获取你的位置来查询天气信息"
      }
    }
  }
}

• Android需声明ACCESS_FINE_LOCATION和ACCESS_COARSE_LOCATION权限
• iOS必须在infoPlist中添加位置权限说明，否则会直接拒绝授权

4. 修复天气API请求的语法错误 #

原代码中fetch的URL用了单引号，模板字符串变量无法解析，且缺少参数分隔符?，修改为：

const response = await fetch(
  `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=3d9b9b12834e4fca69c88401aeb73c2e`
);

5. 修正异步状态打印问题 #

React的setState是异步操作，原代码中直接打印weatherData无法获取最新值，改用useEffect监听状态变化：

useEffect(() => {
  if (weatherData?.main) {
    console.log(weatherData.main.temp);
  }
}, [weatherData]);

完整修复后的代码示例 #

import { useEffect, useState } from 'react';
import * as Location from 'expo-location';

export default function WeatherScreen() {
  const [weatherData, setWeatherData] = useState(null);
  const [locationError, setLocationError] = useState('');

  useEffect(() => {
    const fetchWeatherData = async (latitude, longitude) => {
      try {
        const response = await fetch(
          `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=3d9b9b12834e4fca69c88401aeb73c2e`
        );
        const json = await response.json();
        setWeatherData(json);
      } catch (error) {
        console.error('获取天气数据出错:', error);
      }
    };

    const getLocation = async () => {
      try {
        let { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
          setLocationError('位置权限被拒绝');
          return;
        }

        let location = await Location.getCurrentPositionAsync({});
        console.log(location);
        fetchWeatherData(location.coords.latitude, location.coords.longitude);
      } catch (error) {
        console.error('请求位置权限出错:', error);
      }
    };

    getLocation();
  }, []);

  // 监听weatherData变化后打印温度
  useEffect(() => {
    if (weatherData?.main) {
      console.log(weatherData.main.temp);
    }
  }, [weatherData]);

  return (
    // 你的UI代码
  );
}

内容的提问来源于stack exchange，提问作者Siddhi Naik