web-dev-qa-db-fra.com

Cordova avec Create-react-app

J'ai créé une application ReactJs avec create-react-app puis fait la construction Production avec npm run build. Dans mon dossier www créé avec Cordova, je copie simplement tous les fichiers du dossier de construction create-react-app's et c'est très bien.

Je veux savoir comment me connecter aux événements de Cordova comme par exemple:

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

Par exemple, je veux appeler le fichier JS minifié dans startApp(). Ou existe-t-il un autre flux de travail qui peut être utilisé pour faire fonctionner les événements Cordova avec l'application React.

Un petit exemple serait utile.

Est-il possible d'utiliser le fichier de construction et d'utiliser simplement l'application React directement dans Cordova? Je ne sais pas comment cela fonctionnerait étant donné qu'il existe des paramètres Webpack qui transpilent le code ES6 en ES5 et tout.

Je suis nouveau à Cordoue et je lutte avec cet aspect d'intégration.

javascriptreactjscordovacreate-react-app
20
Sourav Chatterjee

J'ai trouvé pour faire fonctionner les deux et posterai ici pour toute autre personne qui cherche la même chose. Il y a peut-être d'autres méthodes pour le faire, mais c'est ce qui a fonctionné pour moi.

Donc, fondamentalement, nous allons créer une application Cordova en utilisant (par exemple): cordova create testapp com.test.testapp testapp Cela me donnera une structure de dossiers comme suit:

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

Maintenant, à l'intérieur du dossier testapp, nous exécutons: create-react-app teastappReact qui ajoutera mon application react dans le dossier testapp. Votre application React aura un index.js principal dans le répertoire/src.

Je les index.js assurez-vous d'envelopper votre logique principale dans une fonction, puis appelez la fonction avec l'objet Cordova comme suit:

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

Cela devrait faire maintenant que votre application aura l'instance Cordova avec des objets Device comme navigator.camera dans votre application.

Toujours dans vos applications réactives index.html qui se trouvent dans le dossier public, copiez le code html à partir du fichier index.html que vous trouverez dans le dossier www Codova. Maintenant, nous pouvons supprimer tous les fichiers du dossier www. Plus tard, nous copierons manuellement ou via un script tous les fichiers du dossier de construction des applications React dans le dossier www Cordova.

Donc, mon index.html ressemblerait à quelque chose comme ci-dessous, notez le fichier cordova.js qui est inclus en tant que 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>

Enfin, dans le package.json de vos applications de réaction, ajoutez la ligne suivante: .... "page d'accueil": "../www" .... Cela garantira que votre fichier de construction final pointe vers le bon chemin. nous pouvons également ajouter les lignes suivantes dans votre script de construction 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"
  }

Il peut être robocopy ou cp-r basé sur l'OS (Windows/Linux etc).

Nous devrions avoir notre application Cordova prête à être construite avec cordova build Android/ios.

34
Sourav Chatterjee

J'ai résolu le problème. Voici ce que j'ai fait dans un format étape par étape pour tous ceux qui recherchent la solution:

  1. Copier/créer un nouveau projet React (créé à l'aide de create-react-app) juste à l'intérieur du répertoire de l'application Cordova.
  2. Effacez tout le contenu du dossier www de l'application Cordova.
  3. cd vers React dossier de projet (que vous venez de copier/créer) & ouvrez package.json.
  4. Avant dependencies ajoutez "homepage": "./", & les scripts internes changent build en "build": "react-scripts build && robocopy .\\build ..\\www /MIR",
  5. Faire npm run build dans le même répertoire (React) et retournez dans le dossier parent (Cordova) puis build et emulate votre projet dans la plateforme souhaitée.
  6. Astuce Bonus: Si vous utilisez <Router> dans votre projet, changez-le en <HashRouter> sinon vous verrez un affichage vide car rien ne sera rendu à l'écran.
24
BlackBeard