在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](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過程一波三折,主要歸結為以下幾點:
- 牆。我使用的是ss,但是這個過程中還是會有問題,主要是家用環境下。這個關系到npm的使用,這個可以使用淘寶鏡像。Android環境搭建,這個我是在Androiddevtools上找的方法,公司環境下輕松安裝,家用環境到現在還是沒有搞定。
- bug。這個過程中本身就有一些問題,關於node版本的問題(手動升級4.1.1),react-native版本的問題(手動clone 0.12-rc)。
- 如果以上問題解決了,我想這個過程還是很愉快的。只想吐槽一下學習不容易啊。接下來主要的內容就是學習,同時學習ionic與react-native其實就是表層在同時在學習angular與react,至於深層次的我還不懂,暫時也不必細節。學知識,我是先學會用,再學習為什么要這么用,你呢?交流很關鍵,總結很重要。不是隨時都有時間來重新學習,珍惜眼下充裕的時間,學習,學習,學習。