AndroidはJSバンドルを読み込めませんでした


201

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
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

詳細については、kzzzfの回答をご覧ください。


Stllはまだ問題を理解していません。しかし、その間、あなたはあなたのシミュレーターでそれを試すことができます。それは私のgenymotionで完全にうまく機能しています。
— ブライアン

ローカルサーバーで実行する2つのコマンドを入力しようとすると、Powershellで「アンパサンド(&)文字は使用できません」というエラーが表示されます。コマンドを実行するときにapp-dirのルートにいる必要があると思いますか?
— user2236165

1
これは、adb reverseがサポートされていないため、Android 4.1でのUSB経由のデバッグが不可能であることを意味しますか?
— bonh 2016年

実行adb reverse tcp:8081 tcp:8081するには、ADB 1.0.32バージョンが必要です。reverseオプションは1.0.31にはありません
— jvalen

回答:


110

サーバーを実行しながらJSファイルをAPKにreact-native startバンドルするには()アプリのアセットディレクトリにバンドルをダウンロードします。

curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

次のリリース(0.12)ではreact-native bundle、Androidプロジェクトで期待どおりに機能するようにコマンドを修正します。


ありがとうございました!バンドルされたアセットを使用するようにreactInstanceManagerに指示するにはどうすればよいですか?それとも魔法は自動的に発生しますか?
— マシュー

9
ファイルの作成に失敗しました警告:android / app / src / main / assets / index.android.bundle:そのようなファイルはありませんまたは警告:ディレクトリ
— almeynman '26

2
警告:ファイルの作成に失敗しました警告:android / app / src / main / assets / index.android.bundle:そのようなファイルがないか警告:ディレクトリcurl:(23)書き込みに失敗しました(0!= 16167)
— Shivang

3
@Shivang:android / app / src / mainにディレクトリアセットを作成します。まだ存在していないため、このエラーが発生しました。
— piscator 2016年

1
これは、テスト目的でアプリをローカルに配布する場合に最適でシンプルな方法です。(生地経由)感謝
— Dinesh Anuruddha 2016年

90

次の方法で、Ubuntu 14.04で動作しました。

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

更新:参照

Update 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をフェッチしようとします。問題は、開発サーバーがデバイスではなくワークステーションのローカルホストで実行されることです。そのため、サーバーを機能させるには、次のいずれかを行う必要があります。


5
— OSBで

できます!どうもありがとう。iOSのmain.jsbundleのように、jscodelocationがapkリソースを指す方法があるかどうか知っていますか?
— Matthew

@dsissitkaに質問してもいいので、ここのスレッドに記録されます-それは正確に何をしますか?
— scgough

@マシュー恐れるな。ごめんなさい!
— dsissitka

:私たちは、Android 4.2上で実行されていると、このエラーを取得している場合はどうstackoverflow.com/questions/31525431/...
— オーギュRiedinger

39

わかりました、私はここで問題が何であるかを理解したと思います。watchman私が走っていたバージョンと関係があった。

新しいシェルで、brew update 次に実行します。brew unlink watchman 次に:brew install watchman

今、あなたはreact-native startあなたのプロジェクトフォルダから実行することができます

このシェルを開いたままにして、新しいシェルウィンドウを作成react-native run-androidし、プロジェクトフォルダーから実行します。世界はすべて正しい。

ps。私は元々、watchmanのバージョン3.2を使用していました。これにより3.7にアップグレードされました。

pps。私はこれが初めてなので、ソリューションへの最短ルートではないかもしれませんが、私にとってはうまくいきました。

*デバイスで実行/デバッグするための詳細情報*

アプリをエミュレーターではなくAndroidデバイスに展開すると、赤い画面で死を知らせるエラーが表示されますUnable to load JS Bundle。デバイスのデバッグサーバーを設定して、反応を実行しているコンピューターにする必要があります。名前またはIPアドレスのいずれかです。

  1. デバイスMenuボタンを押します
  2. 選択する Dev Settings
  3. Debug server host for deviceまたはを選択しますChange Bundle Location
  4. マシンのIPを入力し、JSとリアクションポートをリロードします。 192.168.1.10:8081

詳細:http : //facebook.github.io/react-native/docs/running-on-device-android.html


@ jacobross85よかった!気に入ったら
— 投票し

1
brew uninstall watchman最新バージョンがインストールされる前に実行する必要がありました。
— Amozoss

これらのデバッグに関する情報をエミュレーターではなくAndroidデバイスに追加しました。
— 2015

すでに最新バージョンのウォッチマンを実行していましたが、これで修正されました。Weeeeird
— pfac、

1
この兄弟をありがとう、それは本当に役に立ちます。それが私があなたに賛成票を与える理由です。
— Priyank Jotangiya 2018年

17

プロジェクトディレクトリから、

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)

1
OPが報告した問題も発生しています。react-native run-androidプロジェクトフォルダからを使用してプロジェクトを実行します。端末で問題なくビルドされますが、デバイスでアプリが開くとすぐに赤いUnable to download JS bundle
— 画面

6
adb reverse tcp:8081 tcp:8081
— Matthew

1
adb reverse tcp:8081 tcp:8081を実行したところ、エラーが発生しました:closed error:closed
— JacobRossDev

1
同じ問題、エラーが発生しました:終了しました。何か助けてください?
— Eusthace、2015年

Androidを使用している場合は、「Dev設定」でIPアドレスが正しいことを確認してください。動的IPを使用している場合、これは一晩で変わる可能性があります。
— Sam Purcell、2016年

13

Ubuntu 14.04で動作する簡単なソリューション。

react-native run-android

エミュレーター(既に起動済み)が返されます。JSバンドルをダウンロードできません。JSサーバーを再起動します。

react-native start

エミュレータで[JSの再読み込み]をクリックします。それは私のために働いた。それが役に立てば幸い


実際に動作します。すべての答えのうち、これが最も簡単な解決策です。これが公式ドキュメントにないことは信じられません。
— bluecollarcoder 2016

OPは、エミュレーターではなく、デバイス上で実行されます。これらの手順は、追加のセットアップを行わないデバイスでは機能しません。受け入れられた回答を参照してください。
— davidgoli 2016年

8

Androidのアプリでメニュー(GenymotionのCommand + M)を開きました-> Dev Settings-> Debug server host&port for device

値をlocalhost:8081に設定します

それは私のために働いた。


ありがとう!私のために働きました
— ハワード

7

ここで答えの組み合わせを試した後、これが私にとってうまくいきます。

エミュレータとして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エミュレータからリロードします。

搭載!

これで開発を始めることができます。


「エラー:クローズ」を「adb reverse」で2回取得
— almeynman、2015年

参考までに:デバッグサーバーホストをポート8081のWiFiアドレスに設定するという「ダニエルマサリン」の回答で上記を行っています。RNv 0.17.0で動作しています
— ooolala

これは私にとって非常に役立ちます:)上記のAPI 21+でのみ機能します
— Ashwini Bhat

4

お使いの携帯電話からアプリを削除してください!私はいくつかの手順を試しましたが、最終的にはそれで終わりました。

  1. 以前にアプリを実行しようとしたが失敗した場合は、削除場合は、Androidデバイスからしてください。
  2. 走る $ react-native run-android
  3. Androidデバイスのアプリ内からReact Rage Shake Menuを開き、Dev Settings次に移動しDebug server host & port for deviceます。サーバーIP(お使いのコンピュータのIP)とホストがあります入力します8081例えば、192.168.50.35:8081。Macでは、コンピュータのIPは次の場所にありますSystem Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address。
  4. レイジシェイクメニューを再度開き、をクリックしますReload JS。


2

コメントするほどの評判はありませんが、これはdsissitkaの回答を参照しています。Windows 10でも動作します。

繰り返しますが、コマンドは次のとおりです。

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

2

android(release)でアプリを実行する簡単な手順は次のとおりです。

1.アプリケーションのルートに移動します。

2.このコマンドを実行します。

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android / app / src / main / assets / index.android.bundle --assets-dest android / app / src / main / res

すべてのファイルがコピーされます。

3.署名済みAPKを作成します。

Android Studioを開きます。

ビルド>署名済みAPKの生成> [必要な詳細を入力し、この手順の前にキーストロークを生成する必要があります]

APKはエラーなしで生成されます。デバイスにインストールすると、問題なく機能するはずです。

デバイスを接続して、Android Studioの実行アイコンを直接押してテストすることもできます。


キーストロークの生成:

  1. 後藤C:\プログラムファイル\のJava \ jdkx.x.x_x \ binに

  2. 走る

keytool -genkey -v -keystore d:\ my_private_key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

それはおそらくあなたにいくつかの詳細を記入するように頼むでしょう。それを実行して、APKの署名に使用できるキーストロークファイル(my_private_key.keystore)を用意します。


react-native bundleエラーが発生した後:リソースの重複
— Amir Shabani

1

Linuxでこれを停止した後、 react-native run-androidプロセスを。ノードサーバーはまだ実行中のようです。次回に実行すると、正常に実行されず、アプリに接続できません。

ここでの修正は、Xtermで実行されているノードプロセスを強制終了することです。これは、ctrl-cそのウィンドウを(簡単に)実行することで強制終了できるか、またはそれを使用してlsof -n -i4TCP:8081それを見つけることができます。kill -9 PID。

その後、react-native run-android再度実行します。


1

Wi-Fi接続を確認してください。

別の可能性としては、wifiに接続されていない、間違ったネットワークに接続されている、または開発設定のIPアドレスが間違っている可能性があります。何らかの理由で、私のandroidがwifiから切断され、無意識のうちにこのエラーが発生し始めました。


ありがとう、それだけでした。デフォルトでは、デバッグサーバーはローカルネットワークに到達しています。したがって、Wi-Fiアクセスがない場合はアクセスできません。
— Paul

1

デバイスで実行中

別の答えを見つけました。

  • adb reverse:Android 5.0+(API 21)でのみ機能します。
  • 別の方法:デバイスを振って[開発]メニューを開き、[開発設定]に移動し、[ デバイスのデバッグサーバーホスト]に移動し、マシンのIPアドレスとローカル開発サーバーのポートを入力します。



0

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デバイスは、ローカルに電話ではなく、コンピューター上のノードサーバーを検索します。


0

最初の質問 phyisicalデバイスにアプリケーションをリロードについてでした。

物理デバイスで(つまり、adbを介して)アプリケーションをデバッグしているときに、デバイスの左上の「アクション」ボタンをクリックして、JSバンドルをリロードできます。これにより、オプションメニューが開きます(リロード、JSをリモートでデバッグ...)。

お役に立てれば。


0

このエラーは、次の手順で簡単に解決できます。

    //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

1
adb reverse tcp:8081 tcp:8081アプリのルートフォルダーで実行できますか?
— Marson Mao

OSでadbフォルダーを見つけます。Android SDK /プラットフォームツール/
— Atif Hussain '19

1
しかし、私はこのコマンドがアプリのルートフォルダーで実行できることを言及している多くの場所を見ています。また、dsissitkaによる回答は、ルートのアプリフォルダーで実行することを提案しているので、本当に混乱しています。
— Marson Mao

このコマンドは、react-nativeでも処理できます。これについてはよくわかりません。しかし、adbはandroid sdkツールでサポートされています。あなたは、ここで詳細を見つけることができますfacebook.github.io/react-native/docs/...
— ATIFフセインを

1
@MarsonMaoシステムの設定によっては、アプリディレクトリからadbを実行できる場合があります。詳細については、PATH変数とグローバルパッケージとローカルパッケージを参照してください。
— mchandleraz 2018年

0

公式ページに記載されている手順に従って、この問題を修正できます。JSバンドルは開発システムにあり、実際のデバイス内のアプリはその場所を認識していないため、この問題は実際のデバイスで発生します。


0

新しい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>

0

同じ端末で2つの端末を起動し、1番目の端末でreact-native startを実行し、2番目の端末でreact-native run-androidを実行すると、この問題は簡単に解決されます。そして幸運


0

ちょっと私は私の反応ネイティブのベアプロジェクトでこの問題に直面していました、IOSシミュレータは正常に動作しますが、アンドロイドは私にこのエラーを出し続けました。ここに私のために働いている可能な解決策があります。

ステップ1、adbデバイスがターミナルで実行することによって承認されているかどうかを確認します:adb devices

権限がない場合は、次のコマンドを実行します

ステップ2、sudo adb kill-serverステップ3、sudo adb start-server

次に、adb devicesコマンドがemulator-5554デバイスに接続されているデバイスのリストを表示するかどうかを確認します

不正ではなくデバイスである場合

ステップ4、npx react-native run-androidを実行します

これは私のインスタンスで機能しました。これで問題が解決することを願っています。


0

私はこれが奇妙であることがわかりましたが、解決策を得ました。時々、プロジェクトフォルダーが読み取り専用になり、VSから保存できないことに気付きました。そこで、ローカルユーザーPATHからシステム全体のPATHグローバル変数にNPMを転送するという提案を読みましたが、これは魅力的なものでした。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.