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 HelloWorldThis will walk you through creating a new React Native project in F:\ProjectWorkspace\ReactNative\HelloWorldInstalling 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 rebuildF:\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 find WindowsSDKDir variable from the registry.  TargetFrameworkVersion or PlatformToolset may be set to an invalid version 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 errorgyp ERR! stack Error: `C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe` failed with exit code: 1gyp 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.10586gyp 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\bufferutilgyp ERR! node -v v6.2.0gyp ERR! node-gyp -v v3.3.1gyp ERR! not oknpm 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 rebuildF:\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 find WindowsSDKDir variable from the registry.  TargetFrameworkVersion or PlatformToolset may be set to an invalid version 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 errorgyp ERR! stack Error: `C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe` failed with exit code: 1gyp 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.10586gyp 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-validategyp ERR! node -v v6.2.0gyp ERR! node-gyp -v v3.3.1gyp ERR! not oknpm 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.0npm WARN optional Skipping failed optional dependency /chokidar/fsevents:npm WARN notsup Not compatible with your operating system or architecture: [email protected]1.0.12To 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 buttonTo 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 Native01-開始 Windows環境安裝配置篇