看完這篇教程你會學到如何在安卓模擬器里運行一個React Native程序。
我的電腦及軟件環境
系統: windows10 64
Node:8.5.0
然后安裝下面的工具,不分先后。
首先說下 create-react-native-app
npm install -g create-react-native-app
并按照教程 嘗試啟動,執行完執行npm start
會出現個二維碼,讓我們在手機里安裝expo,掃一掃就可以打開react native應用。注意要處在同一網絡。經常會出現timeout。
Android Studio 3.0 (注意這個不是必須的,我主要是用他來安裝android sdk)
這個安裝過程會比較慢,而且加上sdk等大約會占2G的空間。按照網站的視頻安裝就行,安裝完就可以啟動一個安卓程序了。
注意sdk的安裝路徑,我們要保證命令行可以直接運行adb。
我是在環境變量里添加了C:\Users\{替換成你的計算機名}\AppData\Local\Android\Sdk\platform-tools
genymotion
這個需要注冊帳號,然后按照expo的推薦,安裝安卓虛擬設備,可以是Nexus5。
安裝 expo XDE
簡單說expo是一個工具,可以運行react native,并且在genymotion模擬器里打開,提供live reload等功能,還可以發布你的程序。類似開發微信小程序那個工具。
具體文檔
實測發現不太穩定。可能會受到不同的電腦環境和環境變量的影響。
這里要注意一點ADB的配置
大致流程:
-
用
create-react-native-app
創建一個項目,比如名叫RN_First
image.png -
用Expo XDE打開這個項目并運行
運行后界面如下,
image.png 打開Genymotion并運行安卓模擬器
- 然后在expo里選擇Device-Open on Android,成功的話可以在安卓模擬器看到啟動expo并打開了我們的RN項目
如果修改代碼,比如App.js,會立即發生變化。
遇到的坑:
ADB server didn't ACK, failed to start daemon
答: 發現adb的環境變量設的不對,之前裝過安卓sdk造成有兩個adb。expo找的是老的adb。
參考
Error running adb: Error running app. Error: Activity not started, unable to resolve Intent { act=android.intent.action.VIEW dat=exp://192.168.0.100:19000 flg=0x10000000 }
答: 檢查adb配置,最后重裝expo解決。
原諒我用了粗話,因為第一次接觸,走了不少彎路。
關于模擬器里調試:
ios里按cmd+R,對于安卓,點擊菜單按鈕
總結:
- 最好用mac開發react native,畢竟這個工具的開發者很多都用的MBP,坑會少一些。
- 工具盡量從官方下載,不要胡亂從第三方網站下載
- 開發前建議多看幾遍 expo 文檔。清楚你每步的操作是什么。
相關工具官方下載地址:
Android Studio
genymotion