Original address:Build App using reactive

Recently, due to the needs of the project, in-depth studyReactAndReact Native,ReactI have mastered it, and now concentrate onReactNativeThe 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 recordsReact NativeBuilding Dual PlatformsAppAt 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:

1. InNox/binDirectory runnox_adb.exe connect 127.0.0.1:62001If it fails, use theadb devicesQuery, the version is inconsistent, can putAndroid/sdkUnder the directoryadb.exeCopy toNox/binUnder, and renamed asnox_adb.exeThe reverse operation is also possible.
2. Open Android Studio and Night God Simulator respectively, and run the command at this timenox_adb.exe connect 127.0.0.1:62001Basically, it will be successful.

New React Native project

1. runreact-native init project-name, enterproject-nameFolder installation dependenciesnpm iAnd runreact-native run-androidOrreact-native run-iosstructureApp.
2. Take Android App as an example, open it in Android Studio.AndroidFolder (Note: Here isAndroidFolder, notproject-nameProject folder）。
3. InC:\Users\user\.gradle\wrapper\distsDirectory into the corresponding file, file download addressGradle

Run project

1. This step is crucialTo configure java’s environment variables, first of allJAVA_HOMEAndANDROID_HOME：

   1. JAVA_HOME, variable value isD:\Android\sdk;
   2. ANDROID_HOME, variable value isD:\Android\sdk;
   3. And then inPathAdd to itemjdkAndjreinferiorbinDirectory;

   4. The above is user variable configuration, and the following is system variable configuration:

      • InPathAdd the following variables to the item:

1. At the same time open Android Studio, Nox and open the in the project in AS.AndroidFolders
2. runnox_adb.exe connect 127.0.0.1:62001Connect 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>