React native01-Starting the Windows Environment installation configuration Chapter

Please indicate the original link for children's shoes reproduced in this article.

consult the documentation, etc., and suggest to http://reactnative.cn/

I use the environment Win10. Before reading this article, please understand that before we install react native, we want to install Python2.7, git, Android environment, Visual Studio 2015, Nodejs.

1. Install Python

1) https://www.python.org/downloads/release/python-2711/

It is recommended to install version 2.7.11, version 3.x or above is not supported.

The path I installed is: C:\Python27

2) in the user variable add: python_home, Value: C:\Python27 as follows:

3) Add two variable values to the system variable path:%python_home%,%python_home%\scripts (other system interfaces will be different, add the same values)

2. Install git

1) https://git-for-windows.github.io/

2) After downloading the direct installation can be. Notice that when you select the component this step, you want to select on ' Use a TrueType font in all console windows '.

Next, select Windows Command Prompt

Next, choose checkout windows-style,commit Unix-style line endings

Next, select Use Windows ' Default Console window

Next, select All

Complete the installation

3. Configuring the Android Environment

1) Download Android Studio http://www.android-studio.org/index.php/download

This software is required for entire Android programming

2) Set the environment variable Android_home

To configure android_home in the environment variable, specify the SDK path, which I configure as follows:

3) Configure the environment variable path

Add 2 variables to the environment variable path:%android_home%\tools,%android_home%\platform-tools

4. Installing Nodejs

1) Download the corresponding installation file to the official website http://nodejs.cn/download/

It is installed by default under the C:\Program Files\nodejs folder.

2) It is recommended to set the NPM image to speed up the subsequent process

After the installation is successful, we enter the command line separately:

npm config set registry https://registry.npm.taobao.org –global

npm config set disturl https://npm.taobao.org/dist –global

3) Configure Python version

Enter NPM config set python python2.7 on the command line

4. Install React Native

1) Install react native There are 2 ways, the first one directly on GitHub download decompression, the second type of git command line download.

I use the git command method, the second type.

① on GitHub to download and unzip:

Download https://github.com/facebook/react-native on GitHub. Then unzip, we unzip the E:\ProgramFiles (choose the path by itself).

② download with git command line

Use the command line to go to the E:\ProgramFiles directory, which is a more user-interested choice. When this directory is entered, it is automatically downloaded to the current directory.

Then enter the command git clone https://github.com/facebook/react-native.git

Through both of these methods, we finally see the react native we downloaded.

2) Installing the React-native command-line tool

At the command line, enter:

npm install -g react-native-cli

3. Create a Helloword project

1) Create your own project path that we created in F:\ProjectWorkspace\ReactNative

2) cmd command line to the above path, and then enter the command react-native init HelloWorld to create the project. Here HelloWorld is the name of the project, and readers can define it according to their preferences.

The installation process waits a while, and the process downloads some packages.

3) If no error occurs after the 2nd step is completed, you can omit this step.

After waiting for a long time (about half an hour), there was an error, a big push error, as follows

F: \ ProjectWorkspace \ ReactNative> react-native init HelloWorld

This will walk you through creating a new React Native project in F: \ ProjectWorkspace \ ReactNative \ HelloWorld

Installing react-native package from npm ...

Setting up new React Native app in F: \ ProjectWorkspace \ ReactNative \ HelloWorld

> [email protected] 1.2.1 install F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ bufferutil

> node-gyp rebuild

F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ bufferutil> if not defined npm_config_node_gyp (node "C: \ Program Files \ nodejs \ node_modules \ npm \ bin \ node-gyp-bin \\ .. \ .. \ node_modules \ node -gyp \ bin \ node-gyp.js "rebuild) else (node" "rebuild)

Build one project at a time in this solution. To enable parallel generation, add the "/ m" switch.

C: \ Program Files (x86) \ MSBuild \ Microsoft.Cpp \ v4.0 \ V140 \ Microsoft.CppBuild.targets (366,5): warning MSB8003: Could not fi

nd WindowsSDKDir variable from the registry. TargetFrameworkVersion or PlatformToolset may be set to an invalid versio

n number. [F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ bufferutil \ build \ bufferutil.vcxproj]

  TRACKER: Error TRK0005: Could not find: "CL.exe". The system can not find the file specified.

C: \ Program Files (x86) \ MSBuild \ Microsoft.Cpp \ v4.0 \ V140 \ Microsoft.CppCommon.targets (356,5): error MSB6006: "CL.exe" has exited

The code is 5. [F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ bufferutil \ build \ bufferutil.vcxproj]

gyp ERR! build error

gyp ERR! stack Error: `C: \ Program Files (x86) \ MSBuild \ 14.0 \ bin \ msbuild.exe` failed with exit code: 1

gyp ERR! stack at ChildProcess.onExit (C: \ Program Files \ nodejs \ node_modules \ npm \ node_modules \ node-gyp \ lib \ build.js: 276: 23)

gyp ERR! stack at emitTwo (events.js: 106: 13)

gyp ERR! stack at ChildProcess.emit (events.js: 191: 7)

gyp ERR! stack at Process.ChildProcess._handle.onexit (internal / child_process.js: 204: 12)

gyp ERR! System Windows_NT 10.0.10586

gyp ERR! command "C: \\ Program Files \\ nodejs \\ node.exe" "C: \\ Program Files \\ nodejs \\ node_modules \\ npm \\ node_modules \\ node-gyp \\ bin \\ node -gyp.js "" rebuild "

gyp ERR! cwd F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ bufferutil

gyp ERR! node -v v6.2.0

gyp ERR! node-gyp -v v3.3.1

gyp ERR! not ok

npm WARN install: [email protected] 1.2.1 [email protected] 1.2.1 install: `node-gyp rebuild`

npm WARN install: [email protected] 1.2.1 Exit status 1

> utf-8 [email protected] 1.2.1 install F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ utf-8-validate

> node-gyp rebuild

F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ utf-8-validate> if not defined npm_config_node_gyp (node "C: \ Program Files \ nodejs \ node_modules \ npm \ bin \ node-gyp-bin \\ ... \ node_modules \ node-gyp \ bin \ node-gyp.js "rebuild) else (node" "rebuild)

Build one project at a time in this solution. To enable parallel generation, add the "/ m" switch.

C: \ Program Files (x86) \ MSBuild \ Microsoft.Cpp \ v4.0 \ V140 \ Microsoft.CppBuild.targets (366,5): warning MSB8003: Could not fi

nd WindowsSDKDir variable from the registry. TargetFrameworkVersion or PlatformToolset may be set to an invalid versio

n number. [F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ utf-8-validate \ build \ validation.vcxproj]

  TRACKER: Error TRK0005: Could not find: "CL.exe". The system can not find the file specified.

C: \ Program Files (x86) \ MSBuild \ Microsoft.Cpp \ v4.0 \ V140 \ Microsoft.CppCommon.targets (356,5): error MSB6006: "CL.exe" has exited

The code is 5. [F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ utf-8-validate \ build \ validation.vcxproj]

gyp ERR! build error

gyp ERR! stack Error: `C: \ Program Files (x86) \ MSBuild \ 14.0 \ bin \ msbuild.exe` failed with exit code: 1

gyp ERR! stack at ChildProcess.onExit (C: \ Program Files \ nodejs \ node_modules \ npm \ node_modules \ node-gyp \ lib \ build.js: 276: 23)

gyp ERR! stack at emitTwo (events.js: 106: 13)

gyp ERR! stack at ChildProcess.emit (events.js: 191: 7)

gyp ERR! stack at Process.ChildProcess._handle.onexit (internal / child_process.js: 204: 12)

gyp ERR! System Windows_NT 10.0.10586

gyp ERR! command "C: \\ Program Files \\ nodejs \\ node.exe" "C: \\ Program Files \\ nodejs \\ node_modules \\ npm \\ node_modules \\ node-gyp \\ bin \\ node -gyp.js "" rebuild "

gyp ERR! cwd F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ node_modules \ utf-8-validate

gyp ERR! node -v v6.2.0

gyp ERR! node-gyp -v v3.3.1

gyp ERR! not ok

npm WARN install: utf-8 [email protected] 1.2.1 utf-8 [email protected] 1.2.1 install: `node-gyp rebuild`

npm WARN install: utf-8 [email protected] 1.2.1 Exit status 1

[email protected] 0.0.1 F: \ ProjectWorkspace \ ReactNative \ HelloWorld

`-[email protected] 15.1.0

npm WARN optional Skipping failed optional dependency / chokidar / fsevents:

npm WARN notsup Not compatible with your operating system or architecture: [email protected] 1.0.12

To run your app on iOS:

   cd F: \ ProjectWorkspace \ ReactNative \ HelloWorld

   react-native run-ios

   -or-

   Open F: \ ProjectWorkspace \ ReactNative \ HelloWorld \ ios \ HelloWorld.xcodeproj in Xcode

   Hit the Run button

To run your app on Android:

   Have an Android emulator running (quickest way to get started), or a device connected

   cd F: \ ProjectWorkspace \ ReactNative \ HelloWorld

   react-native run-android

This heap of errors mainly means that there is no command-line environment for C + + installed. And I took 2 days to solve the problem, although the problem seems relatively simple.

Here's how to fix it:

Through Https://github.com/nodejs/node-gyp#installation, we first need to install VS2015,

Note that the option to select Common Tools for Visual C + + is required during the installation of VS2015 because the default is not selected. This explains that https://blogs.msdn.microsoft.com/vcblog/2015/07/24/setup-changes-in-visual-studio-2015-affecting-c-developers/is not installed by default

If you already have VS2015 installed, then you first open vs and then create a new C + + project, select Install, as follows:

When you install, you are prompted to choose to install C + + as follows:

Finally, the VS version of NPM is set to 2015. Open the command line and enter NPM Config set msvs_version 2015

This way, running react-native init HelloWorld again will not be an error.

Before running, to ensure a small probability error, delete the original HelloWorld folder.

Note that if you see a command that continues to stay in the installing React-native package from NPM ..., press ENTER and it will run automatically. There may be a bug here.

You can see a 105M size

To this, we successfully installed react Native. Our next article will be introduced in succession to start running react Native.

，

React native01-Starting the Windows Environment installation configuration Chapter