web-dev-qa-db-ja.com

Create-react-appを使用したCordova

create-react-appでReactJsアプリを作成し、_npm run build_でProductionビルドを作成しました。 Cordovaで作成された私のwwwフォルダーでは、create-react-app'sビルドフォルダーからすべてのファイルをコピーするだけで問題ありません。

たとえば、次のようなCordovaのイベントにどのようにフックするかを知りたいです。

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

たとえば、startApp()内の縮小されたJSファイルを呼び出します。または、RecodeアプリでCordovaイベントを機能させるために使用できる他のワークフローがあります。

小さな例が役立ちます。

ビルドファイルをまったく使用せず、React AppをCordova内で直接使用することはできますか？すべて。

コルドバは初めてで、この統合の側面に苦労しています。

javascriptreactjscordovacreate-react-app
20
Sourav Chatterjee

私は2つの作品を作ることを発見し、同じものを探している他の人のためにここに投稿します。これを行う他の方法があるかもしれませんが、これは私にとってうまくいったことです。

したがって、基本的には（say）を使用してCordovaアプリを作成します。cordova create testapp com.test.testapp testappこれにより、フォルダー構造が得られます。

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

Testappフォルダー内で、create-react-app teastappReactを実行します。これにより、testappフォルダー内に反応アプリが追加されます。反応するアプリのメインのindex.jsは/ srcディレクトリにあります。

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ビルドフォルダーから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に次の行を追加します。... "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"
  }

OS（Windows/Linuxなど）に基づいて、robocopyまたはcp-rを使用できます。

CordovaビルドAndroid/iosを使用してCordovaアプリをビルドする準備ができているはずです。

34
Sourav Chatterjee

問題を解決しました。ソリューションを探している人のために私がステップバイステップ形式でしたことは次のとおりです。

  1. React appディレクトリのすぐ内側にCordovaプロジェクト（create-react-appを使用して作成）をコピー/新規作成します。
  2. wwwアプリのCordovaフォルダーのすべてのコンテンツをクリアします。
  3. cd to Reactプロジェクトフォルダー（コピー/作成したばかり））を開き、package.jsonを開きます。
  4. dependenciesを追加する前に"homepage": "./",を追加し、内部スクリプトでbuildを"build": "react-scripts build && robocopy .\\build ..\\www /MIR",に変更します
  5. 同じ（React 's）ディレクトリでnpm run buildを実行し、親（Cordova）フォルダーに戻り、目的のプラットフォームのbuildおよびemulateプロジェクトに戻ります。 。
  6. ボーナスヒント：プロジェクトで<Router>を使用している場合、それを<HashRouter>に変更します。そうしないと、画面に何もレンダリングされないため、空白のディスプレイが表示されます。
24
BlackBeard