webdevqa.jp.net

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の答えを見てください。

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

デバイス上で実行中

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

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

アップデート

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

1

誰もこれまで述べていないことをチェックするための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