无法从 Windows 上的资产 index.android.bundle 加载脚本

Question

我第一次尝试在我的设备 (Android 4.2.2) 上运行我的第一个 React Native 项目。

我得到：

无法从资产 index.android.bundle 加载脚本

我使用的命令：

1. cd (project directory)
2. react-native start
3. react-native run-android

Answer 1

我在关注 React Native tutorial（在 Linux 上开发并针对 Android）时遇到了同样的问题。

这个issue 帮助我通过以下步骤解决了问题。

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。

Answer 2

如果您在物理设备上运行应用程序并收到此错误

unable to load script from assets index.android.bundle

尝试运行命令：

adb reverse tcp:8081 tcp:8081

它对我有用...

Answer 3

我花了几个小时试图解决这个问题。我的问题不是特定于 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

Answer 4

使用 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

Answer 5

我在使用真正的安卓设备时也遇到过同样的问题。

解决方案：基于 Niltoid 的 answer

1. 查找本地 IP
2. 打开应用并摇晃您的 Android 设备
3. 转到开发设置和>调试服务器...
4. 粘贴您的 IP 和端口； X.X.X.X:8088"（其中 X 是您的本地 IP）

对于 Mac 用户：打开您的网络首选项，在这里您将获得您的本地 IP。

Answer 6

如果您使用的是 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

Answer 7

在 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 on 通过执行此包服务器能够捆绑index.android.js。希望它对处于开发阶段的人有所帮助。

Answer 8

您可以按照official page 中提到的说明解决此问题。此问题发生在真实设备上，因为 JS 包位于您的开发系统中，而您真实设备中的应用程序不知道它的位置。

Answer 9

几个月以来，我一直遇到同样的问题。我最初使用@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

Answer 10

1 进入你的项目目录，检查这个文件夹是否存在android/app/src/main/assets

1. 如果存在则删除两个文件，即index.android.bundle 和index.android.bundle.meta
2. 如果文件夹 assets 不存在，则在那里创建 assets 目录。

2.从你的项目根目录做

cd android && ./gradlew clean

3.最后，导航回根目录，检查是否有一个名为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

• 如果有两个文件，即 index.android.js 和 index.ios.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

  4. 现在运行react-native run-android

Answer 11

操作系统：Windows

尝试以上两种方法后解决此问题的另一种方法
（因为我安装 SDK 不是在默认位置，如 C:\users\"user_name"\appdata\local\sdk）

如果您注意到命令行宣布：“'adb' 不被识别为内部或外部命令...”

所以我就是这样克服的：
示例：我将 SDK 安装在 D:\Android\sdk
所以我将在系统变量中再插入 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

它对我有用。

Answer 12

就我而言，我已从 MainApplication.java 中删除了以下行。 （这是我之前错误添加的。）：-

导入 com.facebook.react.BuildConfig；

在那之后清理项目并点击命令

react-native run-android

Answer 13

对于IOS：

在终端中：

cd ios

删除构建文件夹： rm -r build

再次运行： react-native run-ios

或者，您可以打开 Finder，导航到 YOUR_PROJECT/ios 并删除 build 文件夹。

然后再次运行：react-native run-ios

对于 ANDROID：

在终端中：

cd android/app

删除构建文件夹： rm -r build

再次运行： react-native run-android

或者，您可以打开 Finder，导航到 YOUR_PROJECT/android/app 并删除 build 文件夹 .

然后再次运行：react-native run-android

Answer 14

我也遇到了这个问题，因为当我在模拟器上运行项目时，它工作正常，但在真实设备上却出现了这个错误。所以我通过以下解决方案解决了这个问题

第一步：首先打开cmd进入你的SDK管理器Platform-tools文件夹

cd C:Development\Android\Sdk\Platform-tools

第二步：现在运行这个命令：

adb devices

执行此命令后，检查命令提示符中列出的设备

第三步：现在运行这个

adb reverse tcp:8081 tcp:8081

现在您的设置已完成

第四步：进入你的项目目录并运行这个命令

react-native run-android

Answer 15

对于这个问题，我只是通过运行来解决它：

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

每次。

Answer 16

Ubuntu

第一次，我使用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

5. 在android-studio/bin 目录中运行命令./studio.sh。它将打开 Android Studio。

6. 运行命令react-native run-android。

Answer 17

确保 Metro Builder 正在运行以使您的物理设备和服务器同步

首先，运行这个命令来运行metro builder

npm 开始

然后你可以在 react native 中开始构建

react-native run-android

他们这次应该没有错误。如果您希望您的代码在更改时实时重新加载。摇动您的设备，然后点击启用实时重新加载

Answer 18

确保您已将 /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 }

Answer 19

这可能是由您的 React Native 项目代码库中未链接的资产引起的，例如，当您重命名项目应用程序/捆绑包 ID 或添加外部包时未正确链接它。

只需在你的项目根目录中试一试：

react-native link

react-native run-android

Answer 20

如果您在主AndroidManifest.xml 中定义android:networkSecurityConfig，也会发生此问题。调试中的android:usesCleartextTraffic="true" AndroidManifest.xml 将被忽略。

要解决此问题，您必须将应用配置为允许 http 流量到 localhost。

创建文件android/src/debug/res/xml/network_security_config.xml:

<?xml version="1.0" encoding="utf-8" ?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

并在android/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:networkSecurityConfig="@xml/network_security_config" 
        tools:targetApi="28" 
        tools:ignore="GoogleAppIndexingWarning" />
</manifest>

更多信息在这里：https://medium.com/astrocoders/i-upgraded-to-android-p-and-my-react-native-wont-connect-to-my-computer-to-download-index-delta-42580377e1d3

Answer 21

如果在运行react-native run-android 命令时跟踪的第二行是

JS server not recognized, continuing with build...

这意味着应用程序的打包程序无法启动，如果没有一些额外的步骤，应用程序将无法加载。请注意，跟踪结束时仍然报告成功：

BUILD SUCCESSFUL

问题可能是一些端口冲突（在我的情况下，它是我完全忘记的默认 IIS 站点）。该问题的另一种表现形式是无法在 Chrome 中打开 http://localhost:8081/debugger-ui URL。

一旦端口冲突解决，跟踪将报告

Starting JS server...

然后将打开一个额外的节点窗口 (node ...cli.js start)，应用程序将成功加载/重新加载。

之后，您应该可以在 Chrome 中使用 http://localhost:8081/debugger-ui 打开调试控制台。

Answer 22

即使在模拟器上运行时，我也遇到了同样的问题。我做了一个快速的解决方法，以便我可以拥有正常的开发工作流程。

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";
  }
};

在尝试进行生产构建时可能必须恢复更改。

Answer 23

我的 Mac 上的 McAfee 出现问题，阻塞端口 8081，必须将其更改为 8082。

首先运行你的包服务器：

react-native start --port 8082

打开另一个终端，像往常一样启动安卓应用：

react-native run-android

一旦完成，现在重写 adb 隧道的 tcp 端口：

adb reverse tcp:8081 tcp:8082

查看 adb tcp 隧道列表：

adb reverse --list

您现在应该会看到一条温馨的消息：

(reverse) tcp:8081 tcp:8082

转到您的应用并重新加载，完成！

PS：不要更改应用开发设置中的任何内容，如果添加了“localhost:8082”，只需将其删除，留空即可。

编辑： 对于所有 McAfee 受害者，如果您具有 root 访问权限，则有更简单的解决方案，只需暂时终止位于端口 8081 上的 McAfee 进程，根本不需要更改端口：

sudo launchctl remove com.mcafee.agent.macmn

Answer 24

我认为你没有安装 yarn 尝试用巧克力或其他东西安装它。它应该在创建项目之前安装（react-native init 命令）。

无需创建资产目录。

如果不起作用，请回复。

编辑： 在最新版本的 react-native 中，他们已经修复了它。如果你想完全摆脱这个只是卸载节点（要完全卸载 Completely remove node 参考这个链接）并重新安装节点，react-native-cli 然后创建你的新项目。

Answer 25

不要忘记在模拟器设备中打开互联网， 我解决了这个错误，它工作得很好：V 我收到此错误是因为我关闭互联网以测试 NetInfo：D

Answer 26

这是一个一般性的错误信息，你可能在 react native 应用开发过程中遇到过。因此，在本教程中，我们将为这个问题提供解决方案。

问题描述： 无法从 Windows 上的资产 index.android.bundle 加载脚本 无法从 windows 上的资产 index.android.bundle 加载脚本

按照以下步骤解决上述问题：

第 1 步：在项目目录中创建“assets”文件夹 现在在“MobileApp\android\app\src\main”的项目目录中创建资产文件夹。您可以手动创建资产文件夹：

您也可以使用命令创建文件夹。 命令 ： mkdir android/app/src/main/assets

第 2 步：运行您的 React Native 应用程序 让我们运行以下命令在模拟器或物理设备中运行 react native 应用程序。

切换到项目目录。 cd 移动应用程序

运行下面的命令来帮助你打包安卓应用项目。

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/应用程序/src/main/res

运行最后一步以在模拟器或物理设备中运行 react 本机应用程序。 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 && react-native run-android

您可以通过将上述步骤放置在 package.json 的脚本部分中来自动执行这些步骤，如下所示：

"android-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 && react-native run-android"

如果一切设置正确，您应该很快就会看到您的新应用在您的 Android 模拟器中运行。

Answer 27

关注这个，为我工作。

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

进入你的项目目录并检查这个文件夹是否存在 android/app/src/main/assets i) 如果存在，则删除两个文件，即 index.android.bundle 和 index.android.bundle.meta ii) 如果文件夹 assets 不存在，则在那里创建 assets 目录。

从你的项目根目录做 cd android && ./gradlew clean

最后，导航回根目录并检查是否有一个名为 index.js 的条目文件 i) 如果只有一个文件，即 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

ii) 如果有两个文件，即 index.android.js 和 index.ios.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

现在运行 react-native run-android

Answer 28

我刚刚遇到完全相同的问题并解决了它。所以希望对您有所帮助。

假设您正在组装一个发布应用程序包（.apk）

1. 检查你的 assets 文件夹是否存在？：\android\app\src\main\assets 如果没有，请创建一个。

2. 执行“Assemble Release”后，检查该文件夹中是否有任何东西（\android\app\src\main\assets） 如果没有，请查找 js bundle 文件(index.android.bundle)，该文件应位于以下路径之一以上：

   *a)\android\app\build\intermediates\merged_assets\release\out\index.android.bundle

   b)\android\app\build\intermediates\merged_assets\release\mergeReleaseAssets\out\index.android.bundle

   c)\android\app\build\intermediates\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或者命令控制台，执行：

react-native run-android --variant=release

它应该可以工作。

祝你好运！

Answer 29

我花了半天的时间来解决这个问题......

如果您使用的是 API 目标版本高于 28.0.0，那么您可能会遇到这个问题。

只需添加这一行

android:usesCleartextTraffic="true"

在您的清单应用程序块中。

清单应用程序块代码。

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

Answer 30

实际上，在我的情况下（React-native 版本 0.61.5 并尝试在设备上安装调试 APK）没有一个答案对我有帮助，我的解决方案是将 bundleInDebug: true 添加到 android/app/build.gradle，如下所示：

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true,  // clean and rebuild if changing
    bundleInDebug: true
]