时间戳

首页 > 解决方案 > Cordova + 在开发模式下对热重载做出反应

reactjs - Cordova + 在开发模式下对热重载做出反应

问题描述

我用 Create-react-app 发现了这个问题Cordova。

当我处于开发模式并且应用程序在 android 模拟器中运行时，我是否能够实现实时重新加载？我害怕每次我想看到变化时都必须构建应用程序。

cordova 是否能够观看在开发模式下运行的 react-app 并通过index.js侦听更改来读取源代码？

假设我想实现这样的目标：

  1. 创建科尔多瓦项目。
  2. 在 /www 文件夹（或任何其他适用于我的用例的文件夹......）中创建反应项目。
  3. cordova run android从 root 运行以在 Android Simulator 和 /www 目录中运行应用程序npm start。
  4. 科尔多瓦应该能够在 Android 模拟器中监听变化并实时重新加载反应应用程序。
  5. 我需要能够访问反应代码中的cordova实例以使用插件等。

我找到了一些与 webpack-server-dev（使用 webpack v1...）相关的解决方案，但它们似乎都不起作用，我需要重新启动cordova run android命令才能查看代码中的更改。否则，这些模板不提供在开发模式下启用对 cordova 插件实例的访问的功能

那么真的是开发cordova + react appnpm build的cordova run android唯一方法吗？？

注意 1：我想使用 SQLite cordova plguin，所以在仅浏览器模式下进行开发，然后在完成后为 android/ios 构建应用程序，我认为这不是我的情况。请问您有什么建议吗？

注意2：我不能使用react-native，因为我需要使用openlayers maps lib。

非常感谢您的回答！

标签： reactjscordovawebpack

解决方案

  1. 运行 webpack-dev-server--host 0.0.0.0以使其可以从外部访问
  2. 更改您的 config.xml 并<content src="..." />指向您的本地 IP 地址和您的开发端口，例如<content src="http://192.168.0.2:3000/" />
  3. 添加白名单条目（有关更多详细信息，请参阅cordova whitelist-plugin 文档）：例如<allow-navigation href="http://192.168.0.2:3000/*" />
  4. 如果您需要通过 的本地功能cordova，您需要在您的开发服务器中提供所有的 cordova 和 cordova-plugin javascript 文件。请同时检查此答案（符号链接部分）：https ://stackoverflow.com/a/46545408/1930339

推荐阅读