React native environment configuration of Windows version build

Close to the end of the year, think back to what has been done, learn what, and then suddenly found that this year to buy a lot of books, see is to see, there is no complete reading. Sad and hurried.
Then, the recent project is not very tight, so the time to learn H5. Self-learning is still very boring, although head first HTML5 programming (Chinese version) This book is very interesting, but the majority of the study would like to do their own practice, so we have to find a framework to play.
In addition, I have heard of react native is very fire, fire half the Earth, and it is called "Learn once,write anywhere" This sentence in the mobile development of the ape eyes mean what, I do not say you know: "Cross-platform." The code written by an Android ape like me can run on iOS, and I'm sure there's nothing more fun than that.
Moreover, I am learning H5, that study H5 Web development How and my Android development coexistence, React native directly solves my problem: in the use of H5 development, but also effectively call the Android original ecological development, both directly, Both retained Android native development is also used by H5 Web development, perfect. So the framework also first not to find, directly without hesitation into the react native study. Then the next configuration let me fall into the bitterness of bitter, so in the configuration of the immediately after recording down, one is to record their learning pass, and second, to meet the same trouble to provide some lessons for the students.

Because I was built on the WIN10, so this is the version.

• 1. Installing the JDK

This is done Java, Android development has been installed, not installed can be installed on their own, here note the place: Be sure to configure JAVA_HOME:D:\GUANMANMAN\JDK8\JDK8 in the system variables, the value is your JDK installation directory, , please remember.

• 2. Installing the SDK

Because I am engaged in Android development, so here is the installation SDK, here need:
① environment variable Android_home:xxx
For example: (ANDROID_HOME:D:\GUANMANMAN\ANDROIDSTUDIO\SDK)
② environment variable path for example:
For example: (Path:%android_home%\tools;%android_home%\platform-tools)

• 3. Download the SDK

React native is using the Android version is 23.0.1, only support this version of the SDK, so you must first download his source and tools, otherwise after the error, I met

If you use the Google emulator to download

OK above the basic things download good installation, we will formally start our react native need to download and install the tool:

Download and installation of 1:node.js

: https://nodejs.org/en/, I use the version is, V6.9.2

Installation is to choose a good directory of the Fool-type installation can be.

Download and installation of 2:git

: https://git-for-windows.github.io/Direct Download can

Installation Note Select Support for Windows Command and Windows ' Default Console window

OK install the above two tools we can use the NPM command, you can look at:

3: Configure the domestic mirror

Because of the need to download things and the domestic ban, you know, so you have to configure the image to facilitate our download:

NPM Config Set Registry https://registry.npm.taobao.orgnpm
NPM Config set Disturl https://npm.taobao.org/dist

The command line executes both of these configuration commands.

4: Download REACT-NATIVE-CLI

This is the file that must be indispensable for the react-native command to execute.

Execute command: NPM install-g react-native-cli

This depends on the speed of the network, download time is different.

Complete REACT-NATIVE-CLI Download, here we have completed all the basic configuration, that is, the previous work has been done, the following can create a project to develop, is not very happy, a little impatient, walk to see it, steal laughter.

Create Project Engineering:

1: Create a Firstrnproject project

Create a workspace dedicated to saving the React-native project before you begin: React-native_workspace

Then execute the command: react-native init firstrnproject Enter, Init represents the creation of a project.

When the interface is real, it means that our project has been created and can be viewed in your work area.

2: Open Firstrnproject Project

The project has been established and then we enter the project and execute the input react-native start to open the project

3: Check whether the Firstrnproject project started successfully

Accessing Http://localhost:8081/index.android.bundle?platform=android in the browser

When the script is displayed as above, the representation is successfully turned on.

4: Run the Firstrnproject project

Go to the project directory, enter React-native run-android return,

After executing the command will download the relevant resources, the process is quite long, wait patiently.

Then after downloading the project will be installed on the mobile phone, do you feel that it has been completed, I would like to tell you think more, to see if we met those pits.

Fill in the Pit:

1:SDK Tool Kit

From the marked place can be seen, the need for SDK tool version is 23.0.1, this simple, open the Androidstudio SDK Manager to download it, which is also in the basic configuration I stressed that must download this version of the reason.

After downloading, continue running the project React-native run-android

Configuration of the 2:java_home

This problem occurs because my environment variable in path is directly using the JDK installation directory and is not configured Java_home, here directly add a java_home configuration, fill in the JDK installation directory.

3:unable to upload some APKs exception

This problem is in 5.0 above the real machine will appear unable to upload some apks problem, this time we only need to put project engineering in the Android directory of the Build.gradle file in the

dependencies {        classpath ‘com.android.tools.build:gradle:1.3.1‘    }

The 1.3.1 in Classpath is 1.2.3, also set the jar package for the Android/gradle/wrapper/gradle-wrapper.properties file

Change the Distributionurl=https\://services.gradle.org/distributions/gradle-2.4-all.zip to

Distributionurl=https\://services.gradle.org/distributions/gradle-2.2-all.zip

OK after re-executing the project: React-native run-android, it will download the zip package again, n and so on.

In the torment of waiting, and finally finished, into the real machine or simulator to view.

4:can ' t find variable: exception

This requires you to configure the real IP and port number, shaking the phone up and down several times, a menu bar will appear, click on Dev Settings, click on the Debug server host & port for device, set the IP and ports, the port number is fixed to 8081, IP is your host IP address.

OK, return, again up and down shaking the phone, in the menu bar, choose Reload JS, is not feeling OK, you think more.

5:syntaxerror exception

This thought to here is OK, the result, run a look, well, really do not willing me:

Strict mode does not allow function declarations in a lexically nested statement.

This abnormal card for two days, if you also encounter this anomaly, you understand my frustration, because it is not artificial or configuration of the problem, if you know the answer must be very shocked, it is because: this exception is React Native version comes with the bug, Two days of depression to the end of the solution or the same without words.

Here I thank the React Native7 Group (115487854) of the clear God, he solved my two days of confusion in a word.
"React-native Init project name--version 0.38.0, this is 0.39 of its own problem, change 0.38 resolution. "He said so.

For this exception, the following two solutions are available:

Method One: When you create a new project, use the command react-native init project name--version 0.38.0

Method Two: Open the project node_modules\react-native\libraries\core\initializecore.js file find 112 rows, change function HandleError (e, isfatal) to var handleError = function (e, isfatal) then perform NPM start--reset-cache restart in the project

Then, there was no then.

The above is finally, this problem solved formally entered the RN interface.

OK, here is finished, I guess I met more than the pit, I hope you can be less than a pit, especially the new students just learning, confidence suffered 10,000 critical hit.

The next is to formally learn RN technology, is looking forward to, in the study I will occasionally take their own learning results and share with you, interested students work together.

For more information please pay attention to the platform, blog updates will be timely notification. Love to learn love technology.

React native environment configuration of Windows version build