「这是我参与2022首次更文挑战的第 3 天，活动详情查看：2022首次更文挑战」。

项目准备

提前声明，本文针对的包版本如下： 如果你已经有项目了，请跳过这一步哈~

首先，请举起你的双手，先创建一个lesson4的项目：

npx react-native init lesson4
cd lesson4
yarn ios # 启动安卓
yarn android # 启动ios
复制代码

接下来不出意外，你就能看到那熟悉的页面了，因为我电脑比较渣，所以我只启动了ios端：

看到这个页面之后，再安装一些零零碎碎，如导航、redux等，当然如果你不需要可以不装~

yarn add @react-navigation/bottom-tabs @react-navigation/native @react-navigation/native-stack react-native-elements react-native-safe-area-context react-native-screens react-native-vector-icons react-native-webview redux react-redux redux-saga redux-thunk

cd ios && pod install && cd..
复制代码

还有，不要忘记单独链接下ios包：

cd ios && pod install && cd..
复制代码

安装高德地图

yarn add react-native-amap3d
cd ios && pod install && cd .. 
# 下一步的启动可以在配置key之后再执行
yarn ios
复制代码

配置key

首先创建新应用：

然后需要再配置key，这个ios和android不同，需要分别配置:

iOS

1. 获取高德 Key，关于Bundle ID的获取查看下一步。

2.获取Bundle ID。

用xcode打开lesson4.xcodeproj

最后你就得到了这样的一个key，等下就可以用啦~

项目中使用高德地图

经历了以上磨难，你就可以在ios端使用高德地图啦~

首先修改代码，确保在使用高德地图之前先执行以下代码，比如我就放在了App.js中。

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

AMapSdk.setApiKey(
  Platform.select({
    android: "c52c7169e6df23490e3114330098aaac",
    ios: "186d3464209b74effa4d8391f441f14d",
  })
);
复制代码

接下来启动下项目？No，目前的地图包还有bug，lesson4/node_modules/react-native-amap3d/lib/ios/MapView下有4个文件报错，这个时候我们需要去手动去修改一些代码，如下图所示，把下面代码注释掉即可：

如果你问我为什么知道这些修改，很简单，启动的时候报错了，按照报错信息的提示去修改就可以了~

当然我现在的修改仅仅针对我目前在用的版本号，如果你接下来发现你的版本里有不同的错误，那就自己再根据提示信息修改吧。 接下来就可以完成启动了：

yarn ios
复制代码

但是到这里还没完，因为我们刚刚修改的是node_modules，这个可是每次装都是新文件，这个修改也不可能传到github托管，团队更不可能每个人都要手动维护一份node_modules。那怎么办呢，很简单，打补丁吧~

定制依赖（打补丁）

1. 安装

yarn add patch-package
复制代码

2. 修改package.json，scripts 中加入

 "postinstall": "patch-package"
复制代码

3. 修改 node_modules 中的源码
4. 执行

yarn patch-package react-native-amap3d
复制代码

此时会生成一个如下所示的patches文件：

好了，到现在为止，相信你不仅学到了如何如何在RN中配置高德地图，更学会了定制依赖，如果你想看实现的代码，来这里~