Original address:Build App using reactive
Recently, due to the needs of the project, in-depth study
React
AndReact Native
,React
I have mastered it, and now concentrate onReactNative
The development of the project. Here we need to record the technical details in the learning process. A good memory is not as good as a bad written one. It is always good to write more documents. [There are too many pits to fill one by one]This article focuses on the use of records
React Native
Building Dual PlatformsApp
At the same time, further grasp the technology used in the construction process. [Continuously update, persistently …]
Build a development environment
Installationreact-native-cli
:npm i -g react-native-cli
Android SDK
Install Android SDK and start configuration:
Configure environment variables
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
Android virtual machine
SetGenymotionThe location of the Android SDK for (the path to the Android SDK can be found on the SDK Manager).
simulator
There are many simulators to choose from, Android Studio comes with, Genymotion and Night God Simulator. It is recommended to choose Night God Simulator.
Configuration method:
- In
Nox/bin
Directory runnox_adb.exe connect 127.0.0.1:62001
If it fails, use theadb devices
Query, the version is inconsistent, can putAndroid/sdk
Under the directoryadb.exe
Copy toNox/bin
Under, and renamed asnox_adb.exe
The reverse operation is also possible. - Open Android Studio and Night God Simulator respectively, and run the command at this time
nox_adb.exe connect 127.0.0.1:62001
Basically, it will be successful.
New React Native project
- run
react-native init project-name
, enterproject-name
Folder installation dependenciesnpm i
And runreact-native run-android
Orreact-native run-ios
structureApp
. - Take Android App as an example, open it in Android Studio.
Android
Folder (Note: Here isAndroid
Folder, notproject-name
Project folder)。 - In
C:\Users\user\.gradle\wrapper\dists
Directory into the corresponding file, file download addressGradle
Run project
-
This step is crucialTo configure java’s environment variables, first of allJAVA_HOMEAndANDROID_HOME:
-
JAVA_HOME, variable value is
D:\Android\sdk
; -
ANDROID_HOME, variable value is
D:\Android\sdk
; - And then in
Path
Add to itemjdk
Andjre
inferiorbin
Directory; -
The above is user variable configuration, and the following is system variable configuration:
- In
Path
Add the following variables to the item:
- In
-
JAVA_HOME, variable value is
- At the same time open Android Studio, Nox and open the in the project in AS.
Android
Folders - run
nox_adb.exe connect 127.0.0.1:62001
Connect AS and Nox, and then run again.react-native run-android
, Android App will be built at this time.
Closing Port Conflict:
lsof -n -i4TCP:8081
,kill -9 <PID>