Cordova +在开发模式下通过热重载做出反应 [英] Cordova + react with hot reload while development mode

问题描述

我在 Cordova和Create-react-app 中发现了这个问题.

I found this question Cordova with Create-react-app.

在开发模式下并且应用程序在android模拟器中运行时，我是否可以实现实时重载?我很害怕每次想看到更改时都必须构建该应用程序.

Am I able to achieve live-reloading while I'm in development mode and app is running in android emulator? I'm scared that I have to build the app everytime I wanna to see changes.

cordova是否可以观看以开发模式运行的react-app并从index.js中读取源代码以监听更改?

Is cordova able to watch react-app which run in development mode and read source from index.js listening for changes?

比方说，我想实现这样的目标:

Let's say that I want to achieve something like this:

1. 创建cordova项目.
2. 在/www文件夹(或将与我的用例一起使用的任何其他文件夹...)中创建react项目.
3. 从根目录运行cordova run android以在Android Simulator中运行应用程序，从/www目录运行npm start.
4. cordova应该能够在Android模拟器中侦听更改并实时重新加载React应用.
5. 我需要能够在react代码中访问cordova实例以使用插件等.

1. create cordova project.
2. create react project inside of /www folder (or any other folder that will work with my use-case...).
3. run cordova run android from root to run application in Android Simulator and npm start from /www directory.
4. cordova should be able to listen for changes and live-reload react app inside Android emulator.
5. I need to able to access cordova instance inside react code to use plugins, etc.

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

I've found some webpack-server-dev (using webpack v1...) related solutions but none of them seems to be working and I need to restart cordova run android command to see changes in the code. Otherwise these templates doesn't provide functionality to enable access to the cordova plugins instance during development mode

npm build紧随其后的是cordova run android开发cordova + react app的唯一方法吗?

So is really npm build followed by cordova run android only way to develop cordova + react app??

注1:我想使用SQLite cordova plguin，所以在仅浏览器模式下进行开发，然后一旦完成就构建适用于android/ios的应用程序，这不是我的情况.请问您有什么建议吗?

Note 1: I would like to use SQLite cordova plguin so development in browser-only mode and then building the application for android/ios once its done is not my case I think. Do you have any suggestions please?

注2:我不能使用react-native，因为我需要使用openlayers maps lib.

Note 2: I can't use react-native as I need to use openlayers maps lib.

非常感谢您的回答！

推荐答案

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

1. Run webpack-dev-server with --host 0.0.0.0 to make it accessible from outside
2. Change your config.xml and make <content src="..." /> point to your local-IP address and your dev-port, e.g. <content src="http://192.168.0.2:3000/" />
3. Add a whitelist entry (refer to cordova whitelist-plugin documentation for more details): e.g. <allow-navigation href="http://192.168.0.2:3000/*" />
4. If you need native functionalities via cordova, you need to make all cordova and cordova-plugin javascript files available in your dev-server. Please check this answer as well (symlink part): https://stackoverflow.com/a/46545408/1930339

这篇关于Cordova +在开发模式下通过热重载做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！