與 Phonegap、Cordova 不同的是,Phonegap、Cordova 是將 Webview (手機瀏覽器的元件)封裝成 App,讓使用者感覺上是在操作App,而不是使用瀏覽器,所以開發者可以用 Javascript/CSS3/HTML5 等網頁的技術來製作 Web UI 並在手機上執行,原則上可以跨平台而不必重寫程式碼。
React Native 則是主張只需學習一次,就在不同的平台上實作,換句話說,React Native 希望開發者僅使用 Javascript ,就可以在 iOS、Android平台開發出原生的 App,以便享有原生 App 的執行速度與特殊功能。
因為上述的優點,所以讓我想一試 React Native 的開發,當然第一步要先將開發環境建置完成,作業系統是windows 7 ,我的做法記錄如下(試了好久才成功將demo畫面顯示出來):
1、安裝 Chocolatey
Chocolatey是給 Windows 使用的套件管理系統,就像 Linux 上的 yum 與 apt 。
因為要以系統管理員的身份執行cmd.exe,所以進到 C:\Windows\System32的資料夾內
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBIpW1tTlIdkwE335fM_Axyo9UNmjM43tiCptpmM-pxLNfpD6Je9cVH3hfsfD-l_lBBy20AD_0hyjJhg8yad5TFT0iwERX4uzHOoOfVV-n1f1Dz786GrKUF6n4Xk4g70yM8rCI5J_b0A/s400/pic0032.png)
在 cmd.exe 按右鍵,點選「以系統管理員身分執行」
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfSCL3X2AIdyyYinE1LMPrRk9ivue7m5ngNlYE4vjHAhT3u59Saktcavv2pxFphQ5peiw7WRc8sfMe2fn4q_Fk1bSHv3jcV3OYtut-LcIIotWnH1ixc9tXWwFbySYSACBQEOmcsKJWXQ/s400/pic0122.png)
開啟 CMD 之後,輸入下列的指令(非多行指令,只有一行)下載並安裝 Chocolatey
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
(官網安裝手冊:https://chocolatey.org/install )
2、安裝 Node.js 與 python2
分別輸入下列的指令:
C:\ choco install nodejs.install
C:\ choco install python2
3、安裝 React Native
安裝完 Node.js 後,就可以利用 npm 來安裝 React Native
C:\ npm install –g react-native-cli
4、下載並安裝 Android SDK
下載網址:https://developer.android.com/studio/index.html
因為我沒有要安裝Android Stuido這個開發工具,所以我下載的是Command line tool版本
解開 Android SDK 後,到SDK 的目錄下,點選 SDK Manager.exe
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsBT4jiRXQvKdsp43nfWtBrxKIYKqdenzaZ_N6o1dR7PmvaKLdorsLAinB7rX8s1b_ZCteYAQu7l16V1j9XXHuKZ3cH1fpnGyXuPPiwvQubq_vYqq4XRSWsF0XgD292n6_pT_U9sFCDZ8/s640/pic007%255B2%255D.png)
開啟SDK Manager,選擇「Tools」下面四個選項,以及「Android 6.0(API 23)」選項
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQrLgbrEacE0GpvkdO6VubJpZRCccIhzUbRyyh0rkDRM_oK7R5Es73fZWKpVLRH5JLxwn8pI8M8VJVxY6KhE4aqzc97nIM9ad5vIANsgWZvCYumT4cNQTxpzY-5MgwOri9F6S7C-1Sd2I/s640/pic009%255B5%255D.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUZPcKG2_DgF1mhpr8wbRhyphenhyphenj8RYe-fXl2CbVPN4Swal73LQFvrf4sMjCUshUMojmuoeyvvyGB1ktb77ADy2F_uks_rmrh7-xgFrX5F70tKPRRFMzl3vUhViE_cyBaH8GhQBgD97JJyIEY/s1600/pic016%255B5%255D.png)
還有「Extras」底下的「Android Support Repostiory」
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidf_BeJryhbK6knKMadK3r8WpcIcfw8A9kgsiYWPjq7SK6PyOVCXOooZ26IJqZmbpTj_Zg3e0nBNg5sQG11_3ZrCIolhVYHeuNQ49Je5B6dQrIocnCqQnLWtKLi6-FHxapn8Cv5BRW_fw/s1600/pic022%255B2%255D.png)
6、安裝Java SE Development Kit(JDK) 下載
我的電腦已經安裝過了,所以不必再重裝一次。
Java 下載網址:http://www.oracle.com/technetwork/java/javase/downloads/index.html
7、設定 Windows 環境變數
React Native 需要設定 ANDROID_HOME 的環境變數,到「控制台」-> 「系統及安全性」 –> 「系統」 –> 「進階系統設定」 –> 「進階),點選「環境變數」
新增變數 ANDROID_HOME 並指定值為 Android SDK 解壓後的路徑
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAgsb3t19g1FXhttOZ4fuHFXi-wfKqNtTBhbOTt3BbgXdCiQgB11jHUwQWEWb_P_FAgJKIttg4nM3U_F_X0oR0kDWL6zWCXTSwxClHRqSrzTLqiQoNSYOvzePeEP6irl19iLD_GbJGayo/s1600/pic026%255B2%255D.png)
8、開啟 Android 模擬器,我是安裝 Genymotion 的 Android 模擬器,也可以用 Andriod SDK 內的模擬器。
Genymotion 官方網站:https://www.genymotion.com/
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg16F6wDMpHXjis1fYyDOQvNPXaaAPQuKUUhV9K7r8KHb7_YGFFYfSyRtq8bkgvugngLRa26g9-FvOm35FUYREiO_f_q-nvDlI3kop_jqNuJHBwNneVa4Kvb-IH5w083QKi2HAsBYgH59U/s640/pic006%255B2%255D.png)
執行 AVD Manager.exe 可以建立並開啟 Android SDK 的模擬器
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXX-YY1FgIP779vip_dnogqZYhCbkkdQstW2a9T-6yFrGxM6qNAgk58aVYMazkO_lKuqauNhIkQitWABTLLDxK67AXley2Q3qBUWOVOeg-00sw62JFK6LoQ5A_mw947oDMMAURrG2Vyo/s640/pic008%255B2%255D.png)
9、測試 React Native
新增一個測試專案,test01
C:\ react-native init test01
React Native 會開始在新增的 test01 目錄下建置iOS、Android相關的程式及檔案,完成之後進入 test01 的資料夾
C:\ cd test01
編譯 App 並讓 App 上傳到模擬器上執行
C:\ react-native run-android
如果沒有其他的錯誤(紅字出現)在 Genymotion 模擬器上就可以看到 App 執行的結果
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMBudzeT1fN9j8caxNVxrf6LiBzkE9Bl4oC3__3JHXM4vAnw1drxCtszd_OlgYI_bSDXEIMyLMgSkpore22ZBDEt7LpQGlv0FlSGjRosFpLcjkfwXotjshEIzj3z_xBFypGhmH_or_Rng/s1600/pic013%255B2%255D.png)