react-native android virtual machine starts [under windows]

1. Configure the environment

The dependencies that must be installed are: Node, JDK and Android Studio.

Although you can use 任何编辑器to develop applications (write js code), but you still have to install Android Studio to get the tools and environment needed to compile Android applications.

Node, JDK​

We recommend downloading Node and the Java SE Development Kit (JDK) directly using a search engine search

Note that the version of Node should be greater than or equal to 14. After installing Node, it is recommended to set up an npm mirror (Taobao source) to speed up the subsequent process (or use scientific online tools).

Note: Do not use cnpm! The module path installed by cnpm is rather strange, and the packager cannot recognize it normally!

React Native requires Java Development Kit [JDK] 11. You can enter (please note that it is javac, not java) on the command line  javac -versionto view your currently installed JDK version. If the version does not meet the requirements, you can go to Temurin or Oracle JDK to download (the latter download requires registration and login).

React Native versions lower than 0.67 require JDK version 1.8 (officially known as version 8).

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

Yarn​

Yarn is a tool provided by Facebook to replace npm, which can speed up the download of node modules.

npm install -g yarn

After installing yarn, you can use yarn instead of npm, for example, use yarnreplace npm installcommand, use yarn add 某第三方库名replace npm install 某第三方库名.

Android development environment

If you have not been exposed to the Android development environment before, please be prepared that this process is quite tedious. Please 万分仔细read the following instructions carefully, and perform configuration operations in strict accordance with the documentation.

Annotation: Please pay attention! ! ! Domestic users 必须必须必须have stable proxy software, otherwise they will encounter link timeouts or disconnections during the download, installation, and configuration processes, making it impossible to carry out development work. Some proxy software may only provide browser proxy functions, or only proxy for specific websites, etc. Please research and configure by yourself or replace other software. In short, if there is a URL in the error report, then 99% of them are unable to connect to the network normally.

1. Install Android Studio

First download and install Android Studio , domestic users may not be able to open the official link, please use the search engine to search for available download links. Select the "Custom" option in the installation interface and make sure the following items are selected:

• Android SDK
• Android SDK Platform
• Android Virtual Device

Then click "Next" to install the selected components.

If the selection box is greyed out, you can also skip it and install these components later.

After the installation is complete, when you see the welcome interface, you can perform the following operations.

2. Install the Android SDK

Android Studio installs the latest version of the Android SDK by default. Currently compiling React Native applications requires Android 13 (Tiramisu)a version of the SDK (note that the SDK version is not equal to the terminal system version, RN currently supports devices above android 5). You can choose to install various versions of the SDK in the SDK Manager of Android Studio.

You can find the SDK Manager in the welcome screen of Android Studio. Click "Configure" and you will see "SDK Manager".

The SDK Manager can also be found in Android Studio's "Preferences" menu. The specific path is Appearance & Behavior  →  System Settings  →  Android SDK .

Select the "SDK Platforms" tab in the SDK Manager, and check "Show Package Details" in the lower right corner. Expand Android 13 (Tiramisu)the options and make sure the following components are checked (reiterate that you must use a stable proxy software, otherwise you may not see this interface):

• Android SDK Platform 33
• Intel x86 Atom_64 System Image(Official emulator image file, this component does not need to be installed when using an unofficial emulator)

Then click the "SDK Tools" tab, and also check "Show Package Details" in the lower right corner. Expand the "Android SDK Build-Tools" option and make sure the version required for React Native is selected 33.0.0. You can have multiple other versions installed at the same time.

Finally click "Apply" to download and install these components.

3. Configure the ANDROID_HOME environment variable

React Native needs to know the path where your Android SDK is installed through environment variables, so as to compile normally.

Open 控制面板 ->  系统和安全 ->  系统 -> -  高级系统设置 >  高级 ->  环境变量 ->  新建, create an ANDROID_HOMEenvironment variable named (system or user variable can be used), point to the directory where your Android SDK is located (the specific path may be inconsistent with the picture below, please confirm):

The SDK is installed in the following directory by default:

C:\Users\你的用户名\AppData\Local\Android\Sdk

You can view the real path of the SDK in the "Preferences" menu of Android Studio, specifically Appearance & Behavior  →  System Settings  →  Android SDK .

You will need to close and reopen the existing Command Prompt window for the new environment variables to take effect.

4. Add some tool directories to the environment variable Path

Open 控制面板 ->  系统和安全 ->  系统 ->  高级系统设置 ->  高级 ->  环境变量, select the Path variable, and click Edit . Click New and add these tool directory paths: platform-tools, emulator, tools, tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

After the installation is complete, the specific settings will not be repeated

2. Install react-native scaffolding and create a project

A TypeError: cli.init is not a function for react native error occurs

npm uninstall -g react-native-cli

npm install -g react-native-cli

npm install -g react-native

Recreate the project

npx react-native init 工程名称

The effect and project files after successful creation are as follows

 

3. Start the android virtual machine

 

 

 

Choose the settings that match your Android SDK

Start after creating the emulator

 

Enter adb devices on the command line

This means that the startup is successful

4. Start the react-native project

cd 项目名称
yarn android
# 或者
yarn react-native run-android

This means that the startup is successful