Cordova与Create-react-app
Sou*_*jee 22 javascript cordova reactjs create-react-app
我用create-react-app创建了一个ReactJs应用程序,然后使用了npm run build.在我用Cordova创建的www文件夹中,我只是复制create-react-app的 build文件夹中的所有文件,这很好.
我想知道如何挂钩Cordova的事件,例如:
function startApp() {
// your app logic
}
if (window.cordova) {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
例如,我想在里面调用缩小的JS文件startApp().或者是否有任何其他工作流可用于使Cordova事件与react应用程序一起使用.
一个小例子会有所帮助.
是否可以使用构建文件并直接在Cordova内部使用React App？我不确定这是如何工作的,因为有Webpack设置将ES6代码转换为ES5和所有.
我是Cordova的新手,并且在这个整合方面苦苦挣扎.
Sou*_*jee 35
我已经找到了这两个工作,并将发布在这里寻找相同的其他人.可能还有其他方法可以做到这一点,但这对我有用.
基本上我们将使用(比如说)创建一个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等设备对象.
另外在您的反应应用程序index.html中,可以在公共文件夹中找到您在Codova www文件夹中找到的index.html中的html.现在我们可以删除www文件夹中的所有文件.稍后我们将手动或通过脚本将所有文件从react apps build文件夹复制到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>
最后在您的反应应用程序的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"
}
它可以是基于操作系统的robocopy或cp-r(Windows/Linux等).
我们应该准备好我们的Cordova应用程序,用cordova build android/ios构建.
- 对于 Mac，使用 `cp -a ./build/. ../www/` 而不是 robocopy，`-a` 是 `-r` 的改进版本，构建后的点确保所有隐藏文件也被复制（如果有） (2认同)
Bla*_*ard 27
我解决了这个问题.以下是我为逐步寻找解决方案的人所采取的逐步格式:
- 在app目录中复制/创建一个新
React项目(使用创建create-react-app)Cordova. - 清除应用程序
www文件夹的所有内容Cordova. cd到React项目文件夹(你刚刚复制/创建)并打开package.json.- 在
dependencies添加"homepage": "./",内部脚本之前更改build为"build": "react-scripts build && robocopy .\\build ..\\www /MIR", - 不要
npm run build在同一个(React的)目录及回父(Cordova)文件夹,然后build和emulate在期望的平台项目. - 额外提示:如果您
<Router>在项目中使用更改,<HashRouter>否则您将看到空白显示,因为没有任何内容会呈现在屏幕上.
- 谢谢，您的红利秘诀救了我！ (2认同)
- 为什么不使用`cp -rf ./build/ ../www/`？ (2认同)
- 奖金提示挽救了我的一天！ (2认同)
我认为很难找到如何解决这个问题的完整指南。我是这样解决的，从头到尾，以便能够在 Windows 上的模拟 Android 设备上运行 Create React App：
首先创建一个 React 应用程序或使用您现有的应用程序。
npx create-react-app my-app
https://github.com/facebook/create-react-app#creating-an-app
然后安装科尔多瓦：
npm install -g cordova
https://cordova.apache.org/docs/en/latest/guide/cli/
my-app在我的情况下，在文件夹内创建一个新的cordova应用程序：
cordova create hello com.example.hello HelloWorld
将目录更改为hello或您称为 Cordova 应用程序的名称。
cordova platform add ios
cordova platform add android
运行cordova requirements以查看构建项目所需的内容。
因为我使用的是 Windows，所以在这个例子中我只会为 Android 构建它。
cordova platform remove ios
并确认我只有 Android cordova platform ls
根据cordova requirements命令安装你需要的东西。因为我是全新安装的，所以我需要一切：Java 开发工具包 (JDK) 8、Gradle 和 Android SDK。链接可以在这里找到：
或者：
https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
https://developer.android.com/studio/index.html
安装后打开Android Studio。我选择了标准安装，但失败并显示以下警告：
无法安装英特尔 HAXM。详情请查看安装日志：“C:\Users\Oscar\AppData\Local\Temp\haxm_log.txt” Intel® HAXM 安装失败。要安装英特尔® HAXM，请按照以下说明安装：https ://software.intel.com/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows 安装程序日志位于
C:\Users\Oscar\AppData\Local\Temp\haxm_log.txt 安装程序日志内容： === Logging started: 2020-07-10 16:39:27 === 这台计算机不支持 Intel Virtualization Technology (VT- x) 或者它专门由 Hyper-V 使用。无法安装 HAXM。请确保在 Windows 功能中禁用 Hyper-V，或参阅英特尔 HAXM 文档了解更多信息。
然而，我无论如何都可以启动应用程序并添加在配置下找到的 Android 虚拟设备 (AVD)。
我选择添加一个Pixel XL带有R系统映像。
但是cordova requirements再次运行我可以看到我需要一个 API 级别为 28 的 Android 目标。R 是级别 30。
因此Pie，我安装了 API 级别 28 x86_64 并创建了一个新的虚拟设备。
AVD Manager我没有打开SDK manager，而是打开并下载了 Android 9.0 Pie SDK。
现在一切看起来都不错：
然后运行cordova emulate android以测试默认的 Cordova 应用程序。
如果它有效，它应该是这样的：
将目录更改为my-app.
在依赖package.json项"homepage": "./",之前编辑和添加：
感谢@BlackBeard。来源：https : //stackoverflow.com/a/46785362/3850405
跑 npm run build
清除所有内容，my-app\hello\www然后将所有内容复制my-app\build到my-app\hello\www。
瞧：
如果您不进行编辑my-app package.json和添加"homepage": "./",，它将如下所示：
得到教训：
1.
如果您<Router>在项目中使用，请将其更改为<HashRouter>否则您将看到空白显示，因为屏幕上不会呈现任何内容。适用于 iOS 和 Android。
来源：https : //stackoverflow.com/a/46785362/3850405
2.
您需要一个白名单来允许 URL。从文档：
默认情况下，只允许导航到 file:// URL。要允许其他 URL，您必须在 config.xml 中添加标签：
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
像这样安装：
cordova plugin add cordova-plugin-whitelist
然后编辑config.xml位于应用程序根目录中的 which 并添加以下任何内容：
<!-- Allow links to example.com -->
<allow-navigation href="http://example.com/*" />
<!-- Wildcards are allowed for the protocol, as a prefix
to the host, or as a suffix to the path -->
<allow-navigation href="*://*.example.com/*" />
<!-- A wildcard can be used to whitelist the entire network,
over HTTP and HTTPS.
*NOT RECOMMENDED* -->
<allow-navigation href="*" />
来源：https : //stackoverflow.com/a/30327204/3850405
3.
即使您使用的是白名单，您可能仍然需要访问不支持 https 的 http API。默认情况下，这是不允许的，可能会导致一些真正的头痛。通过编辑config.xml并在下面添加以下内容来解决此问题<platform name="android">：
<edit-config xmlns:android="http://schemas.android.com/apk/res/android" file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application"> <application android:usesCleartextTraffic="true" /></edit-config>
鉴于您没有浏览到 URL，任何 API 调用都必须指定实际服务器。我通常使用 Axios，所以我们只需要将我们的服务器添加到默认 URL。例子：
import axios, { AxiosPromise, AxiosRequestConfig, Method } from 'axios';
const getConfig = (url: string, method: Method, params?: any, data?: any) => {
const config: AxiosRequestConfig = {
url: 'http://192.168.1.249' + url,
method: method,
responseType: 'json',
params: params,
data: data,
headers: { 'X-Requested-With': 'XMLHttpRequest' },
}
return config;
}
export const sendRequest = (url: string, method: Method, params?: any, data?: any): AxiosPromise<any> => {
return axios(getConfig(url, method))
}
然后像这样调用：
const path = '/api/test/'
export const initialLoad = (number: number): AxiosPromise<InitialLoadDto> => {
return sendRequest(path + 'InitialLoad/' + number, 'get');
}