“This is the third day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

Project preparation

To be clear, the package versions for this article are as follows: If you already have a project, skip this step

First, put your hands up and create a lesson4 project:

NPX react- Native init Lesson4 CD Lesson4 yarn ios # start Yarn Android # Start iosCopy the code

Then, unsurprisingly, you’ll see the familiar page. Since MY computer is lame, I’ve only launched ios:

After you see this page, install some bits and pieces like navigation, redux, etc., but don’t install them if you don’t need to

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..
Copy the code

Also, don’t forget to link to the ios package separately:

cd ios && pod install && cd..
Copy the code

Install Amap

yarn add react-native-amap3d cd ios && pod install && cd .. The next startup can be yarn ios after the key is configuredCopy the code

Configuration is the key

First of all,Creating a new application:

Ios and Android need to configure the key.

iOS

  1. To obtain the Bundle ID, see the next step.

2. Obtain the Bundle ID.

Open Lesson 4.xcodeProj with Xcode

You end up with a key like this, which you can use later

Amap was used in the project

After that, you can use Amap on ios

Make sure to execute the following code before using Amap, as I did in app.js.

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

AMapSdk.setApiKey(
  Platform.select({
    android: "c52c7169e6df23490e3114330098aaac".ios: "186d3464209b74effa4d8391f441f14d",}));Copy the code

What about the next project? There are 4 files in the lesson4/node_modules/react-native-amap3d/lib/ios/MapView file that have some errors, so we need to manually modify some code, as shown in the following picture.

If you ask me why I know about these changes, it is very simple, when the startup error, follow the error message to modify it

Of course, the changes I’m making now only apply to the version NUMBER I’m currently using. If you find a different error in your version later, you can follow the prompts to make the changes yourself. Now you can complete the boot:

yarn ios
Copy the code

But that’s not the end of the story, because node_modules is the one we’ve just modified, and it’s a new file every time it’s installed, so it’s not going to be uploaded to Github hosting, and it’s not going to be possible for everyone on the team to manually maintain a copy of node_modules. How to do that, very simple, patch ~

Custom dependencies (patching)

  1. The installation
yarn add patch-package
Copy the code
  1. Modify package.json to add to scripts
 "postinstall": "patch-package"
Copy the code
  1. Modify the source code in node_modules
  2. perform
yarn patch-package react-native-amap3d
Copy the code

A patches file will be generated as follows:

Well, by now, you have learned not only how to configure Amap in RN, but also how to customize dependencies. If you want to see the implementation code, go here