带有 Create-react-app 的 Cordova

新手上路,请多包涵

我已经使用 _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 许可协议

阅读 257
1 个回答

我已经找到了使这两个工作的方法,并将在这里发布给其他寻找相同方法的人。也许还有其他方法可以做到这一点,但这对我有用。

所以基本上我们将使用(比如说)创建一个 Cordova 应用程序: cordova create testapp com.test.testapp testapp 这将给我一个文件夹结构,如下所示:

 testapp
        --hooks
        --platforms
        --plugins
        --www
        --config.xml

现在在我们运行的 testapp 文件夹中:create-react-app teastappReact 这将在 testapp 文件夹中添加我的反应应用程序。你的 React 应用程序将在 /src 目录中有一个主要的 index.js。

我 index.js 确保将您的主要逻辑包装在一个函数中,然后像这样调用该函数以及 Cordova 对象:

 import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

const startApp = () => {
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
}

if(!window.cordova) {
  startApp()
} else {
  document.addEventListener('deviceready', startApp, false)
}

现在应该这样做了,您的应用程序将拥有 Cordova 实例以及您的应用程序内的设备对象,例如 navigator.camera。

同样在你的 React 应用程序 index.html 中,它可以在 public 文件夹中找到,从 Codova www 文件夹中的 index.html 中复制 html。现在我们可以删除 www 文件夹中的所有文件。我们稍后将手动或通过脚本将所有文件从 React 应用程序构建文件夹复制到 Cordova www 文件夹。

所以我的 index.html 看起来像下面这样,请注意作为脚本包含的 cordova.js 文件。

 <!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>

<head>
    <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <!-- Latest compiled and minified CSS -->
    <title>React App</title>
</head>

<body>
    <div id="root"></div>
   <script type="text/javascript" src="cordova.js"></script>
</body>

</html>

最后,在您的 React 应用程序的 package.json 中添加以下行:…. “homepage”: “../www” ….这将确保您的最终构建文件指向正确的路径。我们还可以在 package.json 构建脚本中添加以下行。

   "scripts": {
    "start": "react-scripts start",
    ***"build": "react-scripts build && robocopy .\\build ..\\www /MIR",***
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "npm run build&&gh-pages -d build"
  }

它可以是基于操作系统(Windows/Linux 等)的 robocopy 或 cp-r。

我们应该准备好使用 cordova build android/ios 构建我们的 Cordova 应用程序。

原文由 Sourav Chatterjee 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题