无法加载脚本。请确保您正在运行Metro服务器,或者已正确捆绑了软件包“ index.android.bundle”以进行发布


160

react-native run-android命令会在Android模拟器中留下一条消息来终止。消息如下:

无法加载脚本。请确保您正在运行Metro服务器,或者已正确捆绑了软件包“ index.android.bundle”以进行发布。

屏幕截图

我究竟做错了什么?


你可以尝试这个链接stackoverflow.com/questions/32572399/…吗?
errorau

5
我遇到了同样的问题,因为我的设备未连接到互联网。
霍春伦

出现此错误:throw er; //未处理的“错误”事件
赛义德

我找到了它并将其放下stackoverflow.com/a/58570426/6852210
Alireza,

@Belle Solution,您找到任何解决方案了吗?
Hitesh

Answers:


94

您尚未启动捆绑器。在之前运行npm startreact-native start在项目的根目录中react-native run-android


首先,我运行react-native start,但是在运行react-native run-android时,构建成功后终止运行
Belle Solutions

12
您必须同时运行2个节点控制台。一个启动并运行捆绑程序,另一个运行仿真器。
Nerdragen '19

27
对我来说,即使启动捆绑程序,也会出现此错误。
P.Lorand

2
确保端口8081没有被阻塞。另外,请确保使用一个终端启动捆绑程序,等待其完成依赖关系图的加载,然后在另一终端上运行react-native run-android。
Nerdragen '19

1
在Windows中,它自己运行,但是在Linux中,它不运行!做工完美!
阿德里安·塞纳

60

这些步骤确实对我有帮助:

步骤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。

请享用 :)


这个文件在react native项目index.android.j
Arbaz.in 19/7/24

根目录中的@ Arbaz.in。
Saeed

@ Arbaz.in也许index.js根目录中有一个文件,在这种情况下,您无需重命名
Saeed

@Saeed yes找到了它
Arbaz.19年

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是否可行?
汤姆(Tom)

这对我
有用

我拥有所有这些设置,包括android:usesCleartextTraffic =“ true”,但是我仍然无法在真实设备上运行应用程序。
Lucky_girl

25

首先执行步骤4和5,然后您可以运行您的项目。如果没有得到结果(使用步骤4和5),请执行以下步骤

1-尝试降级您的Node版本(当前版本为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版并开始遇到上述问题。
休伊·马塔鲁斯


18

您可以尝试以下方法:

在您的AndroidManifest.xml上添加此行

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

18

我也发生了类似的问题。
显然,Mcafee阻止了8081端口。花了我几个小时来解决这个问题。

尝试运行:

react-native run-android --port=1234

当应用出现仿真器错误时,进入开发设置(Ctrl+ M)。

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

关闭应用程序,然后从应用程序抽屉中启动它。


1
感谢您的提示,我必须在防火墙中打开端口8081,然后端口开始工作
ukie19,19年

为此大赞。如果您有Mcafee,我可以尝试一下,它对我有用。
波多黎各

谢谢,保存了我的项目
拉菲德

我已经在这里停留了两天,再也不会认为这是一个受阻的港口!非常感谢!
P. Naoum

我试图在浏览器中访问localhost:8081,但没有运气。经过很少的研究,发现Macafee堵塞了该端口。跟着你走。开始工作正常。
Tushar Jajodia

17

只需在其中添加三个启动器:node_modules \ metro-config \ src \ defaults \ blacklist.js

替换此部分:

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

12

如果您正确配置了所有内容,请尝试以下操作:

亚行反向tcp:8081 tcp:8081

为什么?“当RN打包程序运行时,您的浏览器中有一个活动的Web服务器,其位置为127.0.0.1:8081。在您进行更改时,正是从该服务器提供并刷新了应用程序的JS捆绑包。如果没有反向代理,您的电话将无法连接到该地址。”

所有学分归功于Swingline0


您能否在答案中加上为什么这应该起作用以及该命令的作用?
creyD

花了整整一天的时间试图切换库,这是我的问题
Adam Katz

10

[快速回答]

在尝试解决我的工作区中的此问题后,我找到了解决方案。

此错误是因为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__\/.*/
    ];

    请注意,如果您运行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以便为所有人修复它。
卡梅伦·威尔比

6

从Android 9.0(API级别28)开始,默认情况下禁用明文支持。

如果您正确执行正常的运行命令,那么这就是您要解决的问题

  1. npm安装
  2. 反应性开始
  3. react-native运行Android

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

<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.60与节点版本12.6之间的错误中。


4

我对此的解决方案如下:

启动Metro服务器

$ react-native start

启动Android

$ react-native run-android

如果看到错误消息“端口8081已在使用中”,则可以终止该进程并重新运行

$ react-native start

参见 React Native故障排除页面


4

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

npm start

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

react-native run-android

3

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

其他人也可能会遇到这种情况,值得在采取任何其他严厉措施之前进行检查。


3

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

添加环境变量(ADB)

  1. 开放环境变量
  2. 从第二帧PATH变量中选择,然后单击下面的编辑选项
  3. 点击添加选项
  4. 提交sdk平台工具路径C:\ Users \我的用户\ AppData \ Local \ Android \ Sdk \ platform-tools

注意:或取决于adb.exe在计算机中的位置

  1. 保存更改

再次运行android build

$ 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 / metro-config / src / default / 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

在Metro黑名单中更新此部分

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

对我来说,这个问题始于升级本机。升级是添加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
        ...
    }
    ...
}

尝试将build(.apk)上传到goole播放控制台时,在出现警告后,我不得不将targetSdkVersion从27更改为28。我几乎没有意识到这是上述错误的根本原因。立即使用@tom和@tinmarfrutos回答绝对有道理。

我通过将android:usesCleartextTraffic =“ true”添加到我的android / app / src / debug / AndroidManifest.xml中解决了该问题


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包--platform android --dev否--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 react-native run-android之前运行此命令sudo npm startsudo react-native start


0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.