ReactNative solution

ReactNative is a framework for making mobile apps. Use React syntax (JS, JSX), etc., to develop native apps.

APP production mode: Development mode and production genre

  • WebAPP H5 web page produced by the mobile terminal page, running in the mobile terminal browser. Some functions of the phone can be called through the H5 API.

    • Advantages: low cost
    • Disadvantages: poor experience, heavy web traces, low performance. Some advanced functions of the phone cannot be called.

  • Native development: IOS(Object-C, Swift) Android(Java, Kotlin) using the corresponding development language development.

    • Advantages: Good performance, can achieve a variety of custom effects, smooth animation…
    • Disadvantages: High cost (personnel cost + time cost)

  • Hybird APP: Mixed development and editing

    • Use JS to call native apis
    • Advantages: Make pages with H5 and call native API through JS at the bottom, performance can be optimized. It can realize most mobile functions. The development cost is low and the experience is good
    • Some specific domestic solutions: Uni-App [DCloud], APICloud, wechat mini program, Taro(JD)

  • ReactNative

    • Goal: Low development costs and close performance to native development

    • Using JS code (low cost for Web developers), the code is compiled into native code through a special compilation environment. This reduces the cost of development and time (one set of code) and generates native code. Use experience and engineering quality are guaranteed.

      Apps can only run on emulators (during development) or real machines (after packaging).

ReactNative environment deployment

RN is a solution for mobile apps. Native App development.

Official document :www.react-native.cn

IOS[requires a MAC] and Android

If you are using a MAC, you need to check the official website to build an environment:

www.react-native.cn/docs/enviro…

Need environment:

JAVA Environment JDK environment

Android SDK Android development environment

Node environment and NPM package management tool √

Note to use the latest version 7 of android simulator (Nighthian Simulator)

Download baidu web disk sharing resource link: pan.baidu.com/s/1pLeRY_Ab… Extract code: exFj copy this section of content to open baidu network disk mobile App, more convenient operation oh

The Node environment

The version must be at least 12.

# incmdNPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM: NPM configset registry https://registry.npm.taobao.org/
Copy the code

Java environment

The Java environment is also known as the JDK

In an RN environment, Java version 8 (1.8) or above is required. Other versions have not been tested. When installing, it is recommended to use the shared version of Baidu network disk.

Pre-environment cleaning:

Everyone’s computer environment is different, and you may have an earlier version of JAVA installed. RN requires Java8 or later, and you need to uninstall the older version of the Java environment and environment variables.

① Uninstall the Java environment of earlier versions

Uninstall both of them by right clicking the mouse button and following subsequent instructions

② Check the related Java environment variables and delete them

Use the search function of the operating system to search for environment variables and open the JAVA_HOME environment variable in user variables and system variables. Select and delete the JAVA_HOME environment variable, and click Save.

① Click to install JDK15

There is no special need to choose, use the installation package provided by Baidu network disk, installation can be.

2 On the CMD interface, view the Java command and its version

Android_SDK environment

To download the SDK, you need to install Android Studio on RN’s website. It’s cumbersome and it’s slow. High requirements for the network. Use baidu web disk to provide.

① Decompress the package and place it in a directory

The path must not contain Chinese characters or Spaces.

② Configure environment variables

Environment variables, on the CMD command line, can directly invoke certain commands.

Variable name: ANDROID_HOME # Variable value ANDROID_SDK The specific directory for storing the SDK needs to be filled based on the actual situation. Where to fill in the variable value: D:\RNENV\ANDROID_SDKCopy the code

Configuring the PATH variable

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
Copy the code

Win7 system or open Path environment variable is the following style:

You need to assign the value of the variable to the text editor, don’t manually enter the line fold.

Pass the variables to be configured one by one; Separate and splice together. Put it together and copy it back.

3. Configure the above environment variables, restart CMD, and check

Once you have configured the ANDROID_SDK environment above, you should see the following calls.

Simulator installation

Night god simulator, you can use baidu network disk provided in the installation package.

The nighthian simulator version requires the installation of version 7. If you installed the previous version 5, uninstall and reinstall the version 7.

If the simulator cannot be installed, search and solve the problem according to the actual error.

  • The graphics card driver version is too early. Upgrade the driver
  • Or you can’t install it. Reinstall the operating system. Then reinstall the emulator and deploy the environment

(1) After installing the Simulator, start it

② On the CMD command line, check adb association emulator

The ADB version is inconsistent. You need to synchronize the ADB software version

把ANDROID_SDK/platform-toolsUnder thenox_adb.exefilecopytoThe directory of the Nighthian simulatorUnder theNox/bin

Replace the synchronized ADB software version again via the CMD command line. detection

The above must be tested and viewed under the opening state of the Nighthian simulator

If adb version is used in the command line, faild to create failed to create dependent files during software startup. I guess I installed the ANDROID_SDK on drive C. The system of drive C has no write permission. An error is reported and cannot run until the software crashes prompting exit.

Solution: Move the disk to a directory other than the drive letter of the system disk on drive C, and change environment variables to the new directory.

Start-up project package

Generate download project package (not used here for now)

NPX React-native init rnAppCopy the code

Because of the long download time and the version of the problem, we use baidu network disk to provide a good generated project package for use.

① Obtain the project package from Baidu web disk

Unzip it and prevent it from going to the code directory

The path is not a system disk (not drive C). Do not contain Chinese characters or Spaces

② Drag and drop the app-debug.apk file from Baidu’s web disk into the Nighthian simulator

③ Enter the rnApp project package directory in CMD and run the command to start the service

npm start
Copy the code

The defaultThe starting service listens on port 8081

You cannot access the emulator using 127.0.0.1. You must use an external access IP address to access the emulator.

Run the CMD command to view the local EXTERNAL IP address and use a browser to access the test

④ Click on the simulator to start the rnApp

⑤ Configure the APP debugging address to the startup development server address

Run the CMD command to view the local EXTERNAL IP address and use a browser to access the test

After the configuration is complete, wait a little and you will see the following screen. If it does not appear, in the project package startup CMD, press r to reload.

No apps connected. The simulator is stuck. Shut down the rnApp software from the simulator and restart it.

If you have this problem. The IP address is incorrect, or the developer server for the project package is not started.

Deployment of the RN environment is complete here. If you have any questions, please leave a comment below