Cordova avec Create-réagir-app

J'ai créé un ReactJs app avec créez-réagir-app et fait ensuite la Production de construire avec npm run build. Dans mon www dossier créé avec Cordova je viens de copier tous les fichiers à partir de la créez-réagir-application dossier de création et c'est très bien.

Je veux savoir comment faire du crochet dans la Cordoue des événements comme par exemple:

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

Par exemple, je tiens à appeler l'minifiés fichier JS à l'intérieur de startApp(). Ou est-il un autre flux de travail qui peut être utilisé pour faire de Cordova événements travailler avec réagissent app.

Un petit exemple serait utile.

Est-il possible d'utiliser le fichier de build à tous et il suffit d'utiliser la Réagir Application directement à l'intérieur de Cordoue? Je ne sais pas comment cela pourrait fonctionner étant donné qu'il n'est Webpack paramètres qui transpiles l'ES6 code de ES5 et tous.

Je suis nouveau à Cordoue et aux prises avec cette intégration.

J'ai compris comment faire les deux et nous publierons ici pour quelqu'un d'autre à la recherche pour la même réponse. Il est assez trivial et il y a peut-être d'autres méthodes , mais c'est ce que wprked pour moi assez bien.
Salut @barbe noire / Sourav -- pourriez-vous aider sur cette question similaire avec un problème de routage dans un réagir application de cordoue? stackoverflow.com/questions/53384887/... Merci

InformationsquelleAutor Sourav Chatterjee | 2017-04-11

J'ai trouvé pour faire les deux et nous publierons ici pour quelqu'un d'autre qui cherche la même chose. Il y a peut-être d'autres méthodes pour faire cela , mais c'est ce qui a fonctionné pour moi.

Donc, fondamentalement, nous allons créer une Application Cordova à l'aide de(dis) :
cordova créer testapp com.test.testapp testapp
Cela va me donner une Structure de Dossiers de la manière suivante:

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

Maintenant à l'intérieur de la testapp dossier nous lancer : créer-réagir-app teastappReact
Qui va ajouter mon réagir application à l'intérieur de testapp dossier.
Vos réagir application dispose d'un principal index.js dans le répertoire /src.

Je l'index.js assurez-vous d'envelopper vos principales de la logique à l'intérieur d'une fonction, puis d'appeler la fonction avec Cordova objet 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)
}

Qui devrait faire maintenant votre application aura Cordova exemple avec l'Appareil des objets comme navigateur.la caméra à l'intérieur de votre application.

Également dans votre réagissent apps index.html qui peut être trouvé dans le dossier public de copier le code html de la index.html que vous trouverez dans le Codova dossier www. Maintenant, nous pouvons supprimer tous les fichiers dans le dossier www. Nous verrons plus tard, manuellement ou via un script de copie de tous les fichiers de réagir apps dossier de création de Cordova dossier www.

Donc mon index.html ressemblerait à quelque chose comme ci-dessous, notez le cordova.js fichier c'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 votre réagissent apps' paquet.json ajouter la ligne suivante:
....
"page d'accueil": "../www"
....
Ce sera assurez-vous que votre dernier fichier de build est pointant vers le droit chemin.
nous pouvons également ajouter les lignes suivantes dans votre colis.json script de construction.

  "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 le système d'exploitation(Windows/Linux, etc)..

Nous devrions avoir notre application Cordova prêt à construire avec
cordova construire android/ios.

Pour une utilisation Mac cp -a ./build/. ../www/ au lieu de robocopy, -a est une version améliorée de -r et le point après la construction s'assure que tous les fichiers cachés sont également copiés si tout
$ cordova plugin add cordova-plugin-whitelist . Par défaut, les navigations seulement à file:// URLs, sont autorisés. Pour permettre à d'autres Url, vous devez ajouter <permettre la navigation> balises à votre config.xml SO
Salut, pourrait vous aider sur cette question similaire avec un problème de routage dans un réagir application de cordoue? stackoverflow.com/questions/53384887/... Merci
Que feriez-vous si vous voulez avoir de la plate-forme de code? Avec juste Cordova, la plate-forme de code spécifique fusionne/.

InformationsquelleAutor

23

J'ai résolu le problème. Voici ce que j'ai fait en une étape-par-étape pour ceux qui recherchent la solution:
1. Copier/Créer-un-nouveau React projet (créé à l'aide de create-react-app) juste à l'intérieur de la Cordova répertoire app.
2. Effacer tout le contenu de www dossier de Cordova app.
3. cd de Réagir dossier du projet (que vous venez de copier/créé) & ouvrir package.json.
4. Avant dependencies ajouter "homepage": "./", & à l'intérieur des scripts de changement build à "build": "react-scripts build && robocopy .\\build ..\\www /MIR",
5. Ne npm run build dans même (React's) répertoire & retour à parent (Cordova) dossier puis build et emulate votre projet de plate-forme désirée.
6. Conseil Bonus: Si vous utilisez <Router> dans votre projet de changement de <HashRouter> sinon, vous verrez un écran vide que rien ne sera affichée à l'écran.
- Je vous remercie, votre Conseil Bonus, m'a sauvé!
- pourquoi ne pas utiliser cp -rf ./build/ ../www/?
- N'ai pas essayé avec qui. S'il vous plaît laissez-nous savoir si cela fonctionne. Bien que ci-dessus est la commande pour Windows seulement.
- Le Conseil Bonus sauvé ma journée!
- J'ai changé le routeur de hachage de routage et elle fonctionne sur iOS, mais pas sur Android. Toute aide? stackoverflow.com/questions/53384887/... Merci
InformationsquelleAutor BlackBeard
-1

l'essayer, c'est le meilleur bundle.

aller à readme.md dans le git et de commencer avec ce
- Lors de la recommandation de l'outillage que vous avez écrit vous-même, d'ajouter un avertissement ("j'ai écrit ce")
InformationsquelleAutor Or Choban

Vous devez vous connecter pour publier un commentaire.