React Native01-開始 Windows環境安裝配置篇

 

轉載本文章的童鞋請注明原鏈接。

查閱文檔之類的資料，建議到 http://reactnative.cn/

本人使用環境Win10. 在閱讀本文之前，請了解我們安裝React Native之前，要安裝Python2.7、git、android環境、Visual Studio 2015、nodejs。

 

1.安裝Python

1）下載地址 https://www.python.org/downloads/release/python-2711/ 

  建議安裝2.7.11版本，3.x以上版本不支持。

  我安裝的路徑是：C:\Python27

2）在用戶變量中添加：PYTHON_HOME，值：C:\Python27  如下：

3）在系統變量Path中添加兩個變量值：%PYTHON_HOME%、%PYTHON_HOME%\Scripts（其他系統的界面會不一樣，添加的值都一樣）

 

2.安裝git

1）下載地址https://git-for-windows.github.io/

2）下載完直接安裝就可以了。注意到選擇組件這一步驟時，要選擇上’Use a TrueType font in all console windows’.

下一步，選擇Windows Command Prompt

下一步，選擇Checkout Windows-style,commit Unix-style line endings

下一步，選擇Use Windows’default console window

下一步，全選

完成安裝

 

3.配置android環境

1）下載Android Studio http://www.android-studio.org/index.php/download

  此軟件是整個android編程所需要的

2）設置環境變量 ANDROID_HOME

  在環境變量中配置ANDROID_HOME，指定sdk路徑，本人配置如下：

3）配置環境變量path

在環境變量path中添加2個變量：%ANDROID_HOME%\tools、%ANDROID_HOME%\platform-tools

 

4.安裝nodejs

  1）到官網上面下載對應的安裝文件 http://nodejs.cn/download/

 

  默認安裝在C:\Program Files\nodejs文件夾下。

  2）建議設置npm鏡像以加速后面的過程

   安裝成功后，我們在命令行分別輸入：

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

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

  3）配置python版本

  在命令行輸入 npm config set python python2.7

 

 

 

4. 安裝React Native

  1） 安裝React Native有2種方法，第一種直接上github下載解壓，第二種用git命令行下載。

  本人用的是git命令方法，第二種。

  ①在github上下載解壓：

  在github上下載 https://github.com/facebook/react-native。然后解壓，我們解壓在E:\ProgramFiles(自行選擇路徑)。

  ②用git命令行下載

  用命令行進入到E:\ProgramFiles目錄，此目錄更加用戶愛好選擇。輸入此目錄后，會自動下載到當前目錄下。

  然后輸入命令 git clone https://github.com/facebook/react-native.git

 

  通過上述兩種方法，最終看到我們下載下來的react native

 

2）安裝react-native命令行工具

   在命令行輸入：

  npm install -g react-native-cli

 

3. 創建HelloWord項目

1）創建自己的項目路徑，我們創建在 F:\ProjectWorkspace\ReactNative

2）CMD命令行到上面路徑下，然后輸入命令 react-native init HelloWorld 來創建項目。這里HelloWorld為項目名，讀者可根據自己喜好來定義。

  安裝過程要等待一段時間，這個過程會下載一些包。

3）如果第2步等待完成之后，沒有出現錯誤，可以省略這一步。

在等待了很長的時間后（大概半個小時），出現了錯誤，一大推錯誤，如下

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

> bufferutil@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 )
在此解決方案中一次生成一個項目。若要啟用並行生成，請添加“/m”開關。
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 : 錯誤 TRK0005: 未能找到: “CL.exe”。系統找不到指定的文件。


C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Microsoft.CppCommon.targets(356,5): error MSB6006: “CL.exe”已退出，代
碼為 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:bufferutil@1.2.1 bufferutil@1.2.1 install: `node-gyp rebuild`
npm WARN install:bufferutil@1.2.1 Exit status 1

> utf-8-validate@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 )
在此解決方案中一次生成一個項目。若要啟用並行生成，請添加“/m”開關。
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 : 錯誤 TRK0005: 未能找到: “CL.exe”。系統找不到指定的文件。


C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Microsoft.CppCommon.targets(356,5): error MSB6006: “CL.exe”已退出，代
碼為 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-validate@1.2.1 utf-8-validate@1.2.1 install: `node-gyp rebuild`
npm WARN install:utf-8-validate@1.2.1 Exit status 1
HelloWorld@0.0.1 F:\ProjectWorkspace\ReactNative\HelloWorld
`-- react@15.1.0

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@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

  這堆錯誤主要是說沒有安裝C++的命令行環境。而本人經過了2天的時間才解決的這個問題，雖然這個問題看起來比較簡單。

  解決方法如下：

  通過 https://github.com/nodejs/node-gyp#installation 可知，我們首先要安裝VS2015、

  注意的是在安裝VS2015的過程中需要選上Common Tools for Visual C++的選項，因為默認是不選擇的。這里說明默認不安裝 https://blogs.msdn.microsoft.com/vcblog/2015/07/24/setup-changes-in-visual-studio-2015-affecting-c-developers/

  如果你已經安裝了VS2015，那么你首先打開VS，然后新建一個C++項目，選擇安裝，如下：

 

  安裝時，會提示選擇安裝C++，如下：

 

 

  最后吧npm的vs版本設置成2015。打開命令行，輸入 npm config set msvs_version 2015

 

  這樣，再次運行 react-native init HelloWorld 不會報錯了。

  運行之前，為了確保小概率出錯，請刪除原來的HelloWorld文件夾。

  注意一點的是，如果看到命令不斷停留在 Installing react-native package from npm… ，請按回車鍵，會自動運行。此處可能為一個bug。

 

  可以看到大小有105M

 

 

 

 

到此，我們成功安裝React Native。我們下一篇文章將陸續介紹開始運行React Native。

React Native02-開始運行 Android篇

 

可以關注本人的公眾號，多年經驗的原創文章共享給大家。