1. 程式人生 > >react-native模擬機調試步驟詳解 ——親測有效!!!!

react-native模擬機調試步驟詳解 ——親測有效!!!!

setting div 目的 post 127.0.0.1 med 我沒 -a RF

步驟

  1. 1

    下載安裝夜神模擬器,去夜神官網下載即可!然後安裝完成!進入到初始化項目的目錄,打開cmd命令,運行adb connect 127.0.0.1:62001 鏈接模擬器

    技術分享圖片
  2. 2

    鏈接完成之後,運行安裝react-native項目!react-native run-android

    在運行這個命令之前,最好先開啟項目運行服務,react-native start

    有的情況下,在run-android的時候,會自動開啟服務,

    技術分享圖片
  3. 3

    等待安裝debug版本的剛初始化的react-native項目!安裝完成之後,打開模擬器中的APP,會看到一個react-native的歡迎頁

    技術分享圖片
  4. 4

    這時候一個簡單的剛初始化好的APP就安裝在你的模擬器當中了,然而現在並不能進行調試開發,因為還需要配置以下幾個東西:1.2.記錄電腦的ip地址,可以在cmd命令當中運行ipconfig查詢到ip4地址,3,打開模擬器浮窗,選擇device settings 找到ports設置,運行服務IP加端口,也就是查詢到的IP地址加8081端口,4.設置完成後,即可打開浮窗選擇reload,就刷新的APP,開發調試流程成功!

    那我們先一步步來,獲取IP地址:運行->ipconfig獲取IP地址

    技術分享圖片
  5. 5

    然後打開模擬器浮窗,選擇device settings,點擊之後選擇debug sever host ports那一項

    技術分享圖片 技術分享圖片
  6. 6

    然後輸入之前查詢到的IP地址加端口號,然後確定,點擊返回,打開浮窗,選擇reload就可以開始調試了!

    技術分享圖片 技術分享圖片
  7. 7

    這樣,整個的模擬器調試流程,及過程就已經完成了!用IDE打開項目之後,修改了代碼,直接打開浮窗,reload一下就可以看到效果了!

    如果上 面的方法不行試試下來的方法

    React Native 與 夜神模擬器的綁定

    之前一直用真機去調試,

    每回更新一次都需要手動搖晃手機後才能reload JS,

    OMG,太麻煩了。

    後來尋思模擬器網上推薦用Geny。。。什麽的模擬器,但是那個模擬器還需要VBox一起用。

    有點麻煩,然後我就下載了一個夜神模擬器。

    速度很快,一點都不卡,但是模擬器系統使android 4.4版本的。有點遺憾。

    好了,進入正題:

    順便說明一下我現在用的工具有關RN的,如下:

    1. Microsoft VS Code:

    技術分享圖片

    2.YeShen模擬器

    3. Nodejs

    4. react-native-master

    React Native 與 夜神模擬器同步:

    首先你需要adb連接到模擬器上。

    但你怎麽知道模擬器device是什麽,adb devices。

    直接運行adb devices那麽應該什麽都沒有。

    首先你需要啟動模擬器,然後進入夜神安裝目錄的bin目錄下。

    1 1. $D:\ReactNative\YeShen\Nox\bin>nox_adb devices

    技術分享圖片

    *如果沒有顯示device那麽到任務管理器中找到NoxVMHandle.exe的PID然後再去找到對應host:port

    *cmd中netstat -aon|findstr 【PID】就會顯示

    然後你就知道device名字了。然後你需要adb與此模擬器連接在一起。

    1 2.$D:\adt-bundle-windows-x86\android-sdk\android-sdk\platform-tools>adb.exe connect 127.0.0.1:62001

    技術分享圖片

    好了,連接成功了。

    然後你就可以吧RN項目安裝到夜神模擬器上面了($react-native run-android)。

    然後我再RN項目中設置Debug Server其中server設置為127.0.0.1:8081但是還是不行。說是我沒有reverse或沒有connect。

    後來我試了一下ipconfig中的ip地址,居然可以了。

    1 5.$在夜神模擬器中設置(使用ipconfig中的ip地址)

    技術分享圖片

    如果通過127.0.0.1:8081不能正常啟動RN項目,那麽就用真實的ip地址應該沒有問題。

react-native模擬機調試步驟詳解 ——親測有效!!!!