reactjs - 无法加载脚本。确保您正在运行 Metro 服务器或您的捆绑包“index.android.bundle”已正确打包以供发布

Question

react-native run-android命令通过在 android 模拟器中留下一条消息来终止。消息如下：

无法加载脚本。确保您正在运行 Metro 服务器或您的捆绑包“index.android.bundle”已正确打包以供发布。

我究竟做错了什么？

score 158 · Accepted Answer

您尚未启动捆绑程序。运行npm start或react-native start在你的项目的根目录之前react-native run-android。

score 106 · Accepted Answer

这些步骤真的对我有帮助：

第一步：在 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。

享受：）

score 49 · Accepted Answer

对我来说，这个错误是由 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/

score 49 · Accepted Answer

如果您已正确配置所有内容，请尝试以下操作：

adb reverse tcp:8081 tcp:8081

为什么？

当 RN 打包程序运行时，您的浏览器中可以访问一个活动的 Web 服务器，地址为 127.0.0.1:8081。当您进行更改时，您的应用程序的 JS 捆绑包就是从该服务器提供和刷新的。如果没有反向代理，您的手机将无法连接到该地址。

Swingline0 的所有学分。

score 45 · Accepted Answer

类似的问题也发生在我身上。
显然 Mcafee 阻止了 8081 端口。我花了几个小时才弄清楚这一点。

尝试运行：

react-native run-android --port=1234

当应用程序在模拟器上显示错误时，进入开发设置 ( Ctrl+ M)。

将“设备的调试服务器主机和端口”更改为“localhost:1234”。

关闭应用程序并从应用程序抽屉启动它。

score 29 · Accepted Answer

您可以尝试以下方法：

在您的 AndroidManifest.xml 中添加这一行

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

编辑：小心，为了您的应用程序的安全，它必须在false生产中

score 20 · Accepted Answer

只需添加三个启动：node_modules\metro-config\src\defaults\blacklist.js

替换这部分：

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

score 17 · Accepted Answer

首先执行步骤 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-使用命令全局安装 react native

  npm install -g react-native-cli

  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位置）

最后，再次运行您的项目..

score 11 · Accepted Answer

[快速回答]

在我的工作区尝试解决这个问题后，我找到了解决方案。

此错误是因为 Metro 使用 NPM 和 Node 版本的某些组合存在问题。

您有 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__\/.*/
];

请注意，如果您运行 annpm install或 ayarn install您需要再次更改代码。

score 9 · Accepted Answer

在尝试了几种方法后，这对我有用。

在文件中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__\/.*/
];

希望这可以帮助。

score 8 · Accepted Answer

从 Android 9.0（API 级别 28）开始，默认情况下禁用明文支持。

如果您正确执行正常运行命令，这就是您需要做的以摆脱此问题

npm 安装
反应原生开始
react-native run-android

并像这样修改你的android清单文件。

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

score 7 · Accepted Answer

7

就我而言，模拟器的 Wifi 和移动数据已关闭。

于 2021-03-24T13:57:05.523 回答

score 7 · Accepted Answer

在遵循 React Native教程（在 Linux 上开发并针对 Android）时，我遇到了同样的问题。

此问题帮助我通过以下步骤解决了问题。按以下顺序运行以下命令：

（在项目目录中）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

您可以通过将上述步骤放置在这样的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，您每次都可以从命令行执行。

score 7 · Accepted Answer

如果您使用的是 linux，请从 App 根目录打开终端并运行

npm start

然后打开另一个终端窗口并运行：

react-native run-android

score 6 · Accepted Answer

像我们大多数人一样，我假设您在 VSCODE 上运行。就我而言，我跑了

npx 反应原生启动

从一个单独的终端

现在在 VSCODE 中从终端运行 npx react-native run-android

score 5 · Accepted Answer

我对此的解决方案如下：

启动 Metro 服务器

$ react-native start

启动安卓

$ react-native run-android

如果看到错误提示“端口 8081 已在使用中”，那么您可以终止该进程并重新运行

$ react-native start

请参阅 React Native 故障排除页面。

score 5 · Accepted Answer

嘿伙计们，两个 awnsers 的组合解决了我的问题。这是与港口有关的。

adb reverse tcp:8088 tcp:8088
react-native run-android --port=8088

通过这样做，该应用程序可以很好地加载我通过 USB 连接的手机。我认为我的 AV 或 Vagrant 或我 PC 中的其他东西正在使用该端口。

如果需要，您可以将 8088 更改为其他内容。

享受！

score 5 · Accepted Answer

几个小时后寻找答案。解决方案是将节点降级到版本 12.4。

在我的情况下，我意识到错误只发生在版本反应本机 0.60 和节点版本 12.6 中。

score 4 · Accepted Answer

显然，没有一个答案为我解决了这个问题。我能够在模拟器上运行 react-native 应用程序，但相同的代码（即使服务器正在运行）在设备上运行应用程序时给了我这个错误。

我能够通过在终端中执行以下命令来解决它：

adb reverse tcp:8081 tcp:8081

score 4 · Accepted Answer

我只想添加一个此处未涵盖的非显而易见的可能性。我正在使用@react-native-community/netinfo来检测网络变化，主要是网络状态。要测试网络关闭状态，需要关闭 WIFI 开关（在模拟器上）。这也有效地切断了仿真器和调试环境之间的桥梁。测试后我没有重新启用 WIFI，因为我离开电脑，回来后很快就忘记了。

有可能其他人也可能出现这种情况，在采取任何其他激烈措施之前值得检查。

score 4 · Accepted Answer

我也遇到过这个问题。我解决了以下步骤。

检查环境 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/metro-config/src/default/blacklist.js

然后运行 npx react-native run-android --port 9001

快乐编码..！

score 3 · Accepted Answer

我确定它是这里提到的其他东西的某种组合，比如允许明文，我为 localhost 启用了它。但这是拼图中的最后一块。

project.ext.react = [
    entryFile: "index.js",

    // ADD THESE THREE

    bundleAssetName: "index.android.bundle",
    bundleInDebug: true,
    bundleInRelease: true
]

注册护士：0.61.3

score 3 · Accepted Answer

3

就我而言，我在模拟器中设置了一个代理。删除该代理后，它恢复正常。

于 2019-09-02T09:15:21.363 回答

score 3 · Accepted Answer

在这里，我如何在不触及构建的情况下解决了这个问题：

1-关闭虚拟设备

2-在物理设备上测试--（有效）

3-使用 API 30 Android 10+ 创建新的虚拟设备

4-在新创建的虚拟设备上再试一次，一切都像魅力一样。

score 3 · Accepted Answer

我遇到了同样的麻烦，对我来说问题是adb不在正确的环境路径中，错误告诉你 Metro 端口，当你在 adb 中时，端口被杀死并重新启动。

添加环境变量 (ADB)

打开环境变量
从第二帧PATH 变量中选择，然后单击下面的编辑选项
点击添加选项
提交sdk平台工具路径C:\Users\My User\AppData\Local\Android\Sdk\platform-tools

注意：或者取决于您机器中 adb.exe 的位置

保存更改

再次运行 android build

$ react-native run-android

或者

$ react-native start

$ react-native run-android

score 2 · Accepted Answer

我遇到这种情况只是因为我的 Wifi 在我的模拟器上被错误地关闭了。我重新打开它并开始正常工作。希望对某人有帮助

score 2 · Accepted Answer

我遇到了类似的问题。npx react-native init创建忽略<project>/android/app/src/debug文件夹的 .gitignore 文件。如果您稍后克隆了此项目，则此文件夹将丢失。解决方案很简单。将来将此行添加到 .gitignore 文件的底部。

!android/app/src/debug

对于您当前的项目，请项目创建者提交此文件夹。我在 react native 版本 0.63 中遇到了这个错误

score 2 · Accepted Answer

这个错误的可能性也是路径错误，检查一次

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

score 2 · Accepted Answer

在 Metro 黑名单中更新此部分

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

score 2 · Accepted Answer

就我而言，我只是关闭应用程序表单模拟器
然后再次运行

react-native run-android

score 2 · Accepted Answer

对我有用的解决方案如下：

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

score 1 · Accepted Answer

对我来说，这个问题始于升级 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

此外，我为升级所做的一项重要更改是在 ../android/build/build.gradle

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

当我尝试将构建（.apk）上传到 goole play 控制台时，我不得不在警告后将 targetSdkVersion 从 27 更改为 28。我几乎没有意识到这对我来说是上述错误的根本原因。@tom 和 @tinmarfrutos 的立即回答是绝对有意义的。

我通过将 android:usesCleartextTraffic="true" 添加到我的 android/app/src/debug/AndroidManifest.xml 解决了这个问题

score 1 · Accepted Answer

这个错误对我来说无处不在，为我解决的问题是：

Android Studio 中的 AVD 管理器
在虚拟设备上的操作下按向下箭头
抹掉数据
重启地铁

score 1 · Accepted Answer

重要 - 您的环境中可能有许多虚拟设备。确保如果要更改 AVD，请再次重复设置。

调试信息-

如果您遇到上述错误，您必须首先验证端口 8081 上运行的内容

找到它的最快方法是在终端中使用以下命令

netstat -aon | findstr 8081

如果这向您显示某些内容，则表示该端口已被阻止。如果可能，请畅通该端口。

否则，您将需要更改端口。Naveen Kumar 在上面的评论中已经提到了这样做的过程

react-native run-android --port=9001

确保不使用 9001 :)

score 1 · Accepted Answer

运行以下两个命令

adb kill-server
adb start-server

之后，运行命令，npm start然后运行 Android Studio 中通常的绿色运行按钮。

score 1 · Accepted Answer

模拟器上的错误消息有点误导。就我而言，我使用的是 Macbook。我需要通过运行更改 android/gradlew 的权限$ chmod 755 ./gradlew，然后可以构建应用程序并将其部署到 android 模拟器。

score 1 · Accepted Answer

默认情况下，一个名为“Metro Server”的小型 JavaScript 服务器在端口 8081 上运行。

您需要使此端口可供此服务器启动。所以，

释放端口
关闭你的虚拟设备
再次“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（最新）

score 1 · Accepted Answer

每当 android 设备无法访问 Metro 服务器时，就会出现这种情况。如果上述方法不起作用，请检查您的 android 设备是否未配置代理。（设置 > 代理 > 无代理）。

score 1 · Accepted Answer

如果您已尝试上述解决方案中提到的所有方法，请尝试以下步骤：

在 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 /主/资源

现在运行你的命令来构建例如 react-native run-android

score 0 · Accepted Answer

我尝试了以下所有解决方案，并由不同的人评论和回答。有时它可以工作，但有时没有一个解决方案适合我.....这个错误的最佳解决方案从物理设备卸载 APK 并再次运行应用程序......它对我有用 100% !!!

步骤1-

APK从物理设备卸载

第2步-

转到安卓文件夹cd android

步骤 3-

输入命令Gradlew Clean

第4步-

输入Cd..回项目

第4步-

运行命令npx react-native run-android或react-native run-android

score 0 · Accepted Answer

在某些情况下，您可能希望关闭 React-native bundler 的端口并使用相同的进程重新运行应用程序

1.sudo kill -9 $(sudo lsof -t -i:9001)

2.npm start inside the project

3. react-native run-android

score 0 · Accepted Answer

对我有用的是：

关闭所有控制台
打开一个新的控制台
$ adb devices
确保您只连接了一台设备
$ react-native run-android

score 0 · Accepted Answer

如果您在 Linux 操作系统上运行，则可能存在您的 npm 远程服务器未运行的情况。打开另一个终端（带有项目目录）并在执行sudo react-native run-android之前运行此命令sudo npm start或sudo react-native start

score 0 · Accepted Answer

    this works for me on ubuntu
    
    1. if you are having node version 17 first downgrade its version:-
    You can use n for node's version management.
    
    this is very easy to use.
    $ npm install -g n
    
    then you can show your node version:
    $ node -v
    v16.13.2
    
    2. create an assets folder inside root of the project:-
    project\android\app\src\main\assets
    set folder name should be assets

3. now the final step implement the given code inside the project folder:- 

$cd project 
/project$ 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

4. after following all these step react-native was successfully running on my pc

score 0 · Accepted Answer

我做了：react-native start 和 npx react-native run-android。

但是，对于 Min19，（基于 Ubuntu）我在运行之前遇到了同样的问题：

echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

来自： https ://reactnative.dev/docs/troubleshooting#content

至少我的手机里运行了这个应用程序。

score 0 · Accepted Answer

您还可以将 node js 降级到低于 12 的版本并删除 nodemodule 然后再次运行 npm install

score 0 · Accepted Answer

我遇到过同样的问题。但是这个方法解决了。cd android使用thengradlew clean或./gradlew clean适用于您的操作系统的任何方法转到 android 文件夹。

score 0 · Accepted Answer

就我而言，我试图在模拟器上运行应用程序。但是，我得到了这个

此 IP 10.0.2.2 可从模拟器 chrome 浏览器访问。问题是此 IP 未在 Android 网络安全设置中列入白名单。因此，您在此处看到的任何 IP 地址都将其添加到以下设置中，您就可以开始使用了。

./android/app/src/main/AndroidManifest.xml

        <application
                android:name=".MainApplication"
+               android:usesCleartextTraffic="true"   <- Add this line
                android:allowBackup="true"
                android:label="@string/app_name"
                android:icon="@mipmap/ic_launcher"

./android/app/src/main/res/xml/network_security_config.xml
</network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">10.0.1.1</domain>
        <domain includeSubdomains="true">10.0.2.2</domain>
        <domain includeSubdomains="true">10.0.3.2</domain>
    </domain-config>
 </network-security-config>

只需替换<domain includeSubdomains="true">10.0.2.2</domain>您在 react-native 的错误中显示的 IP。

score 0 · Accepted Answer

可能你的端口被占用了。尝试在不同的端口上运行：

adb reverse tcp:6666 tcp:6666
react-native run-android --port 6666

检查您使用的端口是否免费

linux：

lsof | grep LISTEN

视窗：

netstat -an

score 0 · Accepted Answer

请检查 Metro 服务器是否正在运行任何其他端口。如果有，请停止所有服务器，然后重新启动服务器，然后重试。

score 0 · Accepted Answer

我也遇到了同样的问题，按照下面的步骤，问题就解决了

清除守望者手表：watchman watch-del-all。
删除 node_modules 文件夹：rm -rf node_modules && npm install.
重置 Metro Bundler 缓存：rm -rf /tmp/metro-bundler-cache-*
移除急速缓存：rm -rf /tmp/haste-map-react-native-packager-*

score 0 · Accepted Answer

0

关闭代理，如果你在android studio中设置代理，默认使用代理

于 2021-12-03T07:52:39.223 回答

score -4 · Accepted Answer

试试下面的。

删除 Android 和 IOS 文件夹
运行反应原生弹出
运行 react-native run-android

也许在前面的步骤之后你有执行 npm start - --reset-cache

我工作，希望对你有帮助。

reactjs - 无法加载脚本。确保您正在运行 Metro 服务器或您的捆绑包“index.android.bundle”已正确打包以供发布

53 回答 53

[快速回答]

添加环境变量 (ADB)

调试信息-

关闭代理，如果你在android studio中设置代理，默认使用代理

Related

Reference