preface

First say under the background, development is not to say that do, and recently in a product is made of the React Native, has already released smoothly, of course, but, there is a problem, is packaged for too long, on average, a package to 20 minutes, like late in the project, to play several packages at a stroke, because the company only a packing machine, I have been waiting for, Efficiency is a big issue; I gave feedback to the R&D team about this problem, but I didn’t have time to deal with it, and the R&D team didn’t think it was a big problem, it would be nice if I could use it. But the victim is testing, so I have to rely on myself to solve this problem, so I can build my own environment and follow up this problem by myself

React Native?

Don’t laugh, little brother really don’t know; RN is a popular extension of Facebook’s React framework on the native mobile platform. It supports Android and IOS.

The most important thing is cross-platform!

React, React. Js, React Native

What do these three have to do with each other?

1)React is a basic framework, which provides a set of basic design implementation concepts and cannot be directly used for development, just like marxism for our Party. 2)React. Js is a framework for developing web pages under the guidance of React philosophy. React emerged and evolved at the same time as React. The concepts related to React are all in the React. Js documentation. 3)React Native is for mobile applications. You need the React concept, but you don’t need the React. Js stuff.

Requirements:

1) Learn the basics of JavaScript when learning React Native. 2) Learn about either Android or ios development, because React Native code is occasionally required to implement it

Mixed development

React Native supports hybrid development, which falls into three categories.

1) The UI interface is developed by React Native, but UI event handling is performed by Native code; 2) Package UI widgets implemented using Native code as React Native custom controls; 3) The application interface is switched between React Native interface and the interface of Native code development. React Native’s strength is UI development. In hybrid development, React Native interface should be developed first.

The advantages and disadvantages

Advantages: 1) Can greatly save the development cost, more than 90 percent of the interface can be developed through RN, a code can be adapted to Android and ios; 2) RN has a unique UI implementation framework. With the help of component development, the team size is easier to jump to and achieve the effect of rapid iteration; 3) RN can automatically match mobile phones with different screen sizes by some means, without having to calculate view size and position by itself;

Disadvantages: 1) The memory consumption of RN development program is slightly poor, and the overhead in development mode is tens of meters. After release, the difference is not big, and the memory consumption will be relatively high; 2) Slow running speed; 3) The installation package is larger than the native code in the installation package;

React Native development environment setup

Here is only introduced to build Android under Windows, if it is other platforms or need to build IOS, please go here to view;

node

Nodejs must be installed at least 4.0, so download the latest version of nodejs from the official website.

After the installation is complete, click Start = run = and enter “CMD” =>node -v

If the version number is displayed, the nodeJS installation path is successfully installed. If the version number is not displayed, configure the nodejs installation path to the path environment variable and try again.

Android Studio

Download and install Android Studio directly from the Internet. However, some resources are too slow. Here is a link for version 3.1.2.

Link: https://pan.baidu.com/s/1DZPogc6G78jo9Q6YA8ZNIg password: a5k0Copy the code

After installation, you can directly upgrade to version 3.1.4.

After installation, open the SDK, install the SDK, choose the SDK you need to download, it takes some time, as follows:

After downloading The Android Studio and SDK, configure the environment variables.

Open control Panel - System and Security - System - Advanced System Settings - Advanced - Environment Variables - New and create an environment variable named ANDROID_HOME that points to the directory where your Android SDK is located. The SDK is installed in the following directory by default: C :\Users\ your username \AppData\Local\Android\Sdk add the Android Sdk Tools directory to the PATH variable.Copy the code

Ok, so that’s it for Android configuration, React Native;

Create the React Natice project

1) Install the React-Native command-line tool

npm install -g react-native-cli
Copy the code

If not, switch the mirror source and type the command again:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Copy the code

2) Create the project, go to the working directory, and run:

cd d:
mkdir react-native-jbtest
cd react-native-jbtest
react-native init jbtestproject
Copy the code

Then wait patiently for a while

3) Run Packager

cd jbtestproject
react-native start
Copy the code

If you see this, you can do it;

4) Running Android, keep Packager open, open a new command line window, and run in the project directory:

react-native run-android
Copy the code

The first run requires a few minutes to wait and download gradle dependencies from the web. Normally, you should see something like this:

When you see the above picture, it means that it has been successful, and then you can enjoy the development;

Problems encountered

General this kind of environmental configuration problem, certainly will not be plain sailing, the surface of a sail risk, is actually experienced strong winds and waves;

1) React-native run-android generates an error

2) After the phone is installed, the screen displays red

There e are many solutions online, such as changing host, setting native version to be consistent with JS and other solutions, but I have tried none of them.

Then I switched to a 5.X phone, and suddenly, the error message was this ~

Error: local JS returns error

link

Unable to resolve Module AccessibilityInfo Unable to resolve module AccessibilityInfo Unable to resolve module AccessibilityInfo

Have a look at the following version:

C:\WINDOWS\ System32 >react-native -v react-native cli: 2.0.1 react-native: 0.56.0Copy the code

The online suggestion is to reduce the version, as follows:

C:\WINDOWS\ System32 > NPM uninstall -g react-native-cli removed 41 packages in 3.999s NPM install [email protected] NPM install -g [email protected] Specify react-native init --version="0.55.4" myprojectName when the project is initializedCopy the code

Module build failed: Error: Plugin 0 specified in “base” Provided an invalid property of “default”

Execute the following command:

NPM install - save - dev [email protected]Copy the code

At this point, I finally see this interface, and even the 4.x that had the problem before is working properly.

3) Import an RN project and run the prompt directly

> Could not read script 'C:\Users\jb\gitprojects\jb\node_modules\react-native\react.gradle'
as it does not exist.
Copy the code

Node_modules is not available. How can I solve this problem? Simply execute NPM install under this project

summary

React Native introduces the basics of React Native and how to set up an environment on Windows.

Thank you.