我已经使用 _create-react-app 创建了一个 ReactJs 应用程序_,然后使用 npm run build
进行了生产构建。在我用 Cordova 创建的 www 文件夹中,我只是从 create-react-app 的 构建文件夹中复制所有文件,这很好。
我想知道如何连接到 Cordova 的事件,例如:
function startApp() {
// your app logic
}
if (window.cordova) {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
例如,我想在 startApp()
中调用缩小的 JS 文件。或者是否有任何其他工作流程可用于使 Cordova 事件与 React 应用程序一起使用。
一个小例子会有所帮助。
是否可以完全使用构建文件并直接在 Cordova 中使用 React App?我不确定这将如何工作,因为存在将 ES6 代码转换为 ES5 和所有代码的 Webpack 设置。
我是 Cordova 的新手,并且在这个集成方面苦苦挣扎。
原文由 Sourav Chatterjee 发布,翻译遵循 CC BY-SA 4.0 许可协议
我已经找到了使这两个工作的方法,并将在这里发布给其他寻找相同方法的人。也许还有其他方法可以做到这一点,但这对我有用。
所以基本上我们将使用(比如说)创建一个 Cordova 应用程序: cordova create testapp com.test.testapp testapp 这将给我一个文件夹结构,如下所示:
现在在我们运行的 testapp 文件夹中:create-react-app teastappReact 这将在 testapp 文件夹中添加我的反应应用程序。你的 React 应用程序将在 /src 目录中有一个主要的 index.js。
我 index.js 确保将您的主要逻辑包装在一个函数中,然后像这样调用该函数以及 Cordova 对象:
现在应该这样做了,您的应用程序将拥有 Cordova 实例以及您的应用程序内的设备对象,例如 navigator.camera。
同样在你的 React 应用程序 index.html 中,它可以在 public 文件夹中找到,从 Codova www 文件夹中的 index.html 中复制 html。现在我们可以删除 www 文件夹中的所有文件。我们稍后将手动或通过脚本将所有文件从 React 应用程序构建文件夹复制到 Cordova www 文件夹。
所以我的 index.html 看起来像下面这样,请注意作为脚本包含的 cordova.js 文件。
最后,在您的 React 应用程序的 package.json 中添加以下行:…. “homepage”: “../www” ….这将确保您的最终构建文件指向正确的路径。我们还可以在 package.json 构建脚本中添加以下行。
它可以是基于操作系统(Windows/Linux 等)的 robocopy 或 cp-r。
我们应该准备好使用 cordova build android/ios 构建我们的 Cordova 应用程序。