如何在运行 React Native 应用程序的 iOS 设备中启用 Live Reload？

Posted 2023-02-22

【中文标题】如何在运行 React Native 应用程序的 iOS 设备中启用 Live Reload？

【英文标题】：How to enable Live Reload in iOS Device running React Native app?

【发布时间】：2016-12-10 20:58:30

【问题描述】：

我正在尝试启用 Live Reload 模式，但开发菜单中没有这样的项目：

【问题讨论】：

这很奇怪。你运行的是什么版本的 xcode 和 react-native？

相关：***.com/questions/38676746/…

react-native-cli: 1.0.0 react-native: 0.30.0 Xcode 7.3.1 (7D1014) Watchman 4.6.0

终于解决了这个问题。见***.com/questions/38676746/…

嘿@protspace 如果它适合您，请将其作为实际答案。它会帮助别人。

【参考方案1】：

如果您在实际的本机设备上运行该应用程序。然后摇晃设备，它会弹出我的菜单。

【讨论】：

如您在上面看到的，我对该菜单进行了截图，但@Shivam Sinha 中没有这样的项目

这不是操作所要求的。

这与问题完全无关。他问如何通过 Live reload 获得正常菜单。

【参考方案2】：

你有这个问题主要是因为你的设备和你的开发机器不在同一个局域网中。检查是否是。确保您的计算机和您的设备连接在保存的 LAN 中，一切都会好起来的。

毕竟你的所有设备都连接到同一个局域网。如果你使用的是 Xcode。

关闭 React Native 打包器（或直接关闭终端窗口） 在您的 ios 设备中删除应用程序 清理 Xcode 项目。 运行命令npm start -- reset-cache

那么一切都会好起来的。

【讨论】：

这个得到了我。我周围有多个 WIFI，我的 iPhone 和 MBP 在工作时跳到不同的，我什至没有意识到。

@dwilt 有时只是连接到同一个局域网并不能解决这个问题。所以我更新了我的答案。

只是切换到同一个 Wi-Fi 对我有用......谢谢@Bruce Lee

【参考方案3】：

您需要从 AppDelegate 编辑 jsCodeLocation 的源代码。

主要问题

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

默认情况下正在寻找localhost，在模拟器中它将作为模拟器和PC在同一台机器上工作，但对于设备localhost会有所不同，因此要使其工作，您需要将该行更改为

jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.16:8081/index.ios.bundle?platform=ios&dev=true&minify=false&hot=true"];

这里192.168.1.16改成你的PC本地IP地址

【讨论】：

使用 v0.49 或更高版本创建的项目应使用jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.16:8081/index.bundle?platform=ios&dev=true&minify=false&hot=true"];，因为new projects have a single entry-point。

【参考方案4】：

如果您正在运行模拟器，请确保您“连接硬件键盘”

【参考方案5】：

如果您使用的是 IOS Simulator，请按照菜单 Hardware > Shake Gesture，然后单击 Enable Live Reload 选项。

希望对您有所帮助！ :)

【参考方案6】：

在我的例子中，我有一个本地以太网连接优先于 en0，所以我必须在以下位置更改脚本：

node_modules/react-native/react-native-xcode.sh

来自

IP=$(ipconfig getifaddr en0)

到

IP=$(ipconfig getifaddr en1)

因为我的 wifi 在那个端口上。 使用终端验证：networksetup -listallhardwareports

---

所有这些都是我从以下博客文章中学到的：

https://www.stevetrefethen.com/blog/react-native-bundle-loading-failing-on-a-physical-device

感谢史蒂夫·特雷费森！

---

我不确定永久解决方案应该是什么，但似乎脚本应该以某种方式检查仅 wifi 连接。