react-native 環境配置&Android studio搭配夜神模擬器做react-native調試常遇問題

前提在window Android 下 遇到問題不要慌解決就是了 沒有問題你會安心嗎
一、根據RN官網https://reactnative.cn/docs/getting-started/講述下載相應的,必要的JDK、python、Android studio;
照着對應的安裝教程都沒什麼問題,這些做完後下載夜神模擬器進行安裝,
常遇問題:在保證JDK、python、Android studio、adb安裝完成環境變量配置完成的前提下去查找問題,其實我們主要爲了在電腦上用android的一個環境而android studio就爲我們提供了這樣一個環境,有了環境我們還需要一個設備來顯示我們的項目,在電腦上也就是我們的模擬器,當然也可以用真機,模擬器與服務器正常鏈接時,點擊Android studio裏的Run app會出現一個設備也就是當前連接的模擬器,(android studio裏運行項目只有在項目的android文件下運行Run app按鈕纔會亮),模擬器問題大多是80端口被佔用,可以在項目裏自定義一個端口,在運行項目時想查看數據及運行變化,可以在根目錄下命令行運行adb logcat或android studio裏logcat查看數據變化,操作上也不用太在意用的多了就熟了,一般新建項目在Android studio裏出現的問題不多,一般都是SDk版本差異導致的;而老項目的話一些依賴I版本較低,API被替換導致。

二、重點來了:

鏈接夜神模擬器adb鏈接
前提要安裝adb並配置環境變量
(1)、打開夜神模擬器,(調試時需打開開發者模式,點擊首頁下的設置,如果沒有開發者選項點擊關於平板電腦點擊版本號激活開發者模式)
(2)打開命令行窗口,
(3)打開到夜神安裝目錄(如cd D:\Program Files\NOX\Nox\bin),
(4)執行命令:nox_adb.exe connect 127.0.0.1:62001,連接模擬器,(.\adb devices或adb devices查看當前模擬器ip),出現Already connected to 127.0.0.1:62001說明已連上(有時需多來兩下)
(5)若Android Studio連接不上夜神,重啓模擬器即可。
(6)雷電模擬器除端口外(一般爲5555)鏈接步驟一致

1、運行RN項目報錯

  • 在初始化RN項目時查看Android–>app–>src–>main下有沒有assets文件沒有的話會報錯,需創建一個assets文件夾用來存放靜態資源,然後在命令行運行react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

  • 運行react-native run-android時如果紅了一片並出現Task :app:installDebug FAILED(後面跟了一堆),這個錯的大致意思是沒有找到安裝設備,也就是沒有找到相應的真機或模擬器,這時候不用擔心,安裝鏈接模擬器即可

2、在Android studio裏運行

  • 在Android studio裏運行RN項目時可能會遇到一些報錯,這個時候不要着急分析報錯內容,最好的方式複製你的錯誤到網上找答案,這裏附上我遇到的幾個問題:

(1)、在Android studio裏初始化項目時

  • 如果報錯SDK有問題,有可能你沒有安裝Android studio SDK需要在files–>settings–>System Settins–>android SDK裏進行安裝具體可以找文檔;

  • buildToolsVersion版本不一致報錯的可以到android下的build.gradle裏找到buildToolsVersion並統一

(2)、在Android studio裏點擊Run app時報錯(Run app(android文件下) == react-native run-android(根目錄下) 運行目錄不同)

  • Unknown run configuration type AndroidRunConfigurationTyp原因是因爲插件被禁用了,到
    File >> Setting >> Plugins右側的插件好多都是紅顏色,點擊後面的選框,插件變爲灰色,然後點擊apply再點擊ok

  • Error: Please select android sdk找到setting->android SDK 路徑那裏點擊EIT進去選擇第一個Android SDK-(installed) 一路next

3、在模擬器裏運行報錯

首先打開模擬器的開發者調試(底部的設置)
在夜神模擬器裏搖一搖調出功能選項,
Reload 刷新
Enable Live Reload 開啓會實時更新整個項目
Disable Hot Reloading 開啓實時刷新當前修改頁
Dev Settings 輸入本地ip+端口 (默認8081)

  • 出現unable to load script… 或者javascript version 0.55.2 native version 0.5.8 此類問題刪除app/mian下的assets在RN項目根命令窗口輸入react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

  • 出現403可能8081端口被佔用,可在node-modules下的react-native–>local-cli–>server–>server.js裏{command:爲port,default: 設置端口}

  • 這個對象修改然後修改Dev Settins 下的端口

  • 出現500需重啓

真機測試的話需要打開開發者選項USB調試和USB對應的一些功能(具體看情況)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章