Windows版本搭建安裝React Native環境配置

一.開發環境搭建要求

在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疑難點,問題深坑最強總結帖)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容