带有 Create-react-app 的 Cordova [英] Cordova with Create-react-app
问题描述
我使用 create-react-app 创建了一个 ReactJs 应用程序，然后使用 npm run build 进行了生产构建.在我用 Cordova 创建的 www 文件夹中，我只需复制 create-react-app 的 构建文件夹中的所有文件，就可以了.
I have created a ReactJs app with create-react-app and then made the Production build with npm run build. In my www folder created with Cordova I just copy all the files from the create-react-app's build folder and that's fine.
我想知道如何关联 Cordova 的事件，例如:
I want to know how do I hook into Cordova's events like for example:
function startApp() {
// your app logic
}
if (window.cordova) {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
例如我想在startApp()中调用缩小后的JS文件.或者是否有任何其他工作流程可用于使 Cordova 事件与 react 应用程序一起使用.
For example I want to call the minified JS file inside startApp(). Or is there any other workflow that can be used to make Cordova events work with react app.
一个小例子会很有帮助.
A small example would be helpful.
是否可以完全使用构建文件并直接在 Cordova 中使用 React App?鉴于有将 ES6 代码转换为 ES5 和所有代码的 Webpack 设置，我不确定这将如何工作.
Is it possible to use the build file at all and just use the React App directly inside Cordova? I am unsure how that would work given that there is Webpack settings which transpiles the ES6 code to ES5 and all.
我是 Cordova 的新手，正在努力解决这个集成方面的问题.
I am new to Cordova and struggling with this integration aspect.
推荐答案
我发现这两种方法都能奏效，我会在这里发帖供其他寻求相同方法的人使用.也许还有其他方法可以做到这一点，但这对我有用.
I have found to make the two work and will post here for anyone else looking for the same. There maybe other methods to do this , but this is what worked for me.
所以基本上我们将使用(说)创建一个 Cordova 应用程序:科尔多瓦创建 testapp com.test.testapp testapp这会给我一个文件夹结构:
So basically we will create a Cordova App using(say) : cordova create testapp com.test.testapp testapp This will give me a Folder Structure as so:
testapp
--hooks
--platforms
--plugins
--www
--config.xml
现在在 testapp 文件夹中我们运行:create-react-app teastappReact这将在 testapp 文件夹中添加我的反应应用程序.您的 React 应用程序将在/src 目录中有一个主要的 index.js.
Now inside the testapp folder we run : create-react-app teastappReact Which will add my react app inside testapp folder. Your react app will have a main index.js in the /src directory.
我的 index.js 确保将您的主要逻辑包装在一个函数中，然后像这样调用该函数和 Cordova 对象:
I the index.js make sure to wrap your main logic inside a function and then call the function along with Cordova object like so:
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 等设备对象.
That should do now your app will have the Cordova instance along with Device objects like navigator.camera inside your app.
同样在你的反应应用程序 index.html 中，它可以在 public 文件夹中找到，从你将在 Codova www 文件夹中找到的 index.html 中复制 html.现在我们可以删除 www 文件夹中的所有文件.我们稍后将手动或通过脚本将所有文件从 react apps build 文件夹复制到 Cordova www 文件夹.
Also in your react apps index.html which can be found in the public folder copy the html from the index.html that you will find in the Codova www folder. Now we can delete all files from www folder. We will later manually or via a script copy all files from react apps build folder to Cordova www folder.
所以我的 index.html 将如下所示，注意作为脚本包含的 cordova.js 文件.
So my index.html would look something like below, notice the cordova.js file thats included as a script.
<!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 中添加以下行:....主页":../www"....这将确保您的最终构建文件指向正确的路径.我们还可以在您的 package.json 构建脚本中添加以下几行.
Finally in your react apps' package.json add the following line: .... "homepage": "../www" .... This will make sure your final build file is pointing at the right path. we can also add the following lines in your package.json build script.
"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.
It can be robocopy or cp-r based on the OS(Windows/Linux etc)..
我们应该准备好构建我们的 Cordova 应用程序科尔多瓦构建 android/ios.
We should have our Cordova app ready to be build with cordova build android/ios.
这篇关于带有 Create-react-app 的 Cordova的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
