create react native app redux auth
1.0.0
Il s'agit d'un buissier debout de création-réaction-application avec Redux & local Auth & React Navigation intégré.
create-react-native-app-redux-auth génère tous les fichiers fondamentaux pour une nouvelle application native React avec Redux branchée (pour la gestion de l'État) ainsi que la navigation React et l'authentification locale sont complètement réalisées!
Vous pouvez travailler avec tous les composants et API dans React Native, ainsi que la plupart des API JavaScript fournies par l'application Expo.
create-react-native-app-redux-auth !Un tutoriel écrit complet peut être trouvé ici.
Ce projet a été enraciné avec Create React Native App et FSG.
Assurez-vous que le nœud V6 ou ultérieure est installé, ainsi que la version actuelle d'Expo Client 2.5.0 sur votre appareil mobile afin de prendre en charge React Native 0.55. Aucune installation Xcode ou Android Studio n'est requise.
$ npm install -g create-react-native-app-redux-auth L'outil de ligne de commande de create-react-native-app-redux-auth peut être utilisé de différentes manières.
$ create-react-native-app-redux-auth La simple exécution create-react-native-app-redux-auth dans un répertoire crée un sous-dossier generated contenant vos nouveaux fichiers d'application.
Alternativement, create-react-native-app-redux-auth peut suivre un chemin de fichier (relatif ou absolu, et même celui qui n'existe pas encore), et il utilisera / créera le dossier de destination et le remplira avec vos nouveaux fichiers d'application.
$ create-react-native-app-redux-auth path/to/any/directory/you/prefer Si vous avez déjà fabriqué et cd dans un répertoire et que vous souhaitez le remplir avec les nouveaux fichiers d'application, utilisez simplement le . chemin.
$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder! Après avoir généré les fichiers, assurez-vous que les commandes suivantes sont exécutées dans la racine du projet ( generated/ sauf si vous avez utilisé un argument de chemin comme expliqué ci-dessus):
$ npm installPour commencer rapidement, changez simplement 2 choses :
package.json , modifiez le "nom" au nom de votre application.IP.js , modifiez l'IP en adresse IP complète de votre backend, que ce soit sur localhost:PORT ou un endroit déployé, comme Heroku.Pour activer l'authentification locale intégrée, le projet généré suppose une base de données en cours. Vous devez configurer votre serveur pour les appels Axios de Redux:
${IP}/auth/login avec la charge utile {e-mail: e-mail, mot de passe: mot de passe}.${IP}/auth/signup avec la charge utile {e-mail: e-mail, mot de passe: mot de passe}.${IP}/auth/logout sans charge utile. $ npm startMerci d'avoir joué! Hadoken. ?
Vous trouverez ci-dessous des informations sur l'exécution des tâches communes. La version la plus récente de ce guide est disponible ici.
Vous ne devriez avoir besoin que de mettre à jour l'installation globale de create-react-native-app très rarement, idéalement jamais.
La mise à jour de la dépendance react-native-scripts de votre application devrait être aussi simple que de coller le numéro de version dans package.json et de réinstaller les dépendances de votre projet.
La mise à niveau vers une nouvelle version de React Native nécessite la mise à jour des versions react-native , react et expo et définir la bonne sdkVersion dans app.json . Voir le guide de versioning pour les informations à jour sur la compatibilité des versions du package.
Si le fil a été installé lorsque le projet a été initialisé, les dépendances auront été installées via le fil, et vous devriez probablement l'utiliser pour exécuter ces commandes également. Contrairement à l'installation de dépendance, la syntaxe de commande est identique pour le fil et le NPM au moment de la rédaction de cet article.
npm startExécute votre application en mode développement.
Ouvrez-le dans l'application Expo sur votre téléphone pour le visualiser. Il se rechargera si vous enregistrez les modifications de vos fichiers, et vous verrez des erreurs de construction et des journaux dans le terminal.
Parfois, vous devrez peut-être réinitialiser ou effacer le cache du réactif du packageur natif. Pour ce faire, vous pouvez passer l'indicateur --reset-cache au script de démarrage:
npm start --reset-cache
# or
yarn start --reset-cache
npm testExécute le coureur de test de plaisanterie sur vos tests.
npm run ios Comme npm start , mais tente également d'ouvrir votre application dans le simulateur iOS si vous êtes sur un Mac et que vous l'avez installé.
npm run android Comme npm start , mais tente également d'ouvrir votre application sur un appareil Android connecté ou un émulateur. Nécessite une installation d'outils de construction Android (voir React Native Docs pour une configuration détaillée). Nous vous recommandons également d'installer Genymotion comme émulateur Android. Une fois que vous avez terminé la configuration de l'environnement de construction natif, il existe deux options pour rendre la bonne copie de adb disponible pour créer l'application native React:
adb d'Android StudioSettings -> ADB . Sélectionnez «Utilisez des outils SDK Android personnalisés» et mettez à jour avec votre répertoire Android SDK. adb de la BAD de Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ .npm run ejectCela commencera le processus d'éjection "de créer des scripts de construction de l'application native React. On vous pose quelques questions sur la façon dont vous souhaitez construire votre projet.
AVERTISSEMENT: L'exécution d'éjection est une action permanente (à part n'importe quel système de contrôle de version que vous utilisez). Une application éjectée vous obligera à avoir un environnement Xcode et / ou Android Studio.
Vous pouvez modifier app.json pour inclure les touches de configuration sous la touche expo .
Pour modifier le nom d'affichage de votre application, définissez la touche expo.name dans app.json sur une chaîne appropriée.
Pour définir une icône d'application, définissez la clé expo.icon dans app.json pour être un chemin local ou une URL. Il est recommandé d'utiliser un fichier PNG 512x512 avec transparence.
Ce projet est configuré pour utiliser la plaisanterie pour les tests. Vous pouvez configurer la stratégie de test que vous aimez, mais la plaisanterie fonctionne hors de la boîte. Créez des fichiers de test dans des répertoires appelés __tests__ ou avec l'extension .test pour que les fichiers soient chargés par la plaisanterie. Voir le projet de modèle pour un exemple de test. La documentation Jest est également une merveilleuse ressource, tout comme le tutoriel de test des natifs React.
Vous pouvez configurer une partie du comportement de Create React Native App à l'aide de variables d'environnement.
Lorsque vous démarrez votre projet, vous verrez quelque chose comme ça pour votre URL de projet:
exp://192.168.0.2:19000
Le "manifeste" sur cette URL indique à l'application Expo comment récupérer et charger le bundle JavaScript de votre application, donc même si vous le chargez dans l'application via une URL comme exp://localhost:19000 , l'application EXPO Client essaiera toujours de récupérer votre application à l'adresse IP que le script de démarrage fournit.
Dans certains cas, c'est loin d'être idéal. Cela pourrait être le cas si vous devez exécuter votre projet à l'intérieur d'une machine virtuelle et que vous devez accéder au Packager via une adresse IP différente de celle qui imprime par défaut. Afin de remplacer l'adresse IP ou le nom d'hôte détecté par création de l'application Native React, vous pouvez spécifier votre propre nom d'hôte via la variable d'environnement REACT_NATIVE_PACKAGER_HOSTNAME :
Mac et Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Windows:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
L'exemple ci-dessus entraînerait l'écoute du serveur de développement sur exp://my-custom-ip-address-or-hostname:19000 .
Créer une application Native React fait beaucoup de travail pour rendre la configuration et le développement des applications simples et simples, mais il est très difficile de faire de même pour le déploiement sur l'App Store d'Apple ou le Play Store de Google sans compter sur un service hébergé.
Expo fournit un hébergement gratuit pour les applications JS uniquement créées par CRNA, vous permettant de partager votre application via l'application EXPO Client. Cela nécessite l'inscription pour un compte Expo.
Installez l'outil de ligne de commande exp et exécutez la commande Publish:
$ npm i -g exp
$ exp publish
Vous pouvez également utiliser un service comme les versions autonomes d'Expo si vous souhaitez obtenir un IPA / APK pour la distribution sans avoir à créer le code natif vous-même.
Si vous souhaitez créer et déployer votre application vous-même, vous devrez éjecter à partir de CRNA et utiliser Xcode et Android Studio.
Ceci est généralement aussi simple que l'exécution npm run eject dans votre projet, qui vous guidera tout au long du processus. Assurez-vous d'installer react-native-cli et suivez le guide de démarrage du code natif pour React Native.
Si vous avez utilisé des API EXPO lors de votre travail sur votre projet, ces appels API cesseront de fonctionner si vous éjectez à un projet React Native régulier. Si vous souhaitez continuer à utiliser ces API, vous pouvez éjecter pour "React Native + Expokit" qui vous permettra toujours de créer votre propre code natif et de continuer à utiliser les API EXPO. Voir le guide d'éjection pour plus de détails sur cette option.
Si vous n'êtes pas en mesure de charger votre application sur votre téléphone en raison d'un délai d'expiration du réseau ou d'une connexion refusée, une bonne première étape consiste à vérifier que votre téléphone et votre ordinateur sont sur le même réseau et qu'ils peuvent s'atteindre. Créer que l'application Native React a besoin d'accès aux ports 19000 et 19001, assurez-vous que votre réseau et vos paramètres de pare-feu permettent d'accéder à votre appareil à votre ordinateur sur ces deux ports.
Essayez d'ouvrir un navigateur Web sur votre téléphone et d'ouvrir l'URL que le script Packager imprime, en remplaçant exp:// par http:// . Ainsi, par exemple, si sous le code QR dans votre terminal, vous voyez:
exp://192.168.0.1:19000
Essayez d'ouvrir safari ou Chrome sur votre téléphone et le chargement
http://192.168.0.1:19000
et
http://192.168.0.1:19001
Si cela fonctionne, mais que vous n'êtes toujours pas en mesure de charger votre application en numérisant le code QR, veuillez ouvrir un problème sur le référentiel d'applications Native React Create React avec des détails sur ces étapes et les autres messages d'erreur que vous avez pu recevoir.
Si vous n'êtes pas en mesure de charger l'URL http dans le navigateur Web de votre téléphone, essayez d'utiliser la fonction d'attachement / hotspot mobile sur votre téléphone (méfiez-vous de l'utilisation des données, cependant), en connectant votre ordinateur à ce réseau WiFi et en redémarrant le packageur. Si vous utilisez un VPN, vous devrez peut-être le désactiver.
Si vous êtes sur un Mac, il y a quelques erreurs que les utilisateurs voient parfois lors de la tentative de npm run ios :
Il y a quelques étapes que vous voudrez peut-être prendre pour dépanner ce type d'erreurs:
Command Line Tools est définie sur quelque chose. Parfois, lorsque les outils CLI sont installés pour la première fois par Homebrew, cette option est laissée vide, ce qui peut empêcher les utilitaires Apple de trouver le simulateur. Assurez-vous de ré-paraître npm/yarn run ios après cela.Reset Contents and Settings... Après cela, il a terminé, quittez le simulateur et réécoutez npm/yarn run ios .Si vous n'êtes pas en mesure de scanner le code QR, assurez-vous que l'appareil photo de votre téléphone se concentre correctement et assurez-vous également que le contraste sur les deux couleurs de votre terminal est suffisamment élevé. Par exemple, les thèmes par défaut de WebStorm peuvent ne pas avoir suffisamment de contraste pour que les codes QR terminaux soient numérisables avec les scanners de code-barres système utilisés par l'application Expo.
Si cela vous cause des problèmes, vous voudrez peut-être essayer de changer le thème de la couleur de votre terminal pour avoir plus de contraste, ou exécuter Créer React Native App à partir d'un terminal différent. Vous pouvez également saisir manuellement l'URL imprimé par le script Packager dans la barre de recherche de l'application Expo pour le charger manuellement.
