React Native：模拟器卡在“从本地主机加载：8081 ..”答案

【问题标题】：React Native: Emulator stuck on "loading from localhost:8081.."React Native：模拟器卡在“从本地主机加载：8081 ..”
【发布时间】：2018-05-08 05:11:36
【问题描述】：

Screenshot from Android phone running the app

我正在开发一个 react-native 项目，我通过 USB 调试和命令“react-native run android”在我的 android 手机上运行它。

一切正常，但现在即使构建成功，应用程序仍卡在白屏“从 localhost:8081 加载”。没有对任何应用文件进行任何更改。

我尝试运行 react-native 演示应用（使用 react-native init），但仍然遇到同样的问题。

我尝试过的解决方案，但仍然是同样的问题：

rm -rf node_modules && npm install
adb 反向 tcp:8081 tcp:8081
从 Android Studio 在 Android Emulator 上运行它。
使用命令 npm run android

这是在命令行中显示的内容：

lenovo@lenovo-Lenovo-ideapad-500S-14ISK:~/IRMSold$ react-native run-android 扫描文件夹中的符号链接 /home/lenovo/IRMSold/node_modules (6ms) JS 服务器已经在运行。在设备上构建和安装应用程序（cd android && ./gradlew 安装调试）...

配置项目：app 警告：配置“编译”已过时并已替换为“实施”和“API”。这将是于 2018 年底删除。有关更多信息，请参阅： http://d.android.com/r/tools/update-dependency-configurations.html

配置项目：react-native-google-signin 警告：配置 'compile' 已过时，并已替换为 'implementation' 和 'API'。它将在 2018 年底被删除。有关更多信息看： http://d.android.com/r/tools/update-dependency-configurations.html 警告：指定的 Android SDK 构建工具版本 (23.0.3) 是忽略，因为它低于支持的最低版本 (27.0.3) Android Gradle 插件 3.1.1。 Android SDK Build Tools 27.0.3 将是用过的。要禁止显示此警告，请删除“buildToolsVersion '23.0.3'” 从您的 build.gradle 文件中，作为 Android Gradle 的每个版本插件现在有一个默认版本的构建工具。

配置项目：react-native-vector-icons 警告：配置 'compile' 已过时，并已替换为 'implementation' 和 'API'。它将在 2018 年底被删除。有关更多信息看： http://d.android.com/r/tools/update-dependency-configurations.html 警告：指定的 Android SDK 构建工具版本 (26.0.1) 是忽略，因为它低于支持的最低版本 (27.0.3) Android Gradle 插件 3.1.1。 Android SDK Build Tools 27.0.3 将是用过的。要禁止显示此警告，请删除“buildToolsVersion '26.0.1'” 从您的 build.gradle 文件中，作为 Android Gradle 的每个版本插件现在有一个默认版本的构建工具。

任务 :app:installDebug 在“联想”上安装 APK 'app-debug.apk' X3a40 - 6.0.1' for app:debug 安装在 1 台设备上。

在 13 秒内构建成功 66 个可操作的任务：1 个已执行，65 个最新运行 adb -s 567bf688 reverse tcp:8081 tcp:8081 启动应用程序 567bf688 (adb -s 567bf688 shell am start -n com.irms/com.irms.MainActivity)...开始：Intent { cmp=com.irms/.MainActivity }

请帮助我，因为我尝试了所有其他可以在网上找到的修复方法。

【问题讨论】：

这个问题你解决了吗？

标签： android react-native

【解决方案1】：

检查设备是否有计算机8081端口转发使用

adb reverse --list

如果你没有得到任何结果，你应该创建反向套接字连接，以便您的设备可以访问 Metro Server

adb reverse tcp:8081 tcp:8081

由于某种原因它仍然无法正常工作，所以我在此窗口中按了 ENTER (Metro Bundler Window) 并等到它达到 100 % 然后应用开始在我的手机上显示。

【讨论】：

这对我没有帮助
@mad_greasemonkey 您是否发布了自己的问题？也许你可以提供更多的上下文
真的很奇怪，但是在 Metro bundler 中按 ENTER 似乎可以解决问题

【解决方案2】：

在我的情况下，问题是由于文件句柄限制。一次，我通过以下命令刷新限制，应用程序开始运行没有任何问题。

echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_queued_events && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_instances && watchman shutdown-server

我使用的是 Ubuntu 18.04。

【讨论】：

【解决方案3】：

我的问题在于 Watchman，这有点难以识别，因为 React Native 很高兴地捆绑了我的应用程序，转移并启动了 APK！它不断引发关于/tmp/name-state 权限的错误（其中name 是你的名字）所以我不得不chmod 0700 /tmp/name-state（以减少对该目录的权限）然后创建一个新应用程序npm react-native init appName 之后我再次启动Metro从另一个终端（确保您在新项目目录中）并运行npm react-native start。然后我可以通过react-native run-android 启动appName。

【讨论】：

我找不到 /tmp/name-state 目录

【解决方案4】：

解决方案，

解决方案 -> 重启机器，它会工作，但稍后你会再次遇到问题
解决方案 -> watchman watch-del-all
解决方案->

回声 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances
回声 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
回声 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
watchman 关机服务器

解决方案 -> 如果没有任何效果

rm -rf 节点模块
npm 缓存清理 --force

【讨论】：

【解决方案5】：

我每天都被卡住，问题与Watchman 权限有关。查看经过验证的解决方案，我希望这对某人有所帮助

Homebrew Permissions for Watchman on Muti-user Mac

【讨论】：

这解决了我在macos上的问题。

【解决方案6】：

您应该等待包服务器的状态以完美运行。直到“加载依赖图，完成。”。如果不是，您将被困在从 localhost 8081 加载。

【讨论】：

【解决方案7】：

也许你的 8081 端口已经在使用中。

在这里尝试第一个解决方案 https://facebook.github.io/react-native/docs/troubleshooting

$ sudo lsof -i :8081 $ 杀 -9

【讨论】：

这对我也没有帮助

【解决方案8】：

你试过了吗？

警告：指定的 Android SDK 构建工具版本 (23.0.3) 将被忽略，因为它低于 Android Gradle 插件 3.1.1 的最低支持版本 (27.0.3)。将使用 Android SDK 构建工具 27.0.3。要抑制此警告，请从您的 build.gradle 文件中删除“buildToolsVersion '23.0.3'”，因为每个版本的 Android Gradle 插件现在都有一个默认版本的构建工具。

【讨论】：

我的 build.gradle 文件中没有“23.0.3”这样的行。但是有一个带有“23.0.1”。我确实删除了那条线。警告仍然存在。
build.gradle 文件位于 /android/app
试试这个：删除你目录中的android文件夹并做“react-native upgrade”
我试过这个。我得到一个 sdk directory not found 错误，所以我添加了一个带有路径的 local.properties 文件，因此构建成功。然而同样的问题。屏幕卡在“从 localhost:8081 加载”。这在构建过程中出现：E/adb: adb server version (32) doesn't match this client (39);杀死... 12:00:34 E/adb: * 守护进程成功启动
您确定您使用的是最新的 adb 版本吗？我希望你打开你的终端并输入这个命令。 “亚行设备”。回复回复。

【解决方案9】：

杀死已经在端口 8081 上运行的进程对我有用

在 Windows 中-

netstat -ano | findstr :8081

tskill TypeyourPID

谢谢，@luttius

【讨论】：

【解决方案10】：

我想分享我的经验

在 android 模拟器上 react-native run-android 在加载时冻结。虽然同样在 iOS 模拟器上运行。在我的情况下，我在 iOS 模拟器上远程启用了调试 js，发现我已经为布尔属性提供了字符串值。一旦我纠正了它在 android 模拟器上运行的问题。

经验教训：Android 构建不是那么宽容，因此请使用 ios 运行并修复您在调试器上遇到的任何错误，这些错误可能会导致您的模拟器在加载时冻结。来自 8081

【讨论】：

【解决方案11】：

可能有几种情况您无法连接到调试器：

设备和主机肯定应该在同一个网络上。将您的手机连接到 PC 的网络或将您的 PC 连接到移动热点。在某些情况下，在真实设备上，您可能需要运行 adbe reverse 命令：

adb reverse tcp:8081 tcp:8081

卸载应用程序，停止打包程序，然后使用重置缓存选项重新启动打包程序：

npm start -- --reset-cache

然后，再次在设备上运行它。

摇动您的设备，然后在菜单中选择开发设置

在调试服务器主机和设备端口部分通过端口 8081 输入您的电脑 IP 地址，如下所示：192.168.1.3:8081

【讨论】：

【解决方案12】：

我通过关闭正在运行 Metro 的终端并再次运行 Android 项目来修复它。

【讨论】：