Cordova与Create-react-app [英] 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();
}
例如我想在
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？我不确定这是如何工作的，因为有Webpack设置将ES6代码转换为ES5和所有。
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应用程序：
cordova create 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文件夹中添加我的反应应用程序。
你的反应应用程序将在/ 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实例以及Device对象比如应用程序中的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中，可以在公共文件夹中找到你从index.html复制的html在Codova www文件夹中找到。现在我们可以删除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>
最后在您的反应应用程序的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"
}
它可以是robocopy或cp-r基于操作系统（Windows / Linux等）..
It can be robocopy or cp-r based on the OS(Windows/Linux etc)..
我们应该准备好使用
cordova build android / ios构建我们的Cordova应用程序。
We should have our Cordova app ready to be build with cordova build android/ios.
这篇关于Cordova与Create-react-app的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
