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

Posted

技术标签:

【中文标题】Cordova + 在开发模式下对热重载做出反应【英文标题】:Cordova + react with hot reload while development mode 【发布时间】:2019-04-24 19:19:46 【问题描述】:

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

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

cordova 是否能够观察在开发模式下运行的 react-app 并从 index.js 读取源代码以监听变化?

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

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

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

那么npm build 后跟cordova run android 真的是开发cordova + react 应用程序的唯一方法吗?

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

注意 2:我不能使用 react-native,因为我需要使用 openlayers 地图库。

非常感谢您的回答!

【问题讨论】:

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

【讨论】:

谢谢!希望它对某人有所帮助:) 我切换到 react-native

以上是关于Cordova + 在开发模式下对热重载做出反应的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET Core 6.0对热重载的支持

Xamarin,对时区变化做出反应

将路线与布局的其余部分分开 - 做出反应

文件传输下载没有对生产构建做出反应

离子/ cordova与2020年原生反应

如何在不使用电子锻造重定向到根目录的情况下进行热重装并做出反应