React Native環境配置

標籤：

React Native環境配置

史上最全Windows版本搭建安裝React Native環境配置

配置過React Native 環境的都知道，在Windows React Native環境配置有很多坑要跳，為了協助新手快速無誤的搭建好環境本站推出搭建教程.

安裝學習遇到任何問題可以加入 ReactNative進階交流群 127482131 或訪問  http://blog.1ygowu.com ReactNative技術專題

第一步安裝JAVA JDK

1.  下載對應你電腦系統版本的 1.8 32位或64位SDK。
2. 下載網站http://jdk.android-studio.org/
3. 安裝完成後測試path環境 cmd命令列輸入java 出現內容

 

 

第二步安裝android環境

1. http://tools.android-studio.org/index.php/sdk
2. 下載後安裝installer_r24.3.4-windows.exe,安裝成功後出現介面，選擇SDK Manager開啟
3.  安裝下列package,都必須安裝,如果如果網站被牆可以設定鏡像網站
   
4. 特別提示 Intel x86 Emulator HAXM INSTALL需要自行安裝，並在BIOS開啟支援 Intel  Virtualization   Technology
5. 如果下載緩慢可以設定鏡像

   

• 啟動 Android SDK Manager ，開啟主介面，依次選擇「Tools」、「Options...」，彈出『Android SDK Manager - Settings』視窗；
• 在『Android SDK Manager - Settings』視窗中，在「HTTP Proxy Server」和「HTTP Proxy Port」輸入框內填入 mirrors.neusoft.edu.cn 和 80，並且選中「Force https://... sources to be fetched using http://...」複選框。設定完成後單擊「Close」按鈕關閉『Android SDK Manager - Settings』視窗返回到主介面；
• 依次選擇「Packages」、「Reload」。 

第三步android環境設定   1.找到我的電腦-屬性-進階系統設定-進階-環境變數   新增ANDROID_HOMN 值現象你安裝的skd目錄 比如：D:\Program Files (x86)\Android\android-sdk 2. PATH增加如下內容%ANDROID_HOME%;%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;  測試是否配置成功，開啟命令列輸入 android 和 adb 分別測試一下  必須測試成功，後面才能正確編譯項目 第四步其他環境配置 建議安裝上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測試是否成功

 譯註：由於眾所周知的網路原因，react-native命令列從npm官方源拖代碼時會遇上麻煩。請將npm倉庫源替換為國內鏡像：

npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist

 npm install -g react-native-cli安裝好之後，可以命令列下就有react-native命令了建立RN項目命令列進入你希望建立項目的目錄輸入 

react-native init AwesomeProject

可能會很慢，等等就好，大概200多M的檔案 在命令列中進入項目目錄，輸入react-native start，等待一段時間：   部分人錯誤需要刪除下面的檔案（自行備份）D:\Program Files\reactnative\MyProject\node_modules\react-deep-force-update\.babelrc  這時候可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android  如果出現上面的指令碼內容表示伺服器端已經可以了。  第六步 配置安卓模擬器   注意要點記憶體設定515 開啟GPU配置好後啟動模擬器，如果不會可以使用genymotion，  建議使用genymotion模擬器比Google的模擬器好用安裝genymotion-2.6.0-vbox 可能要去官網註冊一個帳號官網下載https://www.genymotion.com/下載網盤http://pan.baidu.com/s/1bnTnXs7 安裝後需要配置下，這裡坑了我好久，run-android找不到裝置就需要設定這個 genymotion不能連網配置問題，網上找了很多教程都不能用，後來自行研究如下解決方案  本地串連-屬性-共用-設定如下  查看共用ＩＰ後面設定會用到  修改Oracle VM VirtualBox配置網卡1  網卡2配置  配置IP管理 全域設定雙擊 VirtualBox Host-onley Ethernet Adapter    最後一步，也是最重要一步開啟模擬器 wifi, 否則後面項目報錯。顯示無網路，但是實際可用串連網路測試服務連接埠 ip為你本機IP ipconfig查看本地串連 ipv4地址   第七步 編譯代碼打包到模擬器 cd 到專案檔目錄使用 react-native run-android   等待運行(如果是第一次運行，首先會下載gradle，時間較長)  成功介面  第一次運行會出現，  這時候我們搖一搖手機，點擊Dev Settings後，點擊Debug server host & port for device,設定IP和連接埠   這裡的IP是你本地電腦的ipv4 IP，不知道的可以在命令列中輸入ipconfig進行查詢，連接埠號碼固定8081 設定完成後，回到空白頁面，再次搖一搖手機，選擇Reload JS，程式就運行起來，出現Welcome to React Native！   完成啦如果你安裝學習遇到任何問題可以加入 ReactNative進階交流群 127482131 或訪問 http://blog.1ygowu.com ReactNative技術專題

React Native環境配置