An overview of the

When front-end programmers use React Native for mobile APP development, environment configuration is a basic but very difficult task

An important project, the official example environment configuration is a bit redundant. This article details React in a lighter way

Native environment configuration, this environment configuration is completed, can be suitable for any Android phone, note is android phone, I test

You can try Android as low as version 4.4 (Samsung Galaxy E7), and RN Chinese recommends android as early as version 4.1

Try not to test with too low a version of the phone.


Installation Environment

Operating system: Win10 professional edition

Mobile phone: a real Android phone or a Nighthian simulator

The dependencies that must be installed are Node, JDK, Yarn, Android SDK, Python2(RN says yes, but I haven’t installed it).


The installation of the Node

It is recommended to download the node version from nodejs.cn. I am currently using version 12.14.1, the official of RN

The Node version must be larger than 10. If you have installed a previous Node version, the version must be larger than 10. From the website

After the load down, directly as the administrator to install, the next step, directly install complete, this process is believed to have no

If yes, open the command line terminal and run the Node -v test. If the version number is displayed, the installation is successful

Check to see if the installation is successful or the environment variables are configured. Another thing to note is to set the NPM image to the country

Inside taobao site, to speed up the download, here recommended a small tool NRM to facilitate the switch image source. Open terminal tool and use

The following command is used to install:

 npm install nrm -gCopy the code

After the installation is complete, run the NRM ls command to display the image source list. The default value is as follows:

Run the NRM use Taobao command to switch to taobao site as follows:




The installation of the Yarn

Yarn is a Facebook alternative to NPM that speeds up the download of Node modules, so be sure to download Yarn.

NPM install yarn -g // Use NPM to install yarn globallyCopy the code

After the installation, run the yarn -v command to check whether the installation is successful. If the version number is displayed, the installation is successful.




JDK installation and configuration

Java SE Development Kit(JDK) download and install

Android apps are inseparable from the JAVA environment, so you need to download and install JDK(version 1.8).

To www.oracle.com/technetwork… Download JDK



After clicking Download, you will be redirected to an Oracler login page, which can only be downloaded after logging in, if you do not have an account

Can register one, is also relatively simple, here does not table. After the download is complete, install as admin l by default, next

Step by step until complete. The screenshot of this step is omitted.


JDK environment variable configuration

1. Right-click my computer and click Properties



2. Click Advanced System Settings. In the dialog box that is displayed, click Advanced and then Environment Variables



3. In the displayed dialog box, set the parameters as follows



4. Click Path in the system variable and then click Edit. In the dialog box that is displayed, set the following parameters



5. After setting the JDK environment variables, open the CLI again and run the Java and javac commands to check 1

If the following parameters are displayed, it indicates that the Settings are successful. Because there are too many parameters, only a small part of them are displayed here.






Download and install the Android SDK

RN’s official website requires you to download and install Android Studio before installing and setting up the Android SDK

The software volume is too large, and it needs to climb over the wall, which is quite troublesome. We can directly download the Android SDK and make necessary configurations

Can, a few simpler than the official website.

1. First open the website www.androiddevtools.cn/, and then pull down to the SDK Tools

Line download, as shown below:



2. Install this software as an administrator and set all the options allowed to use this computer

Remember, remember, remember, important things to say three times, always remember the Android SDK installation path, back

I’m going to open up this manager and download things.




Download the Android SDK

1. According to RN Chinese, the React Native app requires an Android 9 VERSION of the SDK

Various components, for current and future stability, summed up in a total of downloads:

  • The Android SDK Tools 25.2.5

  • The Android SDK Platform – the tools 29.0.5

  • Android SDK Build-tools 29

  • The Android SDK Build – tools 28.0.3

  • The Android SDK Build – tools 28.0.2

  • The Android SDK Build – tools 28.0.1

  • Android SDK Build-tools 28

  • Android SDK Build-tools 27

  • SDK Platform 29

  • Intel x86 Atom System Image 29

  • SDK Platform 28

  • Intel x86 Atom System Image 28

  • SDK Platform 27

    2. Next, open SDK Manager.exe. I put the screenshot here and download the above SDK and components in sequence according to the screenshot.



      



3. This download process depends on your own network speed, but generally will be successful, wait patiently for the installation to complete.


Android environment variable Settings

1. Right-click the computer and click Properties, then advanced, then Environment Variables, and set as follows



2. The Configuration of Android environment variables is complete


The React – Native – Cli installation

1. Install

The React-Native Cli is a command line tool for creating, initializing, updating, and running react-native projects

Enter the following command on the cli to install the package

 npm install react-native-cli -gCopy the code

2. Test Run the react-native -v command to check whether the installation is successful. If the version number is displayed, the installation is successful.




Pack your APP to your phone

1. Prepare an Android phone, connect it to the computer through a cable, and enable USB debugging

2. If you don’t have an Android phone, you can use the Android emulator or you can use the Nighthian emulator

I don’t want to overstate it here.

3. For common mobile phones, you can directly find the developer option in the Settings to open it. If you can’t find it, you can check it on Baidu

4. After the mobile phone successfully connects to the computer, run the detection command ADB Devices. If the device list and id-related words are output

The string proves that the phone and computer are successfully connected. If the device number is not displayed, it indicates that there is a problem with the connection. Be sure to make sure

The phone and computer are normally connected.



5. Run the react-native init project name command to initialize a React-native project

Download dependent packages, may be slower, depending on their network speed, be patient to wait, if there is an error, then re-run life

Initialize again, for example:

 react-native init myAppCopy the code

6. Use the CD myApp command to proceed to this project folder, ensure that the phone and computer connection is normal, and then enter

Command adb Devices to check if the phone is properly connected, and then use the react-native run-Android command

The APP is packaged to the phone

7. If the following screen is displayed, the package is successfully packed.


8. If the Version of Android system is too early and red screen error occurs, you can use the solution of this website, which is correct

Older Versions of Android don’t matter, so try to use them. RN has a lot of solutions

Any problem, almost baidu can solve, the following link is a solution, press this setting after repackaging can be solved.

Blog.csdn.net/weixin_4189…


RN debugging

Use Chrome

To Reload the app

Console.log () prints data,

To test the http://localhost:8081/debugger-u