邏輯性最強的React Native環境搭建與調試


ReactNative系列文章:

1.《邏輯性最強的React Native環境搭建與調試》

2.《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優化”

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM