React Native環境配置
史上最全Windows版本搭建安裝React Native環境配置
配置過React Native 環境的都知道，在Windows React Native環境配置有很多坑要跳，為了幫助新手快速無誤的搭建好環境本站推出搭建教程.
安裝學習遇到任何問題可以加入 ReactNative高級交流群 127482131 或訪問 http://blog.1ygowu.com ReactNative技術專題
第一步安裝JAVA JDK
- 下載對應你電腦系統版本的 1.8 32位或64位SDK。
- 下載網站http://jdk.android-studio.org/
- 安裝完成后測試path環境 cmd命令行輸入java 出現下圖內容
第二步安裝android環境
- http://tools.android-studio.org/index.php/sdk
- 下載后安裝installer_r24.3.4-windows.exe,安裝成功后出現下圖界面，選擇SDK Manager打開
- 安裝下列package,都必須安裝,如果如果網站被牆可以設置鏡像網站
- 特別提示 Intel x86 Emulator HAXM INSTALL需要自行安裝，並在BIOS開啟支持 Intel Virtualization Technology
- 如果下載緩慢可以設置鏡像
- 啟動 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環境設置和搭建
- 下載穩定版 nodejs v5.7.0 Stable
下載網站 https://nodejs.org/en/ - 安裝后命令行輸入npm測試是否成功
譯注：由於眾所周知的網絡原因，react-native命令行從npm官方源拖代碼時會遇上麻煩。請將npm倉庫源替換為國內鏡像：
npm config set registry https://registry.npm.taobao.org
npm 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
如果出現上面的腳本內容表示服務器端已經可以了。
第六步 配置安卓模擬器
注意要點內存設置515 開啟GPU
配置好后啟動模擬器，如果不會可以使用genymotion，
建議使用genymotion模擬器比谷歌的模擬器好用
安裝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技術專題
每天進步一點點
分類:
IOS,
ReactNative專題