web-dev-qa-db-ja.com

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

Nexus 5（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の下にassetフォルダーを作成します
  2. curl "http://localhost:8081/index.Android.bundle?platform=Android" -o "Android/app/src/main/assets/index.Android.bundle"

詳細はkzzzfの答えを見てください。

androidreact-native
190
Matthew

サーバーを稼働させながら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プロジェクトで動作するように修正される予定です。

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

  • （デバイスのローカルホスト）：8081/tcpから（ワークステーションのローカルホスト）：8081/tcpにトラフィックを転送します。それがそのadbコマンドがすることです。
  • それはあなたの開発サーバーを見つけることができる場所 あなたのRNアプリを教えてください。
87
dsissitka

さて、私は問題がここにあるものを考え出したと思います。私が実行していたwatchmanのバージョンに関係していました。

新しいシェルで、brew update then：brew unlink watchman then：brew install watchmanを実行します。

これで、プロジェクトフォルダからreact-native startを実行できます。

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

ps。私はもともとwatchmanのバージョン3.2でした。これは私を3.7にアップグレードしました。

pps私はこれに慣れていないので、それが解決策への最も速いルートではないかもしれませんが、それは私のために働きました。

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

あなたがあなたのアプリをエミュレータではなくあなたのAndroidデバイスにデプロイするなら、あなたはUnable to load JS Bundleと言うエラーで死の赤いスクリーンを得ることを見つけるかもしれません。あなたのデバイス用のデバッグサーバをあなたのコンピュータが反応するように設定する必要があります...その名前OR IPアドレス。

  1. デバイスのMenuボタンを押します
  2. Dev Settingsを選択
  3. Debug server Host for deviceを選択
  4. あなたのマシンのIPとReload JSと反応ポートを入力してください。 192.168.1.10:8081

より多くの情報： http://facebook.github.io/react-native/docs/running-on-device-Android.html

38
scgough

プロジェクトディレクトリから、実行します。

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)
16
Pēteris Caune

Ubuntu 14.04で私のために働く簡単な解決策。

react-native run-Android

エミュレータ（既に起動済み）が戻ります。JS Bundleをダウンロードできません。 JSサーバーを再起動します。

react-native start

エミュレータでReload JSを押してください。それは私のために働きました。それが役立つことを願っています

13
Raphael_b

Androidのアプリで、メニューを開きました（GenymotionのCommand + M） - > Dev Settings - >デバッグサーバーホストとデバイスのポート

値をlocalhost：8081に設定します。

それは私のために働きました。

7
Daniel Masarin

ここで答えを組み合わせて試した後、これが私のために働いています。

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

ロードします！

私は今開発を始めることができます。

6
ooolala

お使いの携帯電話からアプリを削除してください！私はいくつかのステップを試みましたが、それは結局それをしました。

  1. 以前にアプリを実行しようとしたが失敗した場合は、 削除 あなたのAndroidデバイスから削除してください。
  2. $ react-native run-Androidを実行する
  3. Androidデバイスのアプリ内からReact Rage Shakeメニューを開き、Dev Settingsに移動してからDebug server Host & port for deviceに移動します。そこにあなたのサーバIP（あなたのコンピュータのIP）とHost 8081を入力してください。 192.168.50.35:8081。 Macでは、あなたのコンピュータのIPアドレスはSystem Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Addressにあります。
  4. Rage Shake Menuをもう一度開いてReload JSをクリックしてください。
4
Andru

私はコメントするのに十分な評判を持っていません、しかしこれはdsissitkaの答えに言及しています。 Windows 10でも動作します。

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

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

Android（release）でアプリを実行するための簡単な手順は次のとおりです。

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

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

反応ネイティブバンドル - プラットフォームAndroid - dev false - エントリファイルindex.Android.js - バンドル出力Android/app/src/main/assets/index.Android.bundle --assets-dest Android/app/src/main/res

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

3.署名付きAPKを作成します。

Androidスタジオを開きます。

[作成]> [署名付きAPKの生成]> [必要な詳細情報を入力し、このステップの前にキーストロークを生成する]

あなたのAPKはエラーなしで生成されるはずです。あなたのデバイスにインストールすれば、これは問題なく動作するはずです。

また、あなたのデバイスを接続して直接テストのためにAndroid StudioのRunアイコンを押すこともできます。

キーストロークの生成：

  1. ジャンプ C：¥Program Files¥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 ）を持っています。

2
Edison D'souza

どうやらadb reverseがAndroid 5.0で導入されました
"adb reverse"で "error：closed"が2回発生しました

私たちはkzzzfの答えを先に進めなければならないと思います

2
Nishanth Shankar

デバイス上で実行中

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

  • adb reverse：Android 5.0以降（API 21）でのみ動作します。
  • その他：デバイスを振ってDeveloperメニューを開き、 Dev Settings に移動します。 デバイスのデバッグサーバーホスト 、 マシンのIPアドレス を入力 ローカル開発サーバーのポート
1
Mike Nguyen

アップデート

今すぐWindows上で反応ネイティブの起動を実行する必要はありません。パッケージャが自動的に起動します。

1
Jagadish Upadhyay

誰もこれまで述べていないことをチェックするための1つの重要なこと： あなたのローカルファイアウォールをチェックし、それがオフになっていることを確認してください 。

ここに私の応答を参照してください： https://stackoverflow.com/a/41400708/1459275

1
niltoid

あなたの無線LAN接続を確認してください。

もう一つの可能​​性はあなたがどちらかのWiFiに接続されていない、間違ったネットワークに接続されている、またはIPアドレスがあなたの開発者の設定で間違っていることです。何らかの理由で、私のAndroidは無線LANから切断され、私は無意識のうちに、このエラーを取得し始めました。

1
Kelsey

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

    //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
0
Atif Hussain

新しいReact Native（確実に0.59）では、debug configは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
bobu

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

0
mthakuri

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

0
Chaurasia

最初の質問 は物理的なデバイスにアプリケーションをリロードすることについてでした。

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

お役に立てれば。

0
GuGuss

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
IonicBurger