个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我使用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 应用程序？我不确定这将如何工作，因为 Webpack 设置可以将 ES6 代码转换为 ES5 等。
我是 Cordova 新手，在集成方面遇到了困难。
最佳答案
我已经找到了这两个方法，并将在此发布给其他正在寻找相同方法的人。也许还有其他方法可以做到这一点，但这对我有用。
所以基本上我们将使用(比如说)创建一个 Cordova 应用程序:cordova 创建 testapp com.test.testapp testapp这会给我一个文件夹结构，如下所示:
testapp
--hooks
--platforms
--plugins
--www
--config.xml
现在在 testapp 文件夹中我们运行:create-react-app teastappReact这会将我的 React 应用程序添加到 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)。
此外，在公共(public)文件夹中可以找到的React应用程序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>
最后在您的 React 应用程序的 package.json 中添加以下行:....“主页”:“../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 应用程序来构建cordova 构建 android/ios。
关于javascript - Cordova 与 Create-react-app，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43336924/
24
4
0
问题是，当用户回复彼此的帖子时，我必须这样做: margin-left:40px; 对于 1 级深度 react margin-left:80px; 对于 2 层深等 但是我想让 react div
我试图弄清楚如何将 React Router 与 React VR 连接起来。 首先，我应该使用 react-router dom/native ?目前尚不清楚，因为 React VR 构建在 Rea
我是 React 或一般编码背景的新手。我不确定这些陈述之间有什么区别 import * as react from 'react' 和 import react from 'react' 提前致谢!
我正在使用最新的稳定版本的 react、react-native、react-test-renderer、react-dom。 然而，react-native 依赖于 react@16.0.0-alp
是否 react 原生 应用程序开发可以通过软件架构实现，例如 MVC、MVP、MVVM ? 谢谢你。 最佳答案 是的。 React Native 只是你提到的那些软件设计模式中的“V”。如果你考虑其
您好我正在尝试在我的导航器右按钮中绑定(bind)一个功能， 但它给出了错误。 这是我的代码: import React, { Component } from 'react'; import Ico
我使用react native创建了一个应用程序，我正在尝试生成apk。在http://facebook.github.io/react-native/docs/signed-apk-android.
1 [我尝试将分页的 z-index 更改为 0，但没有成功] 这是我的codesandbox的链接:请检查最后一个选择下拉列表，它位于分页后面。 https://codesandbox.io/s/j
我注意到 React 可以这样导入: import * as React from 'react'; ...或者像这样: import React from 'react'; 第一个导入 react
我是 react-native 的新手。我正在使用 React Native Paper 为所有屏幕提供主题。我也在使用 react 导航堆栈导航器和抽屉导航器。首先，对于导航，论文主题在导航组件中不
我有一个使用 Ignite CLI 创建的 React Native 应用程序.我正在尝试将 TabNavigator 与 React Navigation 结合使用，但我似乎无法弄清楚如何将数据从一
我正在尝试在我的 React 应用程序中进行快照测试。我已经在使用 react-testing-library 进行一般的单元测试。然而，对于快照测试，我在网上看到了不同的方法，要么使用 react-
我正在使用 react-native 构建跨平台 native 应用程序，并使用 react-navigation 在屏幕之间导航和使用 redux 管理导航状态。当我嵌套导航器时会出现问题。 例如，
由于分页和 React Native Navigation，我面临着一种复杂的问题。 单击具有类别列表的抽屉，它们都将转到屏幕 问题陈述: 当我随机点击类别时，一切正常。但是，在分页过程中遇到问题。假
这是我的抽屉导航: const DashboardStack = StackNavigator({ Dashboard: { screen: Dashboard
尝试构建 react-native android 应用程序但出现以下错误 info Running jetifier to migrate libraries to AndroidX. You ca
我目前正在一个应用程序中实现 React Router v.4，我也在其中使用 Webpack 进行捆绑。在我的 webpack 配置中，我将 React、ReactDOM 和 React-route
我正在使用 React.children 渲染一些带有 react router 的子路由(对于某个主路由下的所有子路由。 这对我来说一直很好，但是我之前正在解构传递给 children 的 Prop
当我运行 React 应用程序时，它显示 export 'React'(导入为 'React')在 'react' 中找不到。所有页面错误 see image here . 最佳答案 根据图像中的错误
当我使用这个例子在我的应用程序上实现 Image-slider 时，我遇到了这个错误。 import React,{Component} from 'react' import {View,T
我是一名优秀的程序员,十分优秀！