1. 程式人生 > >React-native 搭建開發環境指導【5】-------編譯並執行

React-native 搭建開發環境指導【5】-------編譯並執行

這個環節是出問題最多的地方。操作很簡單,遇到問題也不要慌。都能解決。
在所建立的專案路徑下,開啟cmd視窗。輸入命令列

react-native start

這一步是在開啟packager,也可以在Android Studio 自帶的Terminal視窗執行命令。
在這裡插入圖片描述

可以用瀏覽器訪問
http://localhost:8081/index.bundle?platform=android
8081 是預設埠,如果該埠已經被其他程式佔用,你就需要切換其他埠了。

看看是否可以看到打包後的指令碼(看到很長的js程式碼就對了)。第一次訪問通常需要十幾秒,並且在packager的命令列可以看到形如[====]的進度條。
在這裡插入圖片描述


packager可以在後續,幫你展現你編譯執行的情況。如下圖
在這裡插入圖片描述

開啟packager以後,可以執行你的專案了。開啟另一個cmd視窗,輸入下面的命令。(模擬器已開啟情況下)

react-native run-android

執行成功情況如下
在這裡插入圖片描述
packager也會相應的顯示編譯成功
在這裡插入圖片描述
然後你就可以在App.js中修改程式碼,在模擬器頁面雙擊R,重新整理頁面。