科爾多瓦與創建反應的應用程序內

我已創建了創建反應的應用程序內一個ReactJs的應用程序，然後由生產建立與npm run build。在我使用Cordova創建的www文件夾中，我只需從create-react-app構建文件夾中複製所有文件即可。科爾多瓦與創建反應的應用程序內

我想知道我怎麼掛接到科爾多瓦的事件，例如像：

function startApp() { 
    // your app logic 
} 
if (window.cordova) { 
    document.addEventListener('deviceready', startApp, false); 
} else { 
    startApp(); 
}

比如我想調用裏面startApp()縮小的JS文件。還是有任何其他工作流程可用於使科爾多瓦事件與反應應用程序一起工作。

一個小例子將是有益的。

是否有可能使用的生成文件在所有的，只是使用的直接反應內部應用程序科爾多瓦？由於Webpack設置將ES6代碼轉換爲ES5以及全部代碼，因此我不確定這是如何工作的。

我是新與科爾多瓦以及與此整合方面的努力。

來源

2017-04-11 Sourav Chatterjee

我已想出如何使這兩個工作，並張貼在這裏爲別人尋找相同的答案。這是非常微不足道的，可能還有其他方法，但這對我來說是非常好的。 –

我發現使這兩個工作，並張貼在這裏爲別人尋找相同。也許有其他方法可以做到這一點，但這對我來說很有用。

所以基本上，我們將使用創建應用程序科爾多瓦（說）：科爾多瓦創建testapp com.test.testapp testapp 這會給我一個文件夾結構像這樣：

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

現在testapp文件夾中我們運行：創建反應的應用程序內teastappReact 這將增加我的反應testapp文件夾內的應用程序。你反應的應用程序將有一個主index.js在/ src目錄。

我的index.js一定要包裝你的主邏輯函數中，然後調用函數與科爾多瓦對象一起，像這樣：

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) 
}

這應該做，現在你的應用程序將沿着有科爾多瓦實例在你的應用中使用像navigator.camera這樣的Device對象。

而且在你的反應可以在公共文件夾中找到的，你將在Codova WWW文件夾中找到的index.html複製HTML應用程序的index.html。現在我們可以從www文件夾中刪除所有文件。我們稍後將手動或通過腳本將反應應用程序生成文件夾中的所有文件複製到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添加以下行： .... ‘主頁’：「../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" 
    }

它可以是基於OS（Windows/Linux等）的robocopy或cp-r。

我們應該有科爾多瓦的應用程序準備與科爾多瓦構建Android/IOS來構建。

來源

2017-04-16 18:05:50

我解決了這個問題。下面是我在一步一步的格式沒有任何人尋求的解決方案：

複製/創建-A-新React項目（使用create-react-app創建）只是Cordova app目錄內。
清除www文件夾的所有內容Cordova應用程序。
cd反應項目文件夾（你剛纔複製/創建）&開放package.json。
dependencies之前添加"homepage": "./", &腳本內改變build到"build": "react-scripts build && robocopy .\\build ..\\www /MIR",
做npm run build在同一（React的）目錄&回到父母（Cordova）文件夾，然後build和emulate在期望的平臺項目。
此外，如果你在你的項目中使用的變化是<Router>到<HashRouter>否則日子會把你看到一個空白顯示爲那什麼事都渲染到屏幕上。

來源

2017-10-17 08:06:04 BlackBeard

科爾多瓦與創建反應的應用程序內

回答

相關問題