スクリプトを読み込めません。Metroサーバーを実行しているか、バンドル「index.android.bundle」がリリース用に正しくパッケージ化されていることを確認してください


160

react-native run-androidコマンドは、Androidシミュレーターにメッセージを残して終了します。メッセージは次のとおりです。

スクリプトを読み込めません。Metroサーバーを実行しているか、バンドル「index.android.bundle」がリリース用に正しくパッケージ化されていることを確認してください。

スクリーンショット

何が悪いのですか?


あなたはこのリンクstackoverflow.com/questions/32572399/…を試すことができますか?
errorau

5
デバイスがインターネットに接続されていないため、同じ問題が発生します。
Huo Chhunleng

このエラーが発生しました:スローer; //未処理の「エラー」イベント
Saeed

私はそれを見つけてそれを書き留めました。stackoverflow.com
a /

@Belle Solution、何か解決策を見つけましたか?
Hitesh

回答:


94

まだバンドラーを開始していません。実行しnpm startたりreact-native startする前に、プロジェクトのルートディレクトリにreact-native run-android


最初にreact-native startを実行しますが、react-native run-androidを実行すると、ビルドが成功した後に終了します
Belle Solutions

12
2つのノードコンソールを同時に実行する必要があります。1つはバンドルを開始して実行し、もう1つはエミュレータを実行します。
ネルドラゲン

27
私にとっては、バンドラーを起動してもこのエラーが表示されます。
P.Lorand

2
ポート8081がブロックされていないことを確認してください。また、1つの端末を使用してバンドラーを開始し、依存関係グラフの読み込みが完了するまで待ってから、別の端末でreact-native run-androidを実行してください。
ネルドラゲン

1
Windowsでは単独で実行されますが、Linuxでは実行されません。完璧な仕事を!
エイドリアンSerna

62

これらの手順は本当に私を助けます:

ステップ1: android / app / src / main / assetsにディレクトリを作成する

Linuxコマンドmkdir android/app/src/main/assets

ステップ2:(index.android.jsルートディレクトリで)名前をindex.jsおそらくindex.jsファイルがある場合は名前を変更する必要はありませんに名前を変更してから、次のコマンドを実行します。

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: APKを作成します。react-native run-android

最新バージョンのindex.jsをご利用ください。

楽しい :)


反応ネイティブプロジェクトindex.android.jでこのファイルの場所は何ですか
Arbaz.in

ルートディレクトリの@ Arbaz.in。
サイード

@ Arbaz.inたぶんindex.jsルートディレクトリにファイルがあるので、名前を変更する必要はありません
Saeed

@Saeed yesがそれを見つけた
Arbaz.in 19/07/25

3
これは今のところアプリを実行することしかできませんが、これはどのようにしてデバッグとホットローディングを有効にしますか?これは、これを実行するための完全なソリューションではありません。
buddhiv

39

私にとってこのエラーは、react-nativeのアップグレードが原因でした。

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

アップグレードの差分をチェックアウトする場合は、デバッグマニフェストを作成する必要があります android/app/src/debug/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

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

https://react-native-community.github.io/upgrade-helper/


1
RN 0.61.3で私のために働いた。
Żabojad

2
残念ながら、これは私にはうまくいきませんでした。Metro Bundlerが実行されているにもかかわらず、すでにこのエラーが発生し、同じエラーが発生しています。
Andrew

networkSecurityConfigを定義している場合、追加のオーバーライドが必要になることがありますが、常にこれらの設定が原因で問題が発生しているようです。セキュリティ設定を削除してみandroid:usesCleartextTraffic="true"て、メインでAndroidManifest.xmlそれが機能するかどうかを確認できますか?
トム

これはRN 0.62
KevinAdu

android:usesCleartextTraffic = "true"を含むすべての設定がありますが、実際のデバイスでアプリを実行できません。
Lucky_girl

25

最初にステップ4と5を実行してから、プロジェクトを実行できます。(ステップ4および5で)結果が得られない場合は、以下のステップを実行してください。

1-ノードのバージョンをダウングレードしてみてください(現在のバージョンは12.13.1

  choco uninstall nodejs
  choco install nodejs --version 12.8

2- npmモジュール(C:\Users\your user name\AppData\Roaming\npm)のパスをユーザー変数ではなくシステム変数に追加する

3-コマンドを使用して、ネイティブでグローバルに反応をインストールします

  npm install -g react-native-cli

4-プロジェクトディレクトリのルートに移動し、次のコマンドを実行します。

  react-native start

5-プロジェクトのルートで別のターミナルを開き、次のコマンドを実行します。

   react-native run-android 

編集:

Genymotionを使用していますか?はいの場合は、次の手順を実行します。

上記の手順の後、次のエラーが発生した場合は?

error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.

genymotionを開き、次の場所に移動します。

genymotion menu -> Settings -> ADB -> 次に選択しますuse custom android sdk tools(参照をクリックしてSDKの場所を検索します)

最後に、プロジェクトを再度実行します。


1
12.9も私にとってはうまくいきました。おかげで、バージョン12.13.xにアップグレードして、上記の問題が発生し始めました。
Huey Mataruse


18

以下を試すことができます。

この行をAndroidManifest.xmlに追加します

<application
[...]
android:usesCleartextTraffic="true"
/>
[...]
</application>

18

同様の問題が私にも起こりました。
どうやらマカフィーは8081ポートをブロックします。これを理解するのに何時間もかかった。

実行してみてください:

react-native run-android --port=1234

エミュレーターでエラーが発生したアプリが表示されたら、開発設定(Ctrl+ M)に入ります。

「デバイスのデバッグサーバーホストとポート」を「localhost:1234」に変更します。

アプリを閉じて、アプリドロワーから起動します。


1
ヒントをありがとう、ファイアウォールでポート8081を開く必要があり、ファイアウォールが機能し始めました
ukie

このための大きな賛成票。あなたがマカフィーを持っているなら、私はこれを試します、それは私のために働きました
プエルト・

おかげで、私のプロジェクトを保存しました
Rafid

私は2日間ここにとどまっていましたが、それがブロックされた港であるとは考えたこともありませんでした!どうもありがとう!
P. Naoum

ブラウザでlocalhost:8081をヒットしようとしましたが、うまくいきませんでした。少し調査したところ、マカフィーがそのポートをブロックしていることがわかりました。あなたの道を進んだ。完全に正常に動作し始めました。
Tushar Jajodia

17

3つのスプラッシュを追加するだけです:node_modules \ metro-config \ src \ defaults \ blacklist.js

この部分を交換してください:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

12

すべてが正しく構成されている場合は、これを試してください:

adbリバースtcp:8081 tcp:8081

どうして?「RNパッケージャが実行されているとき、ブラウザで127.0.0.1:8081にアクセスできるアクティブなWebサーバーがあります。変更を加えると、アプリケーションのJSバンドルが提供および更新されるのはこのサーバーからです。リバースプロキシがない場合、スマートフォンはそのアドレスに接続できません。」

Swingline0 へのすべてのクレジット


なぜこれが機能するのか、このコマンドは何をするのかを回答に追加していただけませんか?
creyD

ライブラリを切り替えようとして丸一日費やし、これが私の問題でした
Adam Katz

10

[素早い回答]

私のワークスペースでこの問題を解決しようとした後、私は解決策を見つけました。

このエラーは、NPMとノードバージョンのいくつかの組み合わせを使用するMetroに問題があるためです。

あなたには2つの選択肢があります:

  • 代替策1: npmとノードのバージョンを更新またはダウングレードしてみます。
  • 代替2: このファイルに移動し、\node_modules\metro-config\src\defaults\blacklist.jsこのコードを変更します。

    var sharedBlacklist = [
      /node_modules[/\\]react[/\\]dist[/\\].*/,
      /website\/node_modules\/.*/,
      /heapCapture\/bundle\.js/,
      /.*\/__tests__\/.*/
    ];

    これに変更してください:

    var sharedBlacklist = [
      /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
      /website\/node_modules\/.*/,
      /heapCapture\/bundle\.js/,
      /.*\/__tests__\/.*/
    ];

    npm installまたはを実行した場合はyarn install、コードを再度変更する必要があることに注意してください。


8

これは私のために働いたいくつかの方法を試し後にいきました。

ファイル内 node_modules\metro-config\src\defaults\blacklist.js

交換:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

と:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

お役に立てれば。


、魔法のように働いたおかげで
セザール・ベルムデス

私も働いた。しかし、なぜそれを修正しなければならなかったのですか?何が悪かったのか?
Mashrur

その外観から、metro-configパスの代わりに/の代わりに\を使用しましたが、これはこの回答が変更することを示唆しています。 これを行わないでください。npmパッケージを変更すると、チーム全体がマシン、CI、ステージング、本番、およびmetro-configが更新をリリースするたびにこれを行う必要があります。より良いアプローチは、GitHubでmetro-configをフォークし、修正をコミットし、PRをプッシュして送信して、全員のために修正することです。
Cameron Wilby、

6

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

これは、通常の実行コマンドを適切に実行する場合に、この問題を取り除くために必要なことです

  1. npmインストール
  2. 反応ネイティブ開始
  3. 反応ネイティブ実行アンドロイド

そして、このようにあなたのアンドロイドマニフェストファイルを変更します。

<application
    android:name=".MainApplication"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true" // add this line with TRUE Value.
android:theme="@style/AppTheme">

5

時間後に答えを探しています。解決策は、ノードをバージョン12.4にダウングレードすることでした。

私の場合、エラーはバージョン0.6で発生し、ネイティブ0.60とノードバージョン12.6が反応することに気づきました。


4

これに対する私の解決策は以下の通りです:

Metroサーバーを起動する

$ react-native start

Androidを起動

$ react-native run-android

「ポート8081はすでに使用されています」というエラーが表示された場合は、そのプロセスを強制終了して再実行できます。

$ react-native start

React Nativeトラブルシューティングページを参照してください 。


4

Linuxを使用している場合は、アプリのルートディレクトリからターミナルを開いて実行します。

npm start

次に、別のターミナルウィンドウを開いて実行します。

react-native run-android

3

ここではカバーされていない明白でない可能性を追加したいだけです。私が使用しています@を反応させ、ネイティブコミュニティ/ NetInfoのをネットワークの変更、主にネットワークの状態を検出するために。ネットワークオフ状態をテストするには、WIFIスイッチ(エミュレーター上)をオフにする必要があります。これにより、エミュレータとデバッグ環境の間のブリッジも効果的に遮断されます。コンピューターから離れていたので、テスト後にWIFIを再度有効にしていなかったため、戻ったときにすぐにそれを忘れていました。

これは他の誰かにも当てはまる可能性があり、他の抜本的な手順を実行する前に確認する価値があります。


3

私は同じ問題を抱えていましたが、私にとっての問題は、adbが正しい環境パスにないことでした。エラーは、メトロポートを示しています。

環境変数を追加(ADB)

  1. オープン環境変数
  2. 2番目のフレームのPATH変数から選択し、下の編集オプションをクリックします
  3. 追加オプションをクリックします
  4. sdkプラットフォームツールパスC:\ Users \ My User \ AppData \ Local \ Android \ Sdk \ platform-toolsを送信します。

:または、マシンのadb.exeの場所によって異なります

  1. 変更内容を保存

アンドロイドビルドをもう一度実行します

$ react-native run-android

または

$ react-native start

$ react-native run-android

3

私もこの問題に直面しました。次の手順で解決しました。

Environment Veritableでandroid sdkパスを確認してください

追加 ANDROID_HOME = C:\Users\user_name\AppData\Local\Android\Sdkシステム変数
C:\Users\user_name\AppData\Local\Android\Sdk\platform-toolsのパスシステム変数

sharedBlacklistを以下のコードセグメントに置き換えます。

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

node_modules /メトロ-config設定/ SRC /デフォルト/ blacklist.js

次に、npx react-native run-android --port 9001を実行します

ハッピーコーディング..!


2

エミュレータでWifiが誤ってオフにされただけでこれが発生しました。オンに戻し、正常に動作し始めました。それが誰かに役立つことを願っています


2

私のために働いた解決策は次のとおりです:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
]; 

私のコード例


2

メトロブラックリストでこの部分を更新

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

2

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

上記の手順scriptsを次のpackage.jsonように配置することで自動化できます。

"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毎回コマンドラインから実行するだけです。


1

以下を試してください。

  1. AndroidおよびIOSフォルダーを削除する
  2. 反応ネイティブの取り出しを実行する
  3. react-native run-androidを実行する

たぶん前のステップの後で実行npm start---reset-cache

私は働いています。


1

デフォルトでは、「Metro Server」と呼ばれる小さなJavaScriptサーバーがポート8081で実行されます。

このサーバーを起動するには、このポートを使用可能にする必要があります。そう、

  1. ポートを解放する
  2. 仮想デバイスを閉じます
  3. 「react-native run-android」を再び。

ポートを解放するには?

http://tenbull.blogspot.com/2019/05/how-to-kill-process-currently-using.html

Windowsでlocalhostのポートを現在使用しているプロセスを強制終了する方法は?

そして最も重要なのは、facebook @ https://facebook.github.io/react-native/docs/getting-startedで提案されているように、ノードバージョンを8.xから10.x(最新)にアップグレードしたことです


1

私にとってこの問題は、react-nativeのアップグレードから始まりました。64ビットのサポートを追加するには、アップグレードが必要でした。

Before:
-------- 
Environment:
Node: 10.15.0
npm: 6.9.0
Watchman: 4.9.0
Xcode: Not Found
Android Studio: 3.4 AI-183.6156.11.34.5692245

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: ~0.55.2 => 0.55.4
react-native-cli: 2.0.1

After:
------
info 
React Native Environment Info:
Binaries:
Node: 10.15.0
npm: 6.9.0
Watchman: 4.9.0
SDKs:
Android SDK:
API Levels: 23, 26, 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.6 => 16.9.0 
react-native: 0.59.9 => 0.59.9 
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1

また、アップグレードのために私が行った重要な変更の1つは、.. / android / build / build.gradleでした

android {
    ...
    defaultConfig {
        ...
        targetSdkVersion 28
        ...
    }
    ...
}

build(.apk)をgoole play consoleにアップロードしようとしたときに、警告に従ってtargetSdkVersionを27から28に変更する必要がありました。これが私にとって上記のエラーの根本的な原因であることはほとんどわかりませんでした。@tomと@tinmarfrutosによる即座の回答は、絶対的な意味がありました。

私はandroid / app / src / debug / AndroidManifest.xmlにandroid:usesCleartextTraffic = "true"を追加することで問題を解決しました


1

私の場合、エミュレータにプロキシを設定しました。そのプロキシを削除すると、正常に戻ります。


1

このエラーの可能性も間違ったパスです、一度チェックしてください

 export ANDROID_HOME=/Users/microrentindia/Library/Android/sdk/
 export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

これを考えたことはありません。しかし、これが私の答えでした。
Siraj Alam、

1

重要-環境内に多くの仮想デバイスがある場合があります。AVDを変更する場合は、設定を再度繰り返してください。

デバッグ情報-

上記のエラーが発生した場合は、最初にポート8081で何が実行されているかを確認する必要があります

それを見つける最も簡単な方法は、ターミナルで次のコマンドを使用することです

netstat -aon | findstr 8081

それが何かを示している場合は、ポートがブロックされていることを意味します。可能であれば、そのポートのブロックを解除します。

それ以外の場合は、ポートを変更する必要があります。これを実行するプロセスは、Naveen Kumarによる上記のコメントですでに言及されています。

react-native run-android --port=9001

9001も使用されていないことを確認してください:)


1

上記の解決策で言及したすべてを試した場合は、次の手順を試してください。

  1. 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

  1. コマンドを実行して、例えばreact-native run-androidをビルドします。

うわーこれは私に部分的に役立ちました。私はGoogle Playマーケット用にアプリを準備していましたが、Android用の新しいアセットアイコンを追加し、ターゲットversinを28に変更しました。v27バージョンに戻し、すべてが再び機能し始めました...なぜ動作しないのかわかりませんSDK v28。
Michail Pidgorodetskiy

0

Linux OSで実行している場合は、npmリモートサーバーが実行されていない場合があります。別のターミナルを(プロジェクトディレクトリで)開き、このコマンドsudo npm startまたはsudo react-native startを実行してから、sudo react-native run-androidを実行します。


0

エミュレータのエラーメッセージは、誤解を招くようなものです。私の場合、Macbookを使用しました。を実行してandroid / gradlewの権限を変更する必要が$ chmod 755 ./gradlewあり、その後アプリをビルドしてAndroidエミュレーターにデプロイできました。

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