ReactNative系列文章:
正文
React Native(以下簡稱RN),已經“火”了好一段時間了,網上的資料相對也很豐富,只是一直遲遲沒有發布1.0,不過出身豪門(Facebook)的RN和國內頂級互聯網公司對於RN的實踐與應用,就足矣證明其實力!
本文分為以下幾個部分:
一、環境搭建;
二、APP調試與運行;
三、擴展知識;
一、環境搭建
系統配置:Win10
模擬器:Visual Studio Emulator for Android(可以脫離VS單獨安裝,也可以使用其他其他模擬器或真機調試)
環境搭建分為兩個部分:
1、Android開發環境搭建(之前已經設置過,可以跳過此步驟);
2、RN開發環境搭建;
1、Android開發環境搭建;
①、安裝JDK,具體步驟不詳述,可以使用Java -version來檢測一下;
②、安裝Android SDK,需要設置環境變量:ANDROID_HOME => Android SDK Manage安裝位置,ex:ANDROID_HOME => E:\android\sdk;
③、設置Android SDK,需安裝已下項:
- Android SDK Build-tools version 23.0.1
- Android 6.0 (API 23)
- Android Support Repository
- Local Maven repository for Support Libraries
如圖:
2、RN開發環境搭建:
①、安裝node環境,https://nodejs.org/en/點擊下載V6.xxx安裝即可;
②、安裝Git,https://git-for-windows.github.io/點擊下載安裝即可;
③、安裝RN腳手架:npm i react-native-cli -g
到此為止環境已經搭建完成。
二、APP調試與運行
1、創建項目
react-native init demo1
2、安裝依賴包
進入demo1根目錄執行:npm i
3、啟動服務器
react-native start
等一段時間,用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android可以訪問,即啟動完成,啟動之后不能關閉;
4、安裝app
react-native run-android
在輸入此命令前,要先打開模擬器,或連接真機,第一次啟動非常慢,需要下載gradle,也可以手動下載gradle安裝。
以下為擴展內容(可忽略):
如果安裝失敗,或者不想等太長時間,點擊:
https://services.gradle.org/distributions/下載,放入C:\Users\用戶名\.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv
如果手動安裝需要執行:react-native run-android重新啟動;
5、運行調試app
本人用的是Visual Studio Emulator for Android(模擬器)運行的,真機或其他模擬器相同,第一次運行會出現錯誤,如圖:
解決方案:設置IP和端口,具體操作,搖一搖手機,Visual Studio Emulator for Android(模擬器)如圖:
如上圖,點擊更多工具 => 加速計 => 點擊播放,模擬搖一搖,點擊Dev Settings后,點擊Debug server host & port for device,設置IP和端口,這個時候返回是空白,再次點擊搖一搖,選擇Reload JS程序就顯示出來了,如圖:
三、擴展知識(重要):每次修改完程序都要搖一搖Reload很麻煩,這個時候有一個很方便的做法開啟熱加載,改動完之后,即可在app自動更新,設置如圖:
設置完之后,就可以愉快的編寫代碼了,所編即所得的及時反饋,着實好用,也大大節省了調試成本!
更多詳情,請移駕:http://reactnative.cn/docs/0.45/getting-started.html
常見問題
問題1:小米手機不能識別設備,安裝不了調試包?
解決方案:設置 =》 開發者選項 =》 關閉“啟動MIUI優化”