android - tutorial - react-native-cli




Android無法加載JS包 (16)

一個簡單的解決方案,適用於Ubuntu 14.04。

react-native run-android

模擬器(已經啟動)將返回:無法下載JS Bundle; 再次啟動JS服務器:

react-native start

在模擬器上點擊Reload JS。 它對我有用。 希望它會有所幫助

我正在嘗試在我的Nexus5(Android 5.1.1)上運行AwesomeProject。

我能夠構建項目並將其安裝在設備上。 但是當我運行它時,我得到一個紅色屏幕說

無法下載JS包。 您是否忘記啟動開發服務器或連接設備?

在本機iOS中,我可以選擇離線加載jsbundle。 我怎麼能為Android做同樣的事情? (或者至少,我在哪裡可以配置服務器地址?)

更新

要使用本地服務器運行,請在react-native項目根目錄下運行以下命令

  1. react-native start > /dev/null 2>&1 &
  2. adb reverse tcp:8081 tcp:8081

請查看dsissitka的答案了解更多詳情。

要在沒有服務器的情況下運行,請通過運行以下命令將jsfile捆綁到apk中:

  1. android/app/src/main 下創建一個assets文件夾
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

請查看kzzzf的答案以獲取更多詳細信息。


以下內容在Ubuntu 14.04上對我有用:

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081

更新 :見

更新2 :@scgough我們收到此錯誤,因為React Native(RN)無法從我們工作站上運行的開發服務器獲取JavaScript。 你可以在這裡看到為什麼會這樣:

https://github.com/facebook/react-native/blob/42eb5464fd8a65ed84b799de5d4dc225349449be/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java#L116-L137

如果您的RN應用程序檢測到您正在使用Genymotion或模擬器,它會嘗試從GENYMOTION_LOCALHOST(10.0.3.2)或EMULATOR_LOCALHOST(10.0.2.2)獲取JavaScript。 否則,它假定您正在使用設備並嘗試從DEVICE_LOCALHOST(localhost)獲取JavaScript。 問題是開發服務器在工作站的本地主機上運行,而不是在設備上運行,因此為了使其工作,您需要:


啟動兩個終端在同一個和第一個終端運行react-native start和第二個終端react-native run-android這個問題以簡單的方式解決。 祝你好運


在Android上的應用程序我打開菜單(Genymotion中的Command + M) - >開發設置 - >調試服務器主機和設備端口

將值設置為:localhost:8081

它對我有用。


在嘗試了這裡的答案組合之後,這對我有用。

我正在使用Genymotion作為我的模擬器。

1啟動Genymotion模擬器。

2從終端

cd AwesomeProject
react-native run-android # it loads in genymotion and fails with bundle error
react-native start > /dev/null 2>&1 & # from dsissitka
adb reverse tcp:8081 tcp:8081 # from dsissitka

3從模擬器重新加載。

加載!

我現在可以開始發展了。


在新的React Native(肯定是0.59)中,調試配置在 android/app/src/debug/res/xml/react_native_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
  </domain-config>
</network-security-config>

從手機中刪除應用程序! 我嘗試了幾個步驟,但最終做到了。

  1. 如果您之前嘗試運行應用程序但失敗了, 請將 其從Android設備中 刪除
  2. 運行 $ react-native run-android
  3. 在Android設備上的應用程序中打開React Rage Shake菜單,轉到 Dev Settings ,然後轉到 Debug server host & port for device 。 輸入您的服務器IP(您的計算機的IP)和主機 8081 ,例如 192.168.50.35:8081 。 在Mac上,您可以在 System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address 找到您的計算機的 System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address
  4. 再次打開Rage Shake菜單,然後單擊 Reload JS

從項目目錄中運行

react-native start

它輸出以下內容:

$ react-native start
 ┌────────────────────────────────────────────────────────────────────────────┐ 
   Running packager on port 8081.                                             
                                                                              
   Keep this packager running while developing on any JS projects. Feel       
   free to close this tab and run your own packager instance if you           
   prefer.                                                                    
                                                                              
   https://github.com/facebook/react-native                                  │ 
                                                                              
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /home/user/AwesomeProject 


React packager ready.

[11:30:10 PM] <START> Building Dependency Graph
[11:30:10 PM] <START> Crawling File System
[11:30:16 PM] <END>   Crawling File System (5869ms)
[11:30:16 PM] <START> Building in-memory fs for JavaScript
[11:30:17 PM] <END>   Building in-memory fs for JavaScript (852ms)
[11:30:17 PM] <START> Building in-memory fs for Assets
[11:30:17 PM] <END>   Building in-memory fs for Assets (838ms)
[11:30:17 PM] <START> Building Haste Map
[11:30:18 PM] <START> Building (deprecated) Asset Map
[11:30:18 PM] <END>   Building (deprecated) Asset Map (220ms)
[11:30:18 PM] <END>   Building Haste Map (759ms)
[11:30:18 PM] <END>   Building Dependency Graph (8319ms)

我只使用Ubuntu和Android,但我無法運行它。 我找到了一個非常簡單的解決方案,即更新你的package.json文件,改變這一行:

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },

"scripts": {
    "start": "adb reverse tcp:8081 tcp:8081 && node node_modules/react-native/local-cli/cli.js start"
  },

然後通過鍵入來運行服務器

npm run start

這可以確保Android設備在您的計算機上查找節點服務器,而不是在手機本地查找。


我沒有足夠的聲譽來評論,但這是指dsissitka的答案。 它也適用於Windows 10。

重申一下,這些命令是:

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081

檢查你的wifi連接。

另一種可能是您未連接到wifi,連接到錯誤的網絡,或者您的開發設置中的IP地址錯誤。 出於某種原因,我的android與wifi斷開連接,我開始在不知不覺中得到這個錯誤。


檢查到目前為止沒有人提到的一件重要事情: 檢查本地防火牆,確保它已關閉

請參閱我的回复: https://.com/a/41400708/1459275 : https://.com/a/41400708/1459275


通過以下步驟可以輕鬆解決此錯誤:

    //run the command at /android sdk / platforms-tool folder
        adb reverse tcp:8081 tcp:8081

    //now come to root folder of your app
    1. npm start
    2. create 'assets' folder inside rootApp/android/app/src/main/
    3. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
    4. make sure anyone physical or virtual device attached is running.
    5. react-native run-android

運行 npm 從react-native目錄開始為我工作。


最初的問題 是關於在物理設備中重新加載應用程序。

當您在物理設備中調試應用程序時(例如通過adb),您可以通過單擊設備左上角的“操作”按鈕來重新加載JS包。 這將打開選項菜單(Reload,Debug JS遠程...)。

希望這可以幫助。


在設備上運行

我找到了另一個答案。

  • adb reverse:僅適用於Android 5.0+(API 21)。
  • 另一個:通過搖動設備打開Developer菜單,轉到 Dev Settings ,轉到 Debug server host for device ,輸入你 機器的IP地址 本地開發服務器 端口






react-native