一.開發環境搭建要求
在Windows操作系統搭建React Native開發環境要求在電腦上安裝好JDK,Android SDK,還要求電腦上安裝有一套C++編譯器,如果沒有,推薦安裝微軟的VIsual Studio Community 2015
Android的開發環境Android Studio(推薦)或者Eclipse在混合開發中也需要用到
二、環境搭建步驟
第一步:安裝JDK
1.安裝JAVA?JDK(需安裝1.8或更高版本)
下載對應你電腦系統版本的 1.8 32位或64位JDK。第一次是安裝 jdk ,第二次是安裝 jre 。建議兩個都安裝在同一個java文件夾中的不同文件夾中。留意一下JDK安裝的目錄
2. ?JDK環境變量配置
JDK安裝完后,需要配置下環境變量
(1)選擇 ?計算機→屬性→高級系統設置→高級→環境變量
(2)系統變量→新建 JAVA_HOME 變量 。變量值填寫jdk的安裝目錄(本人是?C:\Java\jdk1.8.0_91)
(3)系統變量→尋找 Path 變量→編輯,在變量值最后輸入%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
(4)系統變量→新建 CLASSPATH 變量。變量值填寫.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一點)
系統變量配置完畢
(5)檢驗是否配置成功 運行cmd 輸入 java -version (java 和 -version 之間有空格)。若如圖所示 顯示版本信息 則說明安裝和配置成功。
第二步:安裝Android環境
React Native目前需要Android Studio2.0或更高版本。
除非特別注明,請不要改動安裝過程中的選項。比如Android Studio默認安裝了?Android Support Repository,而這也是React Native必須的(否則在react-native run-android時會報appcompat-v7包找不到的錯誤)。
確定所有安裝都勾選了,尤其是Android SDK和Android Device Emulator。
在初步安裝完成后,選擇Custom安裝項:
-?檢查已安裝的組件,尤其是模擬器和HAXM加速驅動。
安裝完成后,在Android Studio的歡迎界面中選擇Configure | SDK Manager。
在SDK Platforms窗口中,選擇Show Package Details,然后在Android 6.0 (Marshmallow)中勾選Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
在SDK Tools窗口中,選擇Show Package Details,然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1。(必須是這個版本)
ANDROID_HOME環境變量
確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。
打開控制面板?->?系統和安全?->?系統?->?高級系統設置?->?高級?->?環境變量?->?新建
具體的路徑可能和下圖不一致,請自行確認。
PATH增加如下內容 %ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
第三步:其他環境配置
建議安裝上Python 2.7,有些可能不裝也沒事 ? 下載地址 ?https://www.python.org/downloads/ ? 安裝git ? 安裝React-native需要用到git,如果沒有配置git,需要先下載對應的客戶端 ? 下載地址:https://git-for-windows.github.io/
第四步:RN環境設置和搭建
1.?下載穩定版 nodejs v5.7.0 Stable下載網站?https://nodejs.org/en/
2.?安裝后命令行輸入npm測試是否成功
3.React Developer Tools安裝
雖然React Developer Tools在后來的版本中支持Firefox瀏覽器,但目前對他的支持仍然不是很好 因此建議讀者選擇通過Chrome瀏覽器來運行React Developer Tools,下載最新版本的react-devtools-x.xx.x.crx文件打開chrome,地址欄輸入chrome://extensions,講下載crx的文件拖入到chrome窗口的空白處 這時會彈出款確認安裝。安裝完成后,在“允許訪問文件網址”前打鉤。安裝好的界面如下:
4.創建RN項目
npm install -g react-native-cli
react-native-cli是一個終端命令,它可以完成其余的設置工作。它可以通過npm安裝。剛才這條命令會往你的終端安裝一個叫做react-native的命令。這個安裝過程你只需要進行一次。
命令行進入你希望創建項目的目錄輸入react-native init AwesomeProject
可能會很慢,等等就好,大概200多M的文件,一次不成功,也可以嘗試著多試幾次或者直接到GitHub上去下載一個初始化項目。
進入上面使用init命令建立的子目錄下,在本例中,子目錄名是AwesomeProject ,新的npm包會包含更新在運行react-nativeinit命令生成的一些動態文件,例如init創建項目的時候會生成iOS和Android的子項目,我們可以通過以下的命令進行獲取最新的代碼react-native upgrade
5.運行RN項目推薦使用Android手機進行調試,因為Android啟動比較慢,
(1)首先將手機與電腦通過數據線相連。(打開開發者調試模式)
a.在命令行窗口輸入“adb devices”如果手機上已經安裝了正確的驅動程序并且打開了調試模式,則會顯示:
b.繼續在命令行中輸入“adb reverse tcp:8081 tcp:8081”(需保證手機或者模擬器使用的是Android5.0 或者以上的操作系統,5.0以下的解決方案請自行上網查詢)
(2)在RN項目安裝目錄下,輸入命令“react-native run-android”,需要耐心等待一段時間,如果出現以下錯誤提示:
解決方案:
魅族 Meizu m2 note / 魅族 Meizu MX4 / 華為 Huawei Mate 7 / 華為 Huawei P8 / 小米 Redmi Note 2 / 樂視 Letv X500 無法安裝以上手機安裝apk時, 可能會報一個 com.android.ddmlib.InstallException: Unable to upload some APKs, 我們需要修改如下幾個位置:
a.需要將 android/build.gradle 里的 gradle:1.3.1 改為 gradle:1.2.3
b.需要將 android/gradle/wrapper/gradle-wrapper.properties里的 distributionUrl 版本改為gradle-2.2-all.zip
重新run-android
當你看到下面的界面時,
恭喜你,成功了!
(4)看是否自動彈出另外一個DOC窗口并執行沒,否則需要手動打開另外一個DOC窗口執行react-native start
以下網址都是些介紹RN環境搭建和一些異常情況的解決方案的網址,僅供參考:
1.http://reactnative.cn/docs/0.27/getting-started.html(ReactNative 中文網官方文檔)
2.http://www.cnblogs.com/meteoric_cry/p/4874517.html(React-Native android在windows下的踩坑記)
3.http://www.lcode.org/react-native%E7%96%91%E9%9A%BE%E7%82%B9%E9%97%AE%E9%A2%98%E6%B7%B1%E5%9D%91%E6%9C%80%E5%BC%BA%E6%80%BB%E7%BB%93%E5%B8%96%E4%B8%8D%E6%96%AD%E6%9B%B4%E6%96%B0%E4%B8%AD/(React Native疑難點,問題深坑最強總結帖)