I have been stuck installing the RN environment for a long time. I searched a lot on the Internet and encountered many hurdles. Today, I finally installed it. I plan to write a detailed process to benefit the public, which can be regarded as a deeper memory for myself.
1. First look at the official website React
Points to note: node , javaJDK and AndroidStudio are required .
Then look at the conditions of the three: (1) node must be above 14, you can go to the node official website to download, I use NVM here. NVM Tutorial
After doing a good job, check: cmd executes the command:
After correct, this step is completed.
(2) JavaJDK must be in version 11, Temurin or Oracle JDK
After the download is complete, just press Enter all the way to install. Check after doing the same: cmd command line execution:
javac -version
After correct, this step is completed.
(3) Install Android Studio , nearly 1G of the installation package, some mistakes in this step need attention.
After downloading and installing, friends with a small C drive mainly change the location, and then install JDK (this thing is also very big).
2. Configure the environment.
(1) First of all, the configuration in AndroidStudio, it is easy to be annoyed, I am, so look at the picture.
Open it here: it might be a bit slow because it's so big.
Click: Configure JDK. It's all in English, and it's very annoying to me.
Click: Select a storage location. (After the path is selected, copy it and use it later)
That's it for coming in again: the next step is to install the JDK: look at the keywords.
Look at the picture:
After these checks, click OK to start the download, see the picture:
After these things are done, you can turn off this thing, it's annoying.
(2) Environment variable configuration. 控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建, create an ANDROID_HOMEenvironment variable named (either system or user variable), pointing to the directory where your Android SDK is located.
Look at the picture:
The two are the same, and it can be deployed anywhere, but the system authority is a little larger.
New:
-
ANDROID_HOME
-
-
E:\AndroidSDKComponentsSetup
//This path according to its own
Remember to click OK.
Then click: path
Create four new ones and fill them in once.
-
%ANDROID_SDK_ROOT%\platform-tools
-
%ANDROID_SDK_ROOT%\emulator
-
%ANDROID_SDK_ROOT%\tools
-
%ANDROID_SDK_ROOT%\tools\bin
Click OK all the way to complete.
Check after doing the same, cmd command: both are ok
-
set path
-
set ANDROID_HOME
That's it.
3. Create a project.
Note: For the next operation, if npm or npx downloads third-party modules in the default official warehouse, the speed is slow or an error is reported, please modify the download warehouse. For details on how to change the source of npm, you can see my NPM source change
-
npm config get registry
//Check the current warehouse address
-
npm config set registry
https:
//registry.npm.taobao.org //Switch to Taobao
-
npm config set registry
https
:
//mirrors.huaweicloud.com/repository/npm //Transposition Huawei
Execute the command under the folder you want to create: cmd
npx react-native init AwesomeProject //AwesomeProject项目包名称
Pay attention to these precautions, otherwise the creation cannot be successful!
At this time it is just a js package, we need to convert it to APK, execute the command:
-
cd victory
//Enter the project package
-
npx react-
native run-android
//Generate APK
-
copy code
That's it, same check. Open the project package and check according to the path. If you see this APK, it means success.
A few errors were reported in the middle, not important
The first is a failure to open the emulator, and the second is a failure to install the APK.
So far, the project has been successfully generated and can be run on a real machine or a simulator. Night Simulator
After installation, install the project. Just drag and drop in.
Click to open:
The first line reports an error: the server is not started, it is time for us to start the project.
Excuting an order:
npm start
Next, just let the project synchronize with Yeshen, link the ip and port number of the local computer, and see the picture.
Execute the command to get the ip of this computer:
ipconfig
Check the port, here I use XAMPP to check the port.
After finding these two items, go back to Night God.
Click on:
Restart Night God:
That's it! Open the project package and edit it:
I have been stuck installing the RN environment for a long time. I searched a lot on the Internet and encountered many hurdles. Today, I finally installed it. I plan to write a detailed process to benefit the public, which can be regarded as a deeper memory for myself.
1. First look at the official website React
Points to note: node , javaJDK and AndroidStudio are required .
Then look at the conditions of the three: (1) node must be above 14, you can go to the node official website to download, I use NVM here. NVM Tutorial
After doing a good job, check: cmd executes the command:
After correct, this step is completed.
(2) JavaJDK must be in version 11, Temurin or Oracle JDK
After the download is complete, just press Enter all the way to install. Check after doing the same: cmd command line execution:
javac -version
After correct, this step is completed.
(3) Install Android Studio , nearly 1G of the installation package, some mistakes in this step need attention.
After downloading and installing, friends with a small C drive mainly change the location, and then install JDK (this thing is also very big).
2. Configure the environment.
(1) First of all, the configuration in AndroidStudio, it is easy to be annoyed, I am, so look at the picture.
Open it here: it might be a bit slow because it's so big.
Click: Configure JDK. It's all in English, and it's very annoying to me.
Click: Select a storage location. (After the path is selected, copy it and use it later)
That's it for coming in again: the next step is to install the JDK: look at the keywords.
Look at the picture:
After these checks, click OK to start the download, see the picture:
After these things are done, you can turn off this thing, it's annoying.
(2) Environment variable configuration. 控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建, create an ANDROID_HOMEenvironment variable named (either system or user variable), pointing to the directory where your Android SDK is located.
Look at the picture:
The two are the same, and it can be deployed anywhere, but the system authority is a little larger.
New:
-
ANDROID_HOME
-
-
E:\AndroidSDKComponentsSetup
//This path according to its own
Remember to click OK.
Then click: path
Create four new ones and fill them in once.
-
%ANDROID_SDK_ROOT%\platform-tools
-
%ANDROID_SDK_ROOT%\emulator
-
%ANDROID_SDK_ROOT%\tools
-
%ANDROID_SDK_ROOT%\tools\bin
Click OK all the way to complete.
Check after doing the same, cmd command: both are ok
-
set path
-
set ANDROID_HOME
That's it.
3. Create a project.
Note: For the next operation, if npm or npx downloads third-party modules in the default official warehouse, the speed is slow or an error is reported, please modify the download warehouse. For details on how to change the source of npm, you can see my NPM source change
-
npm config get registry
//Check the current warehouse address
-
npm config set registry
https:
//registry.npm.taobao.org //Switch to Taobao
-
npm config set registry
https
:
//mirrors.huaweicloud.com/repository/npm //Transposition Huawei
Execute the command under the folder you want to create: cmd
npx react-native init AwesomeProject //AwesomeProject项目包名称
Pay attention to these precautions, otherwise the creation cannot be successful!
At this time it is just a js package, we need to convert it to APK, execute the command:
-
cd victory
//Enter the project package
-
npx react-
native run-android
//Generate APK
-
copy code
That's it, same check. Open the project package and check according to the path. If you see this APK, it means success.
A few errors were reported in the middle, not important
The first is a failure to open the emulator, and the second is a failure to install the APK.
So far, the project has been successfully generated and can be run on a real machine or a simulator. Night Simulator
After installation, install the project. Just drag and drop in.
Click to open:
The first line reports an error: the server is not started, it is time for us to start the project.
Excuting an order:
npm start
Next, just let the project synchronize with Yeshen, link the ip and port number of the local computer, and see the picture.
Execute the command to get the ip of this computer:
ipconfig
Check the port, here I use XAMPP to check the port.
After finding these two items, go back to Night God.
Click on:
Restart Night God:
That's it! Open the project package and edit it: