React Native使用高德地图

在React Native项目中使用高德地图，主要涉及到几个关键步骤：安装高德地图相关的React Native模块、配置项目、申请高德地图API Key、以及在实际组件中使用高德地图功能。以下是一个详细的步骤指南：

一、安装高德地图React Native模块

首先，你需要选择一个适合的高德地图React Native模块。目前有几个流行的选择，如react-native-amap-location、react-native-amap3d等。这里以react-native-amap-geolocation为例（注意：具体模块名称可能随时间变化，请以最新文档为准）。

使用npm或yarn安装模块：

npm install react-native-amap-geolocation --save
# 或者
yarn add react-native-amap-geolocation

配置Android和iOS项目：
- Android：
  - 在android/app/build.gradle文件中添加高德地图定位SDK的依赖。
  - 在AndroidManifest.xml中添加必要的权限，如ACCESS_FINE_LOCATION和ACCESS_COARSE_LOCATION。
  - 配置settings.gradle和app/build.gradle以包含高德地图模块。
- iOS：
  - 在ios/Podfile中添加高德地图模块的依赖，并运行pod install。
  - 在Info.plist中添加必要的权限和配置。

二、申请高德地图API Key

访问高德地图开放平台（高德地图开放平台），注册并登录账号。
创建一个新应用，并填写应用信息，包括包名、SHA1等。
提交申请后，你将获得一个API Key，这个Key将用于你的应用中以访问高德地图服务。

三、在React Native组件中使用高德地图

导入模块：

import { init, getCurrentPosition } from 'react-native-amap-geolocation';

初始化模块并请求位置权限：

async function setupGeolocation() {
  await PermissionsAndroid.requestMultiple([
    PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
    PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION
  ]);
  await init({
    ios: "YOUR_IOS_API_KEY",
    android: "YOUR_ANDROID_API_KEY"
  });
  getCurrentPosition(({ coords }) => {
    console.log(coords);
  });
}

useEffect(() => {
  setupGeolocation();
}, []);