我试图在我的设备上第一次运行我的第一个React Native项目(Android 4.2.2)。
我得到:
无法从assets index.android.bundle中加载脚本
我使用的命令:
CD(项目目录) react-native开始 react-native运行android
我试图在我的设备上第一次运行我的第一个React Native项目(Android 4.2.2)。
我得到:
无法从assets index.android.bundle中加载脚本
我使用的命令:
CD(项目目录) react-native开始 react-native运行android
我在学习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运行android
您可以通过将上述步骤放在包的脚本部分来自动化它们。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。
操作系统:Windows
在尝试以上两种方法后,另一种方法可以解决这个问题 (因为我安装的SDK不在默认位置,如C:\users\"user_name"\appdata\local\ SDK)
如果您注意到命令行显示:“‘adb’未被识别为内部或外部命令……”
这就是我克服的方法: 示例:我在D:\Android\ SDK中安装了SDK 所以我将在系统变量中插入path 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
这对我很管用。
我在真正的android设备上也遇到过同样的问题。
解决方案:基于Niltoid的回答
查找本地IP 打开应用程序,摇晃你的安卓设备 去开发设置和>调试服务器… 粘贴你的IP和端口;X.X.X.X:8088"(其中X是您的本地IP)
Mac用户:打开你的网络首选项,在这里你会得到你的本地IP。
如果在运行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窗口会打开(Node…cli.js start),应用程序将成功加载/重新加载。
之后,你应该能够打开调试控制台在Chrome与http://localhost:8081/debugger-ui。
确保你已经在path变量中添加了/path/to/sdk/platform-tools。
当你运行react-native run-android时,它会运行adb reverse tcp:< device-port > tcp:< local-port >命令将请求从你的设备转发到你计算机上本地运行的服务器。 如果没有找到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 }
如果您正在物理设备上运行应用程序并得到此错误
unable to load script from assets index.android.bundle
试着运行命令:
adb reverse tcp:8081 tcp:8081
这对我很管用……
在mac中也有同样的问题,在花了2天之后,我终于能够得到它的工作。
由于模拟器蜂窝数据被关闭,我得到了无法从assets index.android.bundle加载脚本,确保你的包正在运行。
确保你的模拟器蜂窝数据是打开的,通过做这个包服务器能够捆绑index.android.js。希望这对那些处于发展阶段的人有所帮助。
如果您使用的是Windows,则按照以下方式运行命令,或者如果您得到错误“无法找到入口文件index.android.js”
mkdir android主要\ app \ src \ \资产 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运行android
对于这个错误:"无法从资产'index.android.bundle'中加载脚本"
1).检查“assets”文件夹:mkdir android\app\src\main\assets
如果文件夹不可用,请手动创建名称为assets的文件夹。并在终端执行Curl命令。
2). Curl命令:Curl "http://localhost:8081/index.android.bundle?android平台=“- o”安卓/ app / src / main /资产/ index.android.bundle”
它将创建“index.android”。Bundle "文件在资产文件夹自动解决了这个问题。
3). react-native run-android
使用npm 4.3.0版本的react-native-cli
在项目目录中,
mkdir android / app / src / main /资产 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运行android
文件名由index.android.js更改为index.js
即使在模拟器上运行,我也遇到了同样的问题。我做了一个快速的变通,这样我就可以拥有正常的开发工作流程。
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";
}
};
在尝试进行产品构建时,可能必须恢复更改。
同样的问题我已经有好几个月了。我最初使用@Jerry的解决方案,但这是一个错误的解决方案,因为它没有完全解决问题。相反,它所做的是将每个构建都作为产品构建,这意味着你在应用程序中所做的任何微小更改都意味着必须重新构建整个应用程序。
虽然这是一个暂时的解决方案,但从长期来看,它的效果非常糟糕,因为你不再能够利用React Native的惊人的开发工具,如热重载等。
正确的解决方法如下:
在MainApplication.java文件中,替换如下内容:
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
与
@Override
public boolean getUseDeveloperSupport() {
return true;
}
由于某些原因,BuildConfig。DEBUG总是返回false,并在assets目录中生成一个bundle文件。
通过手动将此设置为true,您将强制应用程序使用packager。这将在生产中不起作用,所以一定要将其更改为false或默认值。
别忘了也要跑
$ adb reverse tcp:8081 tcp:8081
我觉得你没有装纱线试试用巧克力之类的东西装。它应该在创建项目之前安装(react-native init命令)。
不需要创建资产目录。
如果不行就回复。
编辑: 在react-native的最新版本中,他们已经修复了这个问题。如果你想完全摆脱这个卸载节点(完全卸载完全删除节点参考这个链接),并重新安装节点,react-native-cli,然后创建你的新项目。
对于这个问题,我只需要运行:
react-native start
then
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
每一次。
我的mac上的McAfee阻塞端口8081,不得不将其更改为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
回到你的应用程序,重新加载,完成!
PS:不要在应用程序开发设置中更改任何内容,如果你添加了“localhost:8082”,只需删除它,让它为空。
编辑: 对于所有的McAfee受害者,如果你有根访问权限,有一个更简单的解决方案,只是暂时关闭位于端口8081的McAfee进程,根本不需要更改端口:
sudo launchctl remove com.mcafee.agent.macmn
我也面临着这个问题,因为当我在模拟器上运行项目时,它的工作很好,但在真实的设备上,它给出了这个错误。所以我用下面的方法来解决这个问题
第一步:首先打开cmd,进入SDK管理器Platform-tools文件夹
cd C:Development\Android\Sdk\Platform-tools
第二步:现在运行这个命令:
adb devices
执行此命令后,检查命令提示符中列出的设备
第三步:现在运行这个
adb reverse tcp:8081 tcp:8081
现在您的设置完成了
第四步:进入您的项目目录并运行此命令
react-native run-android
当我试图调试我的代码时,我有这个问题(在我的android手机和react开发中使用Toggle检查器),我做了以下简单的步骤:
在手机中打开菜单(在重载的地方,我可以通过长按后退键或摇晃手机来打开它) 在这里输入图像描述 点击“开发设置” 在调试->调试服务器主机和设备端口应该为空 注意:如果你在这里写了port或任何东西(用于调试),你应该清除它。
我面临着这个问题,很多搜索,我解决了这个问题。
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
运行react native:
c: \ ProjectFolder \ ProjectName > react-native运行android
我不是在真正的设备上遇到这个问题,而是在模拟器上遇到的。在尝试使用android studio运行代码之前,我通过在终端中运行react-native start来修复它。在终端中运行react-native run-android时,我从未遇到过这个问题。
我通过这个CMD来解析它:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
就我而言,我忘了Android模拟器的wifi是禁用的。 为了解决这个问题,我只是向下滑动通知栏来展开菜单并启用Wifi连接。
激活Wifi连接后,我的问题就解决了。
这可能是由React Native项目代码库中未链接的资产引起的,例如,当您重命名项目应用程序/包id或添加外部包时没有正确链接。
在你的项目根目录下试试:
react-native link
react-native run-android
对于所有从创建-反应-原生应用程序开发出来的人,在开发过程中遇到这个问题, 这对我来说很管用 这是公认答案中的一个小细节
(在项目目录)mkdir android/app/src/main/assets
下面是需要改变的部分,因为你是在开发中,去掉——dev: false部分:
React-native bundle——platform android——entry-file index.js——bundle-output android / app / src / main /资产/ index.android。包——assets-dest android / app / src / main / res
在关闭所有终端后,从android/app/删除构建文件夹,以确保你开始干净地构建你的应用程序,打开一个新的终端,然后
(在项目目录)NPM运行android
是否会提示打包器控制台(在另一个终端)并成功构建
IOS:
在终端中:
cd ios
使用:rm -r build删除build文件夹
再次运行:react-native Run -ios
或者,你可以打开Finder,导航到YOUR_PROJECT/ios并删除构建文件夹。
然后再次运行:react-native run-ios
为ANDROID:
在终端中:
cd android/app
使用:rm -r build删除build文件夹
再次运行:react-native Run -android
或者,你可以打开Finder,导航到YOUR_PROJECT/android/app并删除构建文件夹。
然后再次运行:react-native run-android
这是一个常见的错误消息,您可能在react本机应用程序开发过程中遇到过。所以在本教程中,我们将为这个问题提供解决方案。
问题描述: 无法在windows上从assets index.android.bundle中加载脚本 无法在windows上从assets index.android.bundle中加载脚本
按照以下步骤解决上述问题:
步骤1:在项目目录中创建“assets”文件夹 现在在项目目录中创建资产文件夹,名为“MobileApp\android\app\src\main”。您可以手动创建资产文件夹:
<或>
您也可以使用命令创建文件夹。 命令: mkdir android / app / src / main /资产
步骤2:运行React Native应用程序 让我们运行下面的命令在模拟器或物理设备中运行react本机应用程序。
切换到项目目录。 cd MobileApp
运行下面的命令来帮助捆绑你的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本机应用程序。 react-native运行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
<或>
您可以通过将上述步骤放在包的脚本部分来自动化它们。Json是这样的:
“android-android”:“react-native bundle——platform android——dev false——entry-file index.js——bundle-output android/app/src/main/assets/index.android. js”Bundle——assets-dest android/app/src/main/res && react-native run-android"
如果一切设置正确,您应该很快就会看到新应用程序在Android模拟器中运行。
Ubuntu
第一次,我用react-native init project-name创建了新的应用程序。 我得到了同样的错误。 所以在我的例子中,我执行以下步骤来解决这个问题。
首先执行sudo chown user-name-of-pc /dev/kvm。 从Android手机调试时,选择“使用USB传输照片(PTP)”。 在project-name/android/app/src/main中创建文件夹资产 确保index.js在你的项目根目录下可用,然后从控制台在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/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. jsBundle——assets-dest android/app/src/main/res
在“android-studio/bin”目录下执行。/studio.sh命令。它将开放Android Studio。 执行命令react-native Run -android。
1进入你的项目目录,检查这个文件夹是否存在android/app/src/main/assets
如果它存在,那么删除两个文件即index.android.bundle和index.android.bundle.meta 如果文件夹资产不存在,则在那里创建资产目录。
2.从您的根项目目录做
cd android && ./gradlew clean
3.最后,导航回根目录,检查是否有一个名为ledindex.js的条目文件
If there is only one file i.e. index.js then run following command 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 If there are two files i.e index.android.js and index.ios.js then run this 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 Now run react-native run-android
照着做,对我有用。
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. jsBundle——assets-dest android/app/src/main/res
现在运行react-native run-android
我花了几个小时试图解决这个问题。我的问题不是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
确保metro构建器正在运行,以使物理设备和服务器同步
首先,运行这个命令来运行metro builder
npm开始
然后你可以在react native中开始构建
react-native运行android
他们这次应该不会出错了。如果您希望您的代码在更改时重新加载。摇动你的设备,然后点击“启用Live Reload”
在我的例子中,我已经从MainApplication.java中删除了以下一行。(这是我之前错误添加的):-
进口com.facebook.react.BuildConfig;
之后,清洁项目和点击命令
react-native运行android
我认为在所有其他解决方案之前,首先要做的是:
1. 检查您的设备是否在线?
2. 如果您在真实设备上运行应用程序,那么该设备应该与运行开发服务器的网络相同。
更多信息请访问本页。
使用mkdir…/assets && react-native bundle——平台..不能完全解决这个问题,
注意,你必须在每次代码编辑时运行这个命令重新生成文件,并且在重新加载或远程调试JS后再次显示错误。
这个问题的根本原因是你的应用程序无法连接到服务器(因为一些未知的原因)
以下是我的解决方案:
首先,启动其他主机和端口上的服务,例如: React-native start——port 8082——host 0.0.0.0 然后打开应用程序开发菜单> dev Setting >设备的调试服务器主机 输入youripv4address: 8082 dev菜单>重载
希望这能有所帮助
我刚刚遇到了完全相同的问题,并解决了它。希望对大家有所帮助。
假设您正在组装一个发布应用程序包(.apk)
Check if your assets folder exist?: \android\app\src\main\assets If not, create one. After executing "Assemble Release", check if there is anything in that folder(\android\app\src\main\assets) If not, find js bundle file(index.android.bundle), which should be in more than one of the following paths: *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。
然后将这个文件复制到你的assets文件夹(\android\app\src\main\assets\index.android.bundle) 回到powershell或命令控制台,执行:
React-native run-android——variant=release
它应该会起作用。
好运!
去开发设置->调试服务器主机和端口的设备->输入您的计算机Wifi IP地址(Mac OS:去系统首选项-> Wifi获取Wifi IP地址)
最终重建应用程序并运行
我花了半天时间来解决这个问题。
如果你使用的是28.0.0以上的API目标版本,那么你可能会遇到这个问题。
只要加上这一行
android:usesCleartextTraffic="true"
在你的Manifest Application块中。
清单应用程序块代码。
<application
....
android:usesCleartextTraffic="true"
.../>
The most upVoted answer seems working but become hectic for developers to see their minor changes after couple of minutes. I solved this issue by following these steps: 1- Push my code to bitbucket/github repo ( to view the changes later ) 2- cut paste android folder to any safe location for recovery 3- delete the android folder from my project 4- run react-native upgrade 5- Now, I see all the changes between the previous and the lastest build (using VsCode) 6- I found the issue in build.gradle file in these lines of code.
ext {
buildToolsVersion = "28.0.2"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 27
supportLibVersion = "28.0.0"
}
7-我复制了这些行(由react-native升级脚本生成,并再次删除android文件夹。 8-然后我剪切粘贴android文件夹回到我的项目文件夹,我在第2步剪切粘贴。 9 -替换构建。Gradle文件行与复制的。 10-现在工作正常。
希望这对你有所帮助。
首先检查你的assets文件夹是否存在于这个位置\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
然后在android设备上使用
react-native run-android
如果你在你的主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
实际上,在我的情况下(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
]
在命令之前使用NPX对我来说是有效的,命令就像下面这样。
npx 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
为什么我们使用npx,这里是npx和npm之间的区别?
在MAC或Windows上,我们可以在1秒内解决这个问题
在你的项目中搜索project.ext.react这个术语
并在bundleInDebug: true中做一个更改,添加这一行。并再次运行您的项目。
project.ext.react = [
entryFile: "index.js",
enableHermes: true, // clean and rebuild if changing
bundleInDebug: true // **add this line only**
]