react-native —— 在Windows下搭建React Native Android開發環境

在Windows下搭建React Native Android開發環境

前段時間在開發者頭條收藏了 @天地之靈_鄧鋆 分享的《在Windows下搭建React Native Android開發環境》，在開發者頭條的抓取內容能夠看到一部分，因爲一直在休假就沒有仔細學習，今天再次回顧個人收藏時卻發現連接打不開（其實當時也有發現，只是這麼說一下罷了）。因而，你應該知道怎麼作的，最好的工具莫過於搜索而不是一味的抱怨說只能在mac上玩。以前由於react native ios確定是只能在mac上玩，Android就不那麼必須了。好了，我來開始搭建一下環境試試。

React Native Android

安裝JDK

從Java官網之JDK下載列表下載JDK並安裝。請注意選擇x86仍是x64版本。我在這裏直接接受了 @天地之靈_鄧鋆 的推薦將JDK的bin目錄加入到了系統PATH環境變量。注意：下載連接不能直接使用，須要先接受協議（這裏有存入cookies），能夠經過Java官網之JDK下載列表下載JDK。

設置環境變量PATH：jdk的位置。例如：（PATH => D:\Program Files\Java\jdk1.8.0_60\bin）

安裝Android SDK

單獨安裝Android SDK，在牆的環境下，爲了速度我選擇了使用androiddevtools。

設置環境變量ANDROID_HOME：Android SDK Manager的位置 例如：（PATH => D:\Program Files\Android SDK Tools）
設置環境變量PATH：例如：（PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

安裝React-native-cli

npm install -g react-native-cli

初始化項目

react-native init reactNative

報錯了

This will walk you through creating a new React Native project in d:\www\project
\reactNative
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: spawn npm ENOENT
    at exports._errnoException (util.js:746:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
    at child_process.js:1144:20
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)
    at node.js:814:3

windows下執行到這裏就會報錯，緣由是npm在windows下的bug（來源於參考資料）。解決辦法，直接clone項目主分支master。

git clone https://github.com/facebook/react-native.git
cd react-native/react-native-cli && npm install -g

接下來就能夠初始化項目了

react-native init reactNative

運行packager

這裏最新的版本已經修復了 @天地之靈_鄧鋆 提到的BUG。

在工程目錄下運行

node node_modules/react-native/packager/packager.js

這條命令會看見程序開啓了8081端口，而且運行node node_modules/react-native/packager/packager.js能夠看見項目代碼輸出。

Run android app

cd reactNative
react-native run-android

若是沒有安裝安卓模擬器，這裏能夠直接使用真機安裝測試。
這個過程很漫長，等等等……

安卓調試

目前Windows下沒法自動打開chrome進行調試，因此手動打開chrome，訪問以下地址：http://localhost:8081/debugger-ui 便可。

報錯了

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> failed to find target with hash string 'android-23' in: D:\Program Files\Andro
id SDK Tools

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.

BUILD FAILED

Total time: 10 mins 42.463 secs
Could not install the app on the device, see the error above.

解決辦法就是安裝Android-23，對於上一篇關於ionic的文是須要Android-22。

又報錯了

Could not find com.android.support:appcompat-v7:版本號.

安裝Android Support Libraries和Android Support Repository

build成功，安裝上apk後界面紅了

解決辦法

選擇菜單：Dev settings

選擇項：Debug server host for device

設置編譯環境PC的IP地址，例如：192.168.25.121

確保手機與編譯環境在同一WIFI環境下（IP段相同），packager在運行狀態下，重啓APP

初始化歡迎界面就出來了，後面繼續學習中……

一波三折

這個hello world過程一波三折，主要歸結爲如下幾點：

1. 牆。我使用的是ss，可是這個過程當中仍是會有問題，主要是家用環境下。這個關係到npm的使用，這個可使用淘寶鏡像。Android環境搭建，這個我是在Androiddevtools上找的方法，公司環境下輕鬆安裝，家用環境到如今仍是沒有搞定。
   
2. bug。這個過程當中自己就有一些問題，關於node版本的問題（手動升級4.1.1），react-native版本的問題（手動clone 0.12-rc）。
   
3. 若是以上問題解決了，我想這個過程仍是很愉快的。只想吐槽一下學習不容易啊。接下來主要的內容就是學習，同時學習ionic與react-native其實就是表層在同時在學習angular與react，至於深層次的我還不懂，暫時也沒必要細節。學知識，我是先學會用，再學習爲何要這麼用，你呢？交流很關鍵，總結很重要。不是隨時都有時間來從新學習，珍惜眼下充裕的時間，學習，學習，學習。

參考資料

原文參考