1. 搭建開(kāi)發(fā)環(huán)境
- 安裝 Node12.x, Python2.x, java JDK 1.8
- Android 開(kāi)發(fā)環(huán)境
- 創(chuàng)建新項(xiàng)目
npx react-native init AwesomeProject
- 打開(kāi)安卓模擬器
- 編譯并運(yùn)行 React Native 應(yīng)用
cd AwesomeProject
yarn react-native run-android --port=8082
- 打包：
cd android
./gradlew assembleRelease
RN默認(rèn)會(huì)使用8081端口纬向，因此如果電腦上有軟件占用8081端口會(huì)導(dǎo)致啟動(dòng)失敗
windows下查找占用指定端口的應(yīng)用程序方法如下：
- 找到pid 3792
-
根據(jù)pid找到占用的軟件
這里我們發(fā)現(xiàn)占用程序是殺毒軟件邁克菲
360截圖20200403153551197.jpg
2. RN 調(diào)試
- 點(diǎn)擊模擬器下的菜單 (
快捷鍵呼起 Ctrl+M) - 點(diǎn)擊debugging择浊，會(huì)自動(dòng)在谷歌瀏覽器打開(kāi)
http://localhost:8082/debugger-ui/ - 切換到審查模式,可以審查元素狀態(tài)，配合下面的開(kāi)發(fā)工具還可以看到節(jié)點(diǎn)和屬性
- 使用獨(dú)立的react-devtools開(kāi)發(fā)工具
//全局安裝
npm install -g react-devtools
//運(yùn)行
react-devtools
很快就能連上模擬器,如果沒(méi)有連接上逾条，切換點(diǎn)擊菜單的debugging按鈕
- 在谷歌瀏覽器調(diào)試時(shí)琢岩，還可以查看組件的屬性和狀態(tài):
- 首先在react-devtools面板選中節(jié)點(diǎn),然后在控制臺(tái)選擇debuggerWorker.js,
最后輸入$r，打印出組件實(shí)例
360截圖20200403154218086.jpg
360截圖20200403154907374.jpg
360截圖20200403154930554.jpg
介紹另外一個(gè)RN調(diào)試?yán)?react-native-debugger
下載安裝后,雙擊打開(kāi)exe程序师脂，默認(rèn)連接8081端口担孔，可以通過(guò)修改配置文件：
360截圖20200408090910957.jpg
