Take you from the zero-learning reactnative development of cross-platform app Development (II.)

Reactnative Cross-platform Development series Tutorials:

Take you from the zero-learning reactnative development of cross-platform app Development (i)

In the previous tutorial we configured the necessary environment for the development of RN, this article we still configure the environment, yesterday configured the Crna mode development environment, we configure the native hybrid development environment today.

The first time to write a series of tutorials, write bad, many magnanimous, there are errors welcome to judge.

Talk about the goal of this series of tutorials, a cross-platform app developed by Crna mode to package and publish, and use this app in native hybrid mode to implement and package the release.

Don't say much nonsense to start the code, are you ready?

Environment configuration

Configure the environment of the native mixed mode development, we refer to the official website, the official website introduces more detailed.

1. Installing chocolatey

Chocolatey is a packaging tool on window, you can download and install some software by Choco xxxxx Command, click here to download chocolatey

The first step is to open your DOS as an Administrator (command line tool)

Then copy the command on the Chocolatey website, paste it here, enter it, and wait a few minutes to install the Choco on your windows.

Copy this command on the console that you just ran as an administrator.

There will be several warnings in the middle of the journey, which takes about 2 minutes,

Choco-v take a look at our version, please?? Installation is successful!

Official online said need to install Python, I remember is not installed also can, after you can use Choco XXX command once installed Python node yarn jdk8 and other necessary things,

These things, in the last piece of article configuration has been installed most, in the previous article we did not install the JDK and Android studio, here everyone refer to the official website installation, below I will do some configuration problems,

RN Chinese official website

Yarn, React Native command-line tool (REACT-NATIVE-CLI)

Yarn is a tool that Facebook offers to replace NPM to speed up the download of node modules. React Native's command-line tools are used to perform tasks such as creating, initializing, updating projects, running packaged Services (packager), and so on.

NPM install-g Yarn REACT-NATIVE-CLI

After you install yarn, you should also set the mirror source:

Yarn Config Set registry https://registry.npm.taobao.org--global
Yarn Config set Disturl https://npm.taobao.org/dist--global

If you encounter eacces:permission denied permissions error, you can try running the following command (Linux system only): sudo npm install-g yarn react-native-cli.

After you install yarn, you can replace NPM with yarn, for example, using yarn instead of the NPM install command, using yarn add a third-party library name instead of NPM install--save a third-party library name.

Android Studio

React native currently requires Android Studio2.0 or later.

Android Studio requires Java development Kit [JDK] 1.8 (later versions are not supported). You can enter javac-version on the command line to view the JDK version you are currently installing. If the version is not required, you can download it on the official website.

Or use the Package Manager to install (such as Choco Install JDK8 or apt-get install DEFAULT-JDK)

Android Studio contains the Android SDK and emulator required to run and test react native apps.

Unless otherwise noted, please do not change the options during the installation process. For example, Android Studio has Android support Repository installed by default, which is also required for react native (otherwise react-native Run-android will be reported APPCOMPAT-V7 packet can not find errors).

Make sure all the installations are checked, especially the Android SDK and Android Device Emulator.

After the initial installation is complete, select the Custom installation:

Custom Installation

Check for installed components, especially emulators and HAXM acceleration drivers.

Verify installs

After the installation is complete, select Configure in the Welcome screen of Android Studio | SDK Manager.

Configure SDK

In the SDK Platforms window, select Show Package Details, then tick Google APIs, Android SDK Platform 23, Intel x86 Ato in Android 6.0 (Marshmallow) M system image, Intel x86 atom_64 system image, and Google APIs Intel x86 atom_64 system image.

Platforms

In the SDK Tools window, select Show Package Details and tick the Android SDK Build-tools 23.0.1 in Android SDK Build Tools (this version must be included. Of course, if other plugins need other versions, you can install more than one version at a time. Then check the Android support Repository at the bottom of the box.

Build tools

Android_home Environment variables

Make sure that the Android_home environment variable correctly points to the path of the Android SDK that you installed.

New, environment variable, advanced system settings, System and security, system, control Panel, open

The specific path may be inconsistent, please confirm it yourself.

ENV variable

You need to close the existing Command prompt window and reopen it so that the new environment variable will take effect.

Add the Tools directory of the Android SDK to the PATH variable #

You can add the tools and Platform-tools directories of the Android SDK to the path variable to run some Android tools, such as Android AVD or ADB logcat, in the terminal.

Open Control Panel, advanced systems, system and security, high-level system settings, and environment variables, select Path, double-click to edit

Note that your specific path may be different from

Test installation

React-native Init MyApp

This process does not suspect time, because the installation of this is really slow and slow

This is done, I waited for 10 minutes, I remember when the first time, waiting for 30 minutes! Now we switch directories into the project,
CD Myaapp

React-native run-android

This process will open the node compiler load parsing bindings, the process is also a long wait!

Tip: You can use the--version parameter to create a specific version of the project. For example react-native init myapp--version 0.44.3. Note that the version number must be exactly two decimal points.

For Windows users, please do not init the project in the default System32 directory on the command line! There will be a variety of permissions to prevent it from running!

Take you from the zero-learning reactnative development of cross-platform app Development (II.)