web-dev-qa-db-ja.com

Windowsのアセットindex.Android.bundleからスクリプトを読み込めません

最初のReact Nativeプロジェクトを私のデバイスで初めて実行しようとしています(Android 4.2.2)。

そして私は得ます: 

アセットindex.Android.bundleからスクリプトを読み込めません

私が使用したコマンド:

  1. cd (project directory)
  2. react-native start
  3. react-native run-Android
262
Goba

React Native チュートリアル (Linux上で開発し、Androidをターゲットにしている)をフォローしている間に同じ問題に遭遇しました。

この 問題 は、次の手順で問題を解決するのに役立ちました。

  1. (プロジェクトディレクトリ内)mkdir Android/app/src/main/assets
  2. 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
  3. react-native run-Android

このようにpackage.jsonscripts部分に配置することで上記のステップを自動化できます。

"Android-linux": "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"

そうすれば、毎回コマンドラインからnpm run Android-linuxを実行するだけです。

790
Jerry

アプリケーションを物理デバイス上で実行していてこのエラーが発生した場合

unable to load script from assets index.Android.bundle

コマンドを実行してみてください。

adb reverse tcp:8081 tcp:8081

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

110
Nidhi Shah

Npmバージョン4.3.0の使用react-native-cliバージョン2.01 react-nativeバージョン0.49.5

プロジェクトディレクトリで、 

  • mkdir Android/app/src/main/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

ファイル名が index.Android.js から index.js に変更されました

51
Darshan Pania

私は本当のAndroidデバイスと同じ問題に直面しています。 

解決策:これに基づく 答え / Niltoidさん

  1. あなたのローカルIPを探す
  2. アプリを開いてAndroidデバイスを振る
  3. [開発者設定]> [サーバーのデバッグ]を選択します。
  4. IPとポートを貼り付けます。 X.X.X.X:8088 "(XはあなたのローカルIPです)

macユーザーの場合:ネットワーク設定を開くと、ここでローカルIPが取得されます。 

39
Din Islam Milon

私はこの問題を解決するために何時間も費やしました。私の問題はWindowsに固有のものではなく、Androidに固有のものです。

開発サーバーへのアクセスは、ローカルでもエミュレーターのブラウザーでも機能しました。機能しなかった唯一のことは、アプリ内の開発サーバーにアクセスすることでした。

Android 9.0(APIレベル28)以降、クリアテキストサポートはデフォルトで無効になっています。

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission Android:name="Android.permission.INTERNET" />
    <application
        ...
        Android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

詳細については、を参照してください。 https://stackoverflow.com/a/50834600/1713216

19
neurosnap

Windowsを使用している場合は、次の方法でコマンドを実行するか、「エントリファイルindex.Android.jsが見つかりません」というエラーが表示される場合

  1. mkdir Android\app\src\main\assets
  2. 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

  3. react-native run-Android

19
DJM

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

17
mthakuri

Macで同じ問題を抱えていた、2日を過ごした後、私はついに仕事を始めた。 

Emulator cellular data was turned off以来、私はunable to load script from assets index.Android.bundle make sure your bundle is runningを取得していました。

このパッケージサーバーを使ってEmulator cellular data is turned onindex.Android.jsをバンドルできることを確認してください。開発段階にある人に役立つことを願っています。

13
Srinivas

私は今何ヶ月もの間同じ問題を抱えています。最初は@ Jerryの解決策を使用しましたが、問題を完全に解決できなかったため、これは誤った解決策でした。その代わりに、すべてのビルドをプロダクションビルドとして扱うことになりました。つまり、アプリにわずかな変更を加えても、アプリ全体を再構築する必要があるということです。

これは一時的な解決策ですが、ホットリロードなどのReact Nativeの素晴らしい開発ツールを利用できなくなったため、長期的には恐ろしい動作をします。

適切な解決策は次のとおりです。

MainApplication.Javaファイルで、以下を置き換えます。

@Override
public boolean getUseDeveloperSupport() {
    return BuildConfig.DEBUG;
}

と 

@Override
public boolean getUseDeveloperSupport() {
    return true;
}

何らかの理由でBuildConfig.DEBUGは常にfalseを返し、資産ディレクトリにバンドルファイルが作成されました。

これを手動でtrueに設定すると、アプリはパッケージャを使用するように強制されます。これは実稼働環境では機能しないので、必ずfalseまたはデフォルト値に変更してください。

走ることも忘れないで

$ adb reverse tcp:8081 tcp:8081
11
Stephen Jesse

OS:ウィンドウズ 

上記の2つの方法を試した後この問題を解決するもう一つの方法
(SDKをインストールしたため、 C:\ users\"user_name"\appdata\local\sdk のようにデフォルトの場所にありません) 

あなたがそのコマンドラインがアナウンスしたことに気づいたならば: "'adb'は内部または外部コマンドとして認識されていません..."

だからこれが私が乗り越える方法です:
例:SDKをD:\ Android\sdkにインストールしました
システム変数2にさらに2行追加します。 

D:\Android\sdk\tools  
D:\Android\sdk\platform-tools  

(パスのシステム変数の編集方法がわからない場合は、次のトピックを参照してください。 https://Android.stackexchange.com/questions/38321/what-do-i-type-in​​-path-variable-for- adb-server-to-start-from-cmd/38324

それから私は再びcmdを実行します:react-native run-Android

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

9

IOSの場合:

端末の場合:

cd ios

ビルドフォルダを削除します。 rm -r build

もう一度実行してください。 react-native run-ios

あるいは、Finderを開いて、 YOUR_PROJECT/ios および 削除 the build folder に移動します。 

その後、もう一度実行します。react-native run-ios

Androidの場合:

端末の場合:

cd Android/app

ビルドフォルダを削除します。 rm -r build

もう一度実行してください。 react-native run-Android

あるいは、Finderを開き、 YOUR_PROJECT/Android/app および delete the build folder に移動します。 

その後、もう一度実行します。react-native run-Android

6
Gurbela

この問題のために私はただ実行することによってそれを解決します:

react-native start

それから

adb reverse tcp:8081 tcp:8081

コマンドラインで。それから私は実行することができます: 

react-native run-Android

だから私は実行するために私の時間を無駄にしません:

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

毎回。

物理デバイスとサーバーを同期させるためにmetro builderが実行されていることを確認してください

まず、metro builderを実行するためにこのコマンドを実行してください。

npmスタート

それからあなたは反応ネイティブで構築を始めることができます

反応ネイティブの実行 - Android

今回は彼らは間違いないはずです。あなたのコードを変更してライブリロードさせたい場合。デバイスを振ってから[Live Reloadを有効にする]をタップします

4
Widy Graycloud

私はこの問題に直面していましたが、エミュレータでプロジェクトを実行すると正常に動作しますが、実際のデバイスではこのエラーが発生します。SOを次の解決策で解決します

最初のステップ:まずすべてのcmdを開き、sdkマネージャーのPlatform-toolsフォルダーに移動します。つまり、cd C:Development\Android\Sdk\Platform-tools

2番目のステップ:次のコマンドを実行します:adb devices

このコマンドの後、コマンドpropmtにリストされているデバイスを確認します

3番目のステップ:これを実行しますadb reverse tcp:8081 tcp:8081

これでセットアップは完了です

4番目のステップ:プロジェクトディレクトリに移動し、このコマンドを実行します

react-native run-Android

3
Mudassir Khan

プロジェクトアプリケーション/バンドルIDの名前を変更したり、正しくリンクせずに外部パッケージを追加した場合など、React Nativeプロジェクトコードベースのリンクされていないアセットが原因である可能性があります。

プロジェクトのルートディレクトリで試してください。

react-native link

react-native run-Android
3

私の場合は、MainApplication.Javaから次の行を削除しました。 (これは以前私が誤って追加したものです。) : -

import com.facebook.react.BuildConfig;

そのクリーンプロジェクトの後に命中したコマンド 

反応ネイティブの実行 - Android

3
Poonam

ウブンツ

初めて、私はreact-native init project-nameで新しいアプリを作成しました。同じエラーが発生しました。私の場合は、次の手順で解決します。

  1. 私の場合は、まずSudo chown user-name-of-pc /dev/kvmを実行します。
  2. あなたのAndroid携帯からデバッグしている間、Use USB to Transfer photos (PTP)を選択してください。

  3. プロジェクト名/ Android/app/src/mainにフォルダassetsを作成します。

  4. index.jsがあなたのプロジェクトのrootディレクトリに利用できることを確認してから、cd project-nameディレクトリの後でコンソールから以下のコマンドを実行してください。

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

またはindex.Android.jsの場合は

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

  1. ./studio.shディレクトリでコマンドAndroid-studio/binを実行します。 Android Studioが開きます。

  2. コマンドreact-native run-Androidを実行します。

enter image description here

3
Harat

パス変数に/ path/to/sdk/platform-toolsが追加されていることを確認してください。

React-native run-Androidを実行すると、adb reverse tcp:<デバイスポート> tcp:<ローカルポート>コマンドが実行され、デバイスからコンピュータでローカルに実行されているサーバーにリクエストが転送されます。 adbが見つからない場合は、このように表示されます。

/bin/sh: 1: adb: not found
Starting the app (.../platform-tools/adb Shell am start -n 
com.first_app/com.first_app.MainActivity...
Starting: Intent { cmp=com.first_app/.MainActivity }
3
maximus

シミュレータ上で実行しても同じ問題がありました。通常のdevワークフローを使用できるように、簡単な回避策をとった。

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  @Override
  public boolean getUseDeveloperSupport() {
    // return true here to load JS from the packager
    // BuildConfig.DEBUG for me was set to false which meant it
    // it was always trying to load the assets from assets folder.
    return true;
  }

  @Override
  protected String getJSMainModuleName() {
    return "index";
  }
};

プロダクションビルドを行おうとしたときに、おそらく変更を元に戻す必要があります。

2
nimgrg

これは一般的なエラーメッセージです。ネイティブアプリケーションの開発中に発生した可能性があります。このチュートリアルでは、この問題に対する解決策を提供します。

問題の説明: Windows上のアセットindex.Android.bundleからスクリプトをロードできません Windows上のアセットindex.Android.bundleからスクリプトをロードできません

上記の問題を解決するには、以下の手順に従ってください。

Step-1:プロジェクトディレクトリ内に "assets"フォルダを作成する次に、プロジェクトディレクトリ内に "MobileApp\Android\app\src\main"というアセットフォルダを作成します。資産フォルダを手動で作成できます。

<OR>

コマンド: mkdir Android/app/src/main/assets

Step-2:React Nativeアプリケーションの実行以下のコマンドを実行して、Emulatorまたは物理デバイスで反応ネイティブアプリケーションを実行します。

プロジェクトディレクトリに切り替えます。 cd MobileApp

あなたのAndroidアプリケーションプロジェクトをバンドルするのに役立ちます以下のコマンドを実行します。

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

エミュレータまたは物理デバイスで反応ネイティブアプリケーションを実行するには、最後の手順を実行します。 react-native run-Android

<OR>

最後の2つのコマンドを1つにまとめることもできます。この場合は、commandを1回だけ実行する必要があります。

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

<OR>

このようにpackage.jsonのスクリプト部分に配置することで、上記の手順を自動化できます。

"アンドロイドアンドロイド": "反応ネイティブバンドル - プラットフォームアンドロイド--dev false - エントリファイルindex.js - バンドル出力アンドロイド/ app/src/main/assets/index.Android.bundle --assets最古のAndroid/app/src/main/res && react-native run-Android」

すべてが正しく設定されている場合は、間もなく新しいアプリがAndroidエミュレータで実行されているはずです。

2

ポート8081をブロックしているMacでMcAfeeに問題がありましたが、8082に変更する必要がありました。

まずパッケージサーバーを起動します。

react-native start --port 8082

別の端末を開き、いつものようにAndroidアプリを起動します。

react-native run-Android

終了したら、adbがトンネリングするTCPポートを書き換えます。

adb reverse tcp:8081 tcp:8082

Adb tcpトンネルのリストを見てください。

adb reverse --list

心温まるメッセージが表示されます。

(reverse) tcp:8081 tcp:8082

あなたのアプリに行ってリロードしてください。

シモンズ:あなたが "localhost:8082"を追加した場合、アプリの開発者設定で何も変更しないでください、単にそれを削除し、空白のままにしてください。

編集:そこにいるすべてのMcAfeeの被害者にとって、rootアクセスがある場合は、ポート8081にあるMcAfeeプロセスを一時的に停止するだけで、ポートを変更する必要はまったくない、より簡単な解決策があります。

Sudo launchctl remove com.McAfee.agent.macmn
2
Indrek Ruubel

yarn がインストールされていないと思います。チョコレートなどでインストールしてみてください。プロジェクトを作成する前にインストールする必要があります(react-native initコマンド)。

資産ディレクトリを作成する必要はありません。

うまくいかない場合は返信してください。

編集: 現在のバージョンのreact-nativeでは修正しています。このノードをアンインストールしないで完全に解放したい場合(完全なアンインストールの場合 ノードを完全に削除する場合 このリンクを参照)、react-native-cliから新しいプロジェクトを作成します。

2
Sudhanva Patil

1プロジェクトディレクトリに移動し、このフォルダが存在するかどうかを確認しますAndroid/app/src/main/assets 

  1. 存在する場合は、2つのファイルviz index.Android.bundleindex.Android.bundle.metaを削除します。
  2. フォルダアセットが存在しない場合は、そこでアセットディレクトリを作成します。

2.ルートプロジェクトディレクトリから

cd Android && ./gradlew clean

3.最後に、ルートディレクトリに戻り、index.jsという名前の単一のエントリファイルがあるかどうかを確認します。 

  • Index.jsというファイルが1つしかない場合は、次のコマンドを実行します: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

  • Index.Android.jsとindex.ios.jsという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を実行します。

    1. react-native run-Androidを実行してください
2
mukeshmandiwal

react-native run-Androidコマンドを実行したときに、トレースの2行目が

JS server not recognized, continuing with build...

これは、アプリのパッケージャを起動できず、追加の手順がないとアプリの読み込みに失敗することを意味します。トレースの終わりはまだ成功を報告していることに注意してください。

BUILD SUCCESSFUL

問題はおそらく何らかのポートの衝突です(私の場合、これはデフォルトのIISサイトでしたが、完全に忘れていました)。この問題のもう1つの症状は、Chromeでhttp://localhost:8081/debugger-ui URLを開けなかったことです。 

ポートの競合が解決されると、トレースは報告します。

Starting JS server...

追加の[Node]ウィンドウが開き(node ...cli.js start)、アプリは正常にロード/再ロードされます。

その後、http://localhost:8081/debugger-uiを使ってChromeでデバッグコンソールを開くことができるはずです。

2
mp31415

これに従ってください、私のために働きました。

https://github.com/react-community/lottie-react-native/issues/269

プロジェクトディレクトリに移動して、このフォルダがAndroid/app/src/main/assets に存在するかどうかを確認します。 ii)フォルダ資産が存在しない場合は、そこに資産ディレクトリを作成します。

ルートプロジェクトディレクトリから cd Android && ./gradlew cleanを実行します。

最後に、ルートディレクトリに戻り、index.js という名前の単一のエントリファイルがあるかどうかを確認します。i)ファイルが1つだけの場合、つまりindex.jsがある場合バンドル - プラットフォームAndroid - dev false - エントリファイルindex.js - バンドル出力Android/app/src/main/assets/index.Android.bundle --assets-dest Android/app/src/main/res

ii)index.Android.jsとindex.ios.jsの2つのファイルがある場合は、この react-nativeバンドルを実行します。バンドル出力Android/app/src/main/assets/index.Android.bundle --assets-dest Android/app/src/main/res

今すぐ反応 - ネイティブの実行 - アンドロイドを実行

2
Sameer

react-nativeを0.49.5に更新すると、この問題が発生し、これに従います。 重大な変更と廃止予定

それは消えた。

1
chii

Image

私はこの問題に直面しており、多くの検索を行い、その問題を解決しました。

c:\ProjectFolder\ProjectName> 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

ネイティブの反応を実行するより:

c:\ProjectFolder\ProjectName>react-native run-Android

1
Rohit Bansal

エミュレータデバイスでインターネットをオンにするのを忘れないでください。

1
Nguyễn Phúc

Create-react-native-appから開発してイジェクトし、この問題がdevelopmentに含まれているすべての皆さんにとって、これは私にとってうまくいったことです回答

(プロジェクトディレクトリ内)mkdir Android/app/src/main/assets

開発中のcosを変更する部分は、--dev: false部分を削除することです。

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

その後、すべての端末を閉じ、Android/app /からbuildフォルダを消去して、アプリをビルドするためにクリーンに起動し、新しい端末を開きます。 

(プロジェクトディレクトリ内)npm run Android

パッケージャコンソール(別の端末にあります)にプロンプ​​トを出して正常にビルドします

1
RamiroIsBack

私はちょうど同じ問題に遭遇し、それを解決しました。だから役立つことを願っています。

release アプリケーションパッケージ(.apk)をアセンブルしているとします。

  1. アセットフォルダが存在するかどうかを確認しますか?: \Android\app\src\main\assets 存在しない場合は作成します。

  2. 「Assemble Release」を実行した後、そのフォルダ(\ Android\app\src\main\assets)に何かがあるかどうかを確認します。そうでない場合は、js bundle file( index.Android.bundle )を見つけます。次のパスのうちの2つ以上にある。

    * a)\ Android\app\build\intermediate\merged_assets\release\out\index.Android.bundle

    b)\ Android\app\build \仲介物\ merged_assets\release\mergeReleaseAssets\out\index.Android.bundle

    c)\ Android\app\build \仲介物\ assets\release\index.Android.bundle

    d)\ Android\app\build\generated\assets\react\release\index.Android.bundle *

より良い方法はファイル名を検索するために "Everything"を使うことです:index.Android.bundle。

  1. 次にこのファイルをあなたのアセットフォルダ(\ Android\app\src\main\assets\index.Android.bundle)にコピーします

  2. PowerShellまたはコマンドコンソールに戻り、次のコマンドを実行します。

反応ネイティブのrun-Android --variant = release

それはうまくいくはずです。

がんばろう!

0
bhw1899

実際のデバイスではなく、エミュレータでこの問題に遭遇しました。 Androidスタジオでコードを実行しようとする前に、端末でreact-native startを実行することでそれを修正しました。ターミナルでreact-native run-Androidを実行しているとき、私はこの問題に遭遇したことはありません。 

0
Grace Chandler

上記の解決策をすべて試したが、それでもエラーが発生した場合は、私と同じようにジェノモーションを設定します。

image

他のすべての解決策の前に最初にすべきことは、次のとおりです。

1.デバイスがオンラインかどうかを確認しますか。  

2.実際のデバイス上でアプリケーションを実行している場合、そのデバイスは開発サーバーが実行されているのと同じネットワーク上になければなりません。  

このページで詳細情報。

0
mrenmajozi

この問題は、デバイス/エミュレータのセルラーデータがオフになっていることによっても発生します。必ず確認してください。

0
Kernael

このエラーの場合:「アセット 'index.Android.bundle'からスクリプトをロードできません」

1)。 mkdir Android\app\src\main\assetsで「assets」フォルダを確認します。

フォルダが利用できない場合は、 "assets"という名前のフォルダを手動で作成してください。ターミナルでCurlコマンドを実行します。

2)。 Curlコマンド:curl " http:// localhost:8081/index.Android.bundle?platform = Android " -o "Android/app/src/main/assets/index.Android.bundle"

それは自動的にassetsフォルダに "index.Android.bundle"ファイルを作成し問題を解決します。

3)。反応ネイティブの実行 - Android

0

私はこのcmdによってそれを解決します:

echo fs.inotify.max_user_watches=524288 | Sudo tee -a /etc/sysctl.conf && Sudo sysctl -p
0
Nguyễn Phúc

Windowsの場合

確かに、node.jsがシステムに正常にインストールされたら、システム環境変数を確認し、システム変数に C:\ windows\system32 を追加してください

0
UMUT

私が自分のコードをデバッグしようとしていたときにこの問題がありました(私のAndroid携帯でToggleインスペクタを使用して開発に反応するとき)、私はこの簡単なステップを行いました。

  1. 電話でメニューを開く(Reloadがある場合は、バックボタンを長押しするか電話を振ると開くことができます) ここに画像の説明を入力してください
  2. 開発設定をタップします 
  3. [Debugging] - > [Debug Server Host]で、デバイスのポートを空にする必要があります。[debug]注:portなどを(デバッグ用に)書き込んだ場合は、クリアする必要があります。
0
nadia davari

私の場合は、Android Emulator wifiを無効にしたのを忘れてしまいました。 問題を解決するために、通知バーを下にスワイプしてメニューを展開し、Wifi接続を有効にしました。

Wifi接続を有効にした後、問題は私の場合は解決しました。

0
efkan

Dev Settings - > Debug server Host&port for device - >あなたのコンピュータのWifi IPアドレスを入力してください(Mac OS:システム環境設定 - > WifiをクリックしてWifi IPアドレスを取得してください)。

アプリケーションを再構築して実行する

0
Tung Tran

mkdir ... /assets && react-native bundle --platform..を使用すると、この問題を完全に解決することはできません。

コードを編集するたびにこのコマンドを実行してファイルを再生成する必要があります。また、ReloadまたはDebug JS Remotelyの後にエラーが表示されます。

この問題の根本的な原因は、アプリがサーバーに接続できないことです(理由が不明なため)。

これが私の解決策です:

  • まず、他のホストとポートでサービスを開始します。

    react-native start --port 8082 --Host 0.0.0.0

  • それから、app devメニュー> dev設定> debug server host for deviceを開きます。

  • youripv4address:8082を入力してください
  • dev menu>リロード

お役に立てれば

0
Ian Zhong

私のために働いていた明らかな提案を欠けています。アプリを削除し、サーバーを再起動して、ツールからデバイスに再度デプロイします。 

0
Sam Jarman

[開発設定]で[デバイスのデバッグサーバーホストとポート]を入力した場合は、入力した内容を必ず削除してください。

0
yasincidem