React Native(TypeScript)位置访问与启用的可行解决方案咨询

核心依赖选择 #

放弃react-native-location-enabler，改用以下两个维护活跃、兼容新版React Native的库：

• react-native-geolocation-service：原生实现的位置获取库，支持TypeScript，性能稳定
• react-native-permissions：统一处理iOS/Android权限请求，适配最新系统权限逻辑

安装与配置 #

1. 安装依赖 #

npm install react-native-geolocation-service react-native-permissions
# 或使用yarn
yarn add react-native-geolocation-service react-native-permissions

2. 原生配置 #

Android（AndroidManifest.xml）

添加权限声明：

<!-- 后台位置权限（按需添加） -->
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
<!-- 前台位置权限 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 声明使用位置硬件 -->
<uses-feature android:name="android.hardware.location.gps" />

iOS（Info.plist）

添加权限描述：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要获取您的位置以提供相关服务</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>需要持续获取您的位置以提供后台服务</string>

完整TypeScript实现代码 #

1. 权限检查与请求 #

import { Platform, Linking } from 'react-native';
import Permissions, { PERMISSIONS, RESULTS } from 'react-native-permissions';
import Geolocation from 'react-native-geolocation-service';

// 请求位置权限
const requestLocationPermission = async (): Promise<boolean> => {
  const permission = Platform.select({
    ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
    android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
  });

  if (!permission) return false;

  const result = await Permissions.request(permission);
  return result === RESULTS.GRANTED;
};

2. 位置服务启用引导 #

// 检查位置服务是否开启
const checkLocationServiceEnabled = async (): Promise<boolean> => {
  try {
    const enabled = await Geolocation.isLocationEnabled();
    return enabled;
  } catch (error) {
    return false;
  }
};

// 引导用户开启位置服务
const promptEnableLocationService = async () => {
  const isEnabled = await checkLocationServiceEnabled();
  if (isEnabled) return;

  if (Platform.OS === 'android') {
    // Android直接跳转到位置设置页面
    await Linking.openSettings();
  } else {
    // iOS通过错误回调触发系统引导弹窗
    Geolocation.getCurrentPosition(
      () => {},
      (error) => {
        if (error.code === Geolocation.PERMISSION_DENIED) {
          // 系统会自动弹出引导用户开启位置服务的弹窗
        }
      },
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 1000 }
    );
  }
};

3. 获取当前位置 #

const getCurrentLocation = async () => {
  // 先检查权限
  const hasPermission = await requestLocationPermission();
  if (!hasPermission) {
    console.log('位置权限未授权');
    return;
  }

  // 检查位置服务是否开启，未开启则引导
  await promptEnableLocationService();

  // 获取位置
  Geolocation.getCurrentPosition(
    (position) => {
      console.log('当前位置:', {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
      });
      // 此处处理获取到的位置数据
    },
    (error) => {
      console.error('获取位置失败:', error.message);
    },
    { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
  );
};

注意事项 #

• Android 12+ 如需后台位置，需额外请求ACCESS_BACKGROUND_LOCATION权限
• iOS 14+ 位置权限弹窗仅会出现两次，后续需引导用户手动前往设置开启
• 测试建议使用真机，模拟器位置服务可能存在异常

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