Hot Reload 在 react-native android 中不起作用

Posted

技术标签:

【中文标题】Hot Reload 在 react-native android 中不起作用【英文标题】:Hot Reload not working in react-native android 【发布时间】:2018-09-04 09:07:05 【问题描述】:

我在 Windows 10 和 Ubuntu 16.04 上尝试过。在这两种情况下,热重载仅适用于 jsx 中的更改,但不适用于我更改 javascript 中的变量或函数或其他内容时。热重载已启用。实时重新加载已禁用。当我在 Visual Studio 代码编辑器中保存更改时,虚拟设备 (android studio) 会重新加载,但更改不存在。 EXPO App中的物理设备上也是如此。

首先我没有安装守望者。 Hot Relaod 不工作。安装后 Hot Reload 也不行。

我使用 create-react-native-app 启动应用程序。它没有被弹出。

package.json:


  "name": "NativeReduxSaga",
  "version": "0.1.0",
  "private": true,
  "devDependencies": 
    "jest-expo": "25.0.0",
    "react-native-debugger-open": "^0.3.17",
    "react-native-scripts": "1.11.1",
    "react-test-renderer": "16.2.0"
  ,
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": 
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js",
    "postinstall": "rndebugger-open --expo"
  ,
  "jest": 
    "preset": "jest-expo"
  ,
  "dependencies": 
    "@redux-offline/redux-offline": "^2.3.2",
    "expo": "^25.0.0",
    "prop-types": "^15.6.1",
    "react": "16.2.0",
    "react-native": "0.52.0",
    "react-native-autocomplete-input": "^3.5.0",
    "react-navigation": "^1.5.2",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6",
    "redux-observable": "^0.18.0",
    "redux-promise-middleware": "^5.0.0",
    "redux-saga": "^0.16.0",
    "redux-thunk": "^2.2.0",
    "rxjs": "^5.5.7"
  

守望者版本


    "version": "4.9.1",
    "buildinfo": "94e66865386e844f2cffe52e355a94c96562d2e3 2018-03-12T19:58:02.0000000Z"

节点版本 v6.13.1

我在这里读到一些文章,它可以帮助在 Windows 上提高 MAX_WAIT_TIME。但我没有 \node_modules\react-native\node_modules\node-haste\lib\FileWatcher\ index.js 文件。

为什么它也不能在 Ubuntu 上运行?

我真的需要守望者吗?应该如何配置?我的 .watchmanconfig 文件是一个空对象,例如 。

热重载通常与 create-react-native-app 一起使用吗?

有人知道我可以在这里尝试什么,以使热重载正常工作吗? 感谢您的帮助!

【问题讨论】:

使用实时重载更新变量 好的,谢谢!所以我必须在 live 或 hot reload 之间切换取决于改变变量或函数中的东西,或者只改变 jsx 和样式。 是的,实时重新加载可以做到这两点 好的,但是随着实时重新加载,整个应用程序的状态每次都会重新开始,不是吗?它不会记住更改前的状态 是的,它会重新加载所有状态 【参考方案1】:

其实热重载和实时重载是有区别的。

热重载是即时重载,同时保持应用程序状态不变。但是,它只在render 方法内部起作用,并且只在类 React.Component 和 Component 的扩展上触发

如:

class A extends Component ...
class B extends React.Component ...

Live Reload 另一方面,重建您的应用程序并丢弃您的应用程序状态。它包括一切,从变量和方法到最简单的字符串。这就是为什么总是从应用程序的开始屏幕开始(因为状态丢失)。

希望对你有帮助!

【讨论】:

【参考方案2】:

删除 git index.lock 文件对我有用

rm -rf .git/index.lock

【讨论】:

或从您的计算机中删除项目,然后从 git 中提取。【参考方案3】:

在 android 中转到您的 MainApplication.Java 搜索 @Override public boolean getUseDeveloperSupport() return true;

确保它返回 true。可能是问题

【讨论】:

对我来说返回的是BuildConfig.DEBUG,这是错误的。改为真。【参考方案4】:

我执行了以下步骤来解决此问题:

    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

    在模拟器中摇动安卓设备或cmd + d 会得到一个菜单。

    启用和禁用热重载。

    在开发设置 -> 调试 -> 调试服务器主机和设备端口中清除您使用的任何 IP 地址。

    启用热重载。

    在终端中转到您的项目目录 -> react-native start

    react-native run-android 或直接在你的 android studio 中运行。

【讨论】:

在真实设备上,如果我删除 Metro 捆绑器的 IP,它会抛出很多错误,说无法连接到服务器。这会有什么帮助?它不起作用。 --dev false 创建一个发布包,不是吗?【参考方案5】:

对我来说,问题出在AndroidX,基本上有一段时间你需要迁移到AndroidX,因为 react-native 旧版本

只需在Android Studio 中打开您的项目

Refactor -> Migrate to Android X ... 并传递指令

当它被提升为保存端时,不要避免进行备份

【讨论】:

【参考方案6】:

对于在使用 WSL 2 时遇到此问题的任何人,文件需要存在于 Linux 子系统中,而不是任何已安装的 Windows 文件夹中,文件监视才能正常工作。取自this post on Reddit:

他们更改了文件共享协议,从使用自己定制开发的协议改为使用 9P 协议,此时可能不支持文件更改事件。

我相信您可以通过将代码放在 Linux 文件系统上(例如:在您用户的主目录中)来解决此问题,并通过 WSL 共享、\wsl$\DISTRO_NAME 从 Windows 访问这些文件。

在 Windows 资源管理器中,如果您转到 \wsl$,您应该会看到已安装的所有 WSL Linux 发行版,并且可以访问其文件系统上的所有文件。

【讨论】:

【参考方案7】:

我认为这是海峡前进

别忘了在你的文本编辑器中运行npm start,而不是像git bash这样的外部编辑器

【讨论】:

【参考方案8】:

确保您的 .git 目录中没有 index.lock 文件 :) 删除它可以解决您的问题。

【讨论】:

这个答案和older answer一样。

以上是关于Hot Reload 在 react-native android 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Webpack:如何设置 webpack-dev-server 和 Hot Reload

Xamarin Hot Reload 没有初始化失败

揭秘Flutter Hot Reload(基础篇)

Webpack / react hot reload重新加载整个页面?

为啥在全新安装后 Blazor Hot Reload 没有按预期工作?

如何在 Hot Reload 上使用 Provider 维护 Flutter Global BloC 状态?