RN 地图组件 react-native-amap3d

咸鱼吹水时间

几个月没更新了，突然恢复更新就挺突然的，因为作者懒癌犯了，虽然已经辞去了知道创宇的工作，但是还是没腾出时间来更新博客，就挺颓然的，哈哈，不过最近作者良心发现，诶~他突然就更新一篇博客，给你们来个措手不及，停更的原因呢是因为这几个月呢由于毕业论文和考驾照还有陪某人high，啊！导致时间非常的紧张啊，资金呢也是非常的紧张（心疼我的钱包虽然我没钱包），所以停更，那为啥又突然更新呢，因为孩子在写毕业设计的时候啊遇到了一个小小的问题，诶！让我花费了一下午的时间解决，上了各大论坛StackOverflow啊，掘金啊啥的太费劲了，所以写下此篇文章，希望能够帮助到有需要的同学，ok话不多说，正片来了。本文介绍 RN 高德地图组件react-native-amap3d

准备

首先我们需要获取 获取高德 Key，那么请先到高德申请Key， 申请Key的过程中会有三个字段需要填写，如图所示

SHA1可通过cmd命令获取keytool -list -v -keystore debug.keystore（调试版本）keytool -list -v -keystore apk(开发版本)，可能会遇到如下错误
那么可以接上它的根目录如下所示
如果这样也还是不行，可以尝试如下方式
1、在.android目录下输入keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -validity 10000

出现如图所示，按要求填写即可生成debug.keystore
2、在此电脑搜索debug.keystore此文件，复制到.android目录下即可
至此拿到了SHA1还差PackageName，打开RN 项目的 AndroidManifest.xml文件(Flutter同理)找到package属性将其内容复制粘贴至高德PackageName字段即可。这样就完成了申请高德Key

引入地图组件

我们先安装地图组件

npm i react-native-amap3d`

安装好了就可以引入并使用了

import { MapView } from "react-native-amap3d";

<MapView
  center={{
    latitude: 39.91095,
    longitude: 116.37296
  }}
/>

OK到此基本把问题解决了，更多用法请移步至接口文档

总结

最近使用RN总感觉开发不得劲，感觉写的很慢，是因为我装的RN插件少么，我用的VScode，希望大佬推荐一些好用的插件，这边文章就写到这里了，如果对你有帮助请不要吝啬你们的点赞蟹蟹各位啦。对了作者也接项目，如果有项目可以联系我。作者技能树Vue，RN，Flutter。期待你们联系我，作者QQ：3024346303，暗号：小鸡炖蘑菇。