React Native项目集成高德地图SDK

前言：近期在做一个社交app，技术选型定为了react native expo框架。对于初出茅庐的我来说，react native框架只是略懂皮毛，但也只能硬着头发开发了。总所周知RN框架的第三方地图sdk开源的是少之又少，所以我选了react-native-amap3d这个sdk去对接高德地图。

技术简介

react-native-amap3d是github上开源的react-native 高德地图组件，使用最新 3D SDK，支持 Android + iOS，受 react-native-maps 启发，提供功能丰富且易用的接口。

集成步骤

步骤一

安装

npm i react-native-amap3d

步骤二

添加并配置高德地图API的Key

import { AMapSdk } from "react-native-amap3d";
import { Platform } from "react-native";

AMapSdk.init(
Platform.select({
android: "c52c7169e6df23490e3114330098aaac",
ios: "186d3464209b74effa4d8391f441f14d",
})
);

步骤三

编写展示地图的代码

import React, { useEffect } from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { MapView, Marker, AMapSdk } from 'react-native-amap3d';

export default function MapScreen() {
useEffect(() => {
// 初始化 SDK（使用你项目中已配置的 Key）
AMapSdk.init(
Platform.select({
android: "c52c7169e6df23490e3114330098aaac",
ios: "186d3464209b74effa4d8391f441f14d",
})
);
}, []);

return (
<View style={styles.container}>
<MapView
style={styles.map}
initialCameraPosition={{
target: { latitude: 39.90923, longitude: 116.397428 },
zoom: 15,
}}
>
<Marker
position={{ latitude: 39.90923, longitude: 116.397428 }}
title="北京天安门"
/>
</MapView>
</View>
);
}

const styles = StyleSheet.create({
container: { flex: 1 },
map: { flex: 1 },
});

步骤四

第四步就是配置android和ios的原生配置了！ iOS的配置： 在 `ios/Podfile` 中添加： pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/lib/ios' 在 `ios/YourApp/Info.plist` 中添加： <key>AMapApiKey</key><string>YOUR_IOS_API_KEY</string>

Android 配置： 在 `android/settings.gradle` 中添加： include ':react-native-amap3d' project(':react-native-amap3d').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-amap3d/lib/android') 在 `android/app/build.gradle` 中添加： dependencies {  implementation project(':react-native-amap3d') }

步骤五

这一步也是本人踩坑的一个步骤。github上并没有写明这个问题。就是页面上点击导航返回或者点击其他操作时，应用会出现闪退的情况，刚碰到时我尝试用ai解决但依旧无果后，我上网查阅了一些资料找到了解决方法！ 在 `android/app/src/main/AndroidManifest.xml` 中配置： <application android:allowNativeHeapPointerTagging="false"> </application> 这样就可以解决闪退问题了！

总结

通过本文的详细介绍，相信大家已经完全掌握了 React Native 高德地图闪退问题的解决方案。高德地图集成虽然会遇到一些坑，但只要掌握了正确的方法，就能轻松解决。希望这篇文章能帮助到正在为此问题困扰的开发者们！ 如果觉得这篇文章对你有帮助，别忘了点赞收藏哦~