During my study in RN, due to the time and version of online tutorials, many norms have become outdated and many holes have been stepped in. Later also is unceasingly gropes all the way, builds successfully finally. In view of this, I intend to document the entire process, explaining as much as possible the construction process and the solutions to the problems that occurred during the process.

A friendly note before we begin:

2. Please refer to the official documents. Due to some reasons, the documents on the Official Website of Chinese RN have not been updated in time

Chinese RN website: reactnative. Cn/English RN website: reactnative. Dev /

RN’s environment configuration

1. Install Node whose version must be later than 12

2, switch NPM Taobao image source to speed up the download of the following project files

  • NRM switches to the taobao image source: NPX NRM use Taobao
  • NRM Switch to the official image source: NPX NRM use NPM

3. Download JAVA JDK1.8 (also called JDK8)

  • Note: It is best to use the default installation path and save the JDK installation path
  • Configure JAVA environment Variables: Right click on my computer – Properties – Advanced System Settings – Environment Variables

  • Add the following variables in turn
    • JAVA_HOME: JDK installation path for example :C:\Users\ WGZ \AppData\Local\Android\Sdk
    • Path: % JAVA_HOME % \ bin
  • Verify that the JAVA environment is configured successfully
    • Enter Java in the command bar

    • Enter Java in the command bar

4. Download Android Studio and install the relevant SDK

  • Note: Android Studio installs some SDKS by default, so it’s best to use the proxy via the Scientific Web during this time. Otherwise, the installation may fail

  • Enter the SDK configuration interface: After android Studio is successfully installed, click Configure–SDK Manager in the initialization interface to enter the SDK configuration interface

  • Installing SDK Components

    • Enter”SDK Platforms“TAB and click on the lower right corner to display details. The installationAndroid SDK Platform 29 和 Intel x86 Atom_64 System Image(Official emulator image file, using unofficial virtual machine can not install)

    • Enter”SDK Tools“TAB, make sure you have it installedAndroid SDK Build-Tools 的 29.0.2Of course, you can install other versions at the same time; The installationNDK 的 20.1.5948944version

  • Configuring the Android Environment

    • ANDROID_HOME: Android SDK installation path default: C:\Users\ your user name \AppData\Local\Android\ SDK, SDK configuration interface at the top of the installation path
    • Path:

      %ANDROID_HOME%\platform-tools

      %ANDROID_HOME%\emulator

      %ANDROID_HOME%\tools

      %ANDROID_HOME%\tools\bin

  • Check whether the Android environment is configured successfully

    • CMD Window inputadb

Project construction of RN

Matters needing attention:

  • 1. Chinese – is not allowed in the project path
  • 2. Do not use keywords such as react, react-native, or RN as the project directory name

1. Switch the NPM image source and create an RN project

Use NPM Taobao image source, try not to use CNPM install dependency. Switch to NPM Image source: NPX NRM use Taobao Switch to official NPM image source: NPX NRM use NPM Create RN project: NPX React-native Init AwesomeProject

2. Change the Maven image

After the project is created successfully, the first run needs to install and compile the required data. In order to ensure that these data can be downloaded successfully, we need to replace the Maven image. Find AwesomeProject \ android \ build gradle: all: jcenter () replaced by maven {url ‘maven.aliyun.com/repository/… ‘} all: Google () replaced by maven {url ‘maven.aliyun.com/repository/… ‘}

3. Use the real machine to debug and run the service

In view of android built-in simulator (station) can (five) poor (slag), we use android phone real machine debugging

  • 1. Connect the phone with the data line through the USB interface, and the phone enters the developer option to open USB debugging and allow USB installation
  • 2. Enter ADB Devices on the CMD command line to connect the PC to the phone
  • 3. Run the service in an RN project using NPM script: NPM run Android

Be patient and if there are no problems you will see RN’s Hellow page on your phone

4. You may run into problems

  • Install gradle-6.2-all
    • 1, manual download gradle – 6.2 – all, and put it in AwesomeProject \ android \ gradle \ wrapper folder gradle – 6.2 – all the cloud address: link: pan.baidu.com/s/1iaeaf7xR… The extracted code: iqjm
    • 2. Open gradle-wrapper.properties in the same folder and change the dependent access path: distributionUrl=gradle-6.2-all.zip

  • Other errors:
    • One time, I had a successful project running on my own computer, but kept getting errors on my company’s computer indicating that there was a problem with the classpath. Later I checked and found that the maven mirror address in someone else’s tutorial had been changed. Later I found a new address on RN’s official website. Therefore, if there is any problem, the configuration on the official website should prevail.

The last

We believe that the process of establishing RN may not be very smooth, if you need help or technical exchanges with the same monkey welcome to add V: GG_0632