Those who have developed ReactNative (RN for short) are often impressed by RN’s hot overload feature.

When you modify the code and save the file, the corresponding screen on your phone or emulator will refresh immediately without needing to reload the page.

But if you want to develop a reusable component, you can’t always use hot overloading as you want.

After a long period of searching and exploring, I have developed a set of methods for developing components efficiently.

Now share, I hope to help friends save time to explore.

If you’re in a hurry, you can skip to heading 3.2

Thermal overloading is an essential tool for efficient development

When you debug a page, you don’t have to re-install the application for every change, you don’t have to re-open the page layer by layer.

This definitely saves developers a lot of time. We really need thermal reloading.

Hot overloading is based on Hot Module Replacement(HMR).

The principle is that Watchman is used in RN to listen for changes to project files, and when changes are found, bundles are updated as patches.

The js code we normally write is packaged into this bundle and executed by the framework.

When developing reusable components, we need to write component code into a separate component project and publish it to NPM for reuse.

Instead of releasing a version of NPM after changing the code and installing it later, we can find some way to debug it locally.

Where does the component code fit?

2.1 Component code in node_modules: easy to clean up accidentally

Sometimes we have to empty node_modules Those who have done RN development will be familiar with this error: “Module XXX does not exist in the Haste Module map”.

If you forget to back up the component code under node_modules that you’re developing.

Then follow the instructions to the second step:

Rm - rf node_modules.Copy the code

At this point, you can better understand these idioms: no tears, no tears, start all over again.

2.2 Component code outside node_modules in App project: Git is not easy to manage

Lazy cancer attacks, if not clear, can leave a message in the comments section, I will discuss

2.3 Component code is placed outside the App project directory: hot reloading is not possible

Lazy cancer attacks, if not clear, can leave a message in the comments section, I will discuss

3 Solution

Failed to use YARN Link. Procedure

Execute at the calling project root:

yarn link "@zhike-private/rn-protocal-view"
Copy the code

Output:

Yarn Link V1.17.3 Success Using linked packagefor "@zhike-private/rn-protocal-view".
✨ Done in0.08 s.Copy the code

This essentially links the component project directory to the calling project node_modules directory.

That’s true for JS, but for RN,

Hehe, can’t work.

3.1 Preliminary solution

Being a tenfold programmer requires dedication, not fear of backing up projects from time to time.

To be a ten-fold programmer, git is indispensable. If you want to submit, you can submit. If you want to back off, you can back off.

To be a tenfold programmer, you need hot reloads to avoid spending time constantly installing and opening pages.

Therefore, to be a tenfold programmer, you must solve the previous problem.

Of the above three problems, the third seems to be the easiest to solve.

We can put the code out of the project and copy it to the node_module directory of the App project if needed.

To facilitate copying, you can also write a copy of the script. It looks perfect.

However, is that enough for you?

Imagine a debugging scenario like this:

Change the code, test the code, see the results change the code, test the code, see the results... Change the code, test the code, see the resultsCopy the code

This code is an eyesore.

3.2 Ultimate solution: WML

This is where the solution is finally found: packages in RN that use synchronous links, but this is a bit verbose.

The summary is as follows:

3.2.1 Role of WML

With WML, you can monitor changes to files in one directory and automatically synchronize that directory to another.

3.2.2 How to use WML installation

yarn global add wml
Copy the code

3.2.3 How to use WML configuration

wml add ~/my-package ~/main-project/node_modules/my-package
Copy the code

3.2.4 How to enable WML

wml start
Copy the code

The advanced

If you are interested, take a look at the.watchmanConfig file generated after WML start.

There are some negligible directories, such as the.git directory and the component’s own node_modules directory.

Of course you can add new ones, such as directories for your component examples.