Share
Concevoir une application native React à partir de zéro est souvent un processus fastidieux, notamment en ce qui concerne la conception, car vous devez planifier à la fois pour les appareils Android et iOS. Non seulement cela, mais vous devez également vous assurer que votre application est belle sur différentes tailles d'écran.
C'est ici que les modèles sont utiles. Ils gèrent la conception initiale pour vous afin que votre application soit belle avec un effort de conception minimal de votre part. Il existe une poignée de modèles de ce type chez CodeCanyon, une place de marché pour les modèles et les plug-ins. Vous y trouverez différents types de modèles adaptés au type d'application que vous souhaitez créer..
Dans ce didacticiel, nous verrons comment utiliser le modèle BeoStore. Comme son nom l’indique, BeoStore est un modèle d’application de commerce électronique pour React Native..
Vous pouvez télécharger le modèle en vous rendant sur la page du produit BeoStore à CodeCanyon. C'est un modèle payant, mais l'investissement en vaut la peine, car il possède la plupart des fonctionnalités nécessaires dans une application de commerce électronique. Tout ce que vous avez à faire est de configurer le modèle et de le personnaliser à votre guise. Pour avoir une idée de ce qu’il offre prêt à l'emploi, voici certaines de ses caractéristiques principales:
Si vous n'avez pas encore de compte Envato, vous pouvez vous inscrire ici. Une fois cela fait, connectez-vous à votre compte nouvellement créé. Ensuite, vous pouvez revenir à la page BeoStore et cliquer sur le bouton Acheter maintenant bouton.
Une fois que vous avez acheté le modèle, vous obtenez un lien de téléchargement vers le fichier d’archive du modèle. Extrait cela et vous obtiendrez un CodeCanyon dossier qui contient MStore 2.2.
MStore 2.2 est le répertoire du projet de modèle. Allez-y et ouvrez une nouvelle fenêtre de terminal à l'intérieur de ce répertoire et exécutez la commande suivante:
npm installer
Cela installera toutes les dépendances du projet. Cela peut prendre un certain temps en fonction de votre vitesse de téléchargement, car il doit télécharger de nombreuses dépendances. Jeter un coup d'œil à package.json si vous voulez voir les paquets qu'il faut télécharger.
Une fois que cela est fait, il y a une étape supplémentaire si vous voulez créer pour les appareils iOS. Aller au iOS dossier et exécutez les actions suivantes:
installation de pod
Ensuite, pour Android, connectez votre appareil mobile à votre ordinateur et exécutez:
périphériques adb
Ceci listera tous les appareils Android connectés à votre ordinateur. Si vous connectez le périphérique pour la première fois, vous devriez recevoir une invite vous demandant si vous souhaitez autoriser l'ordinateur pour le débogage USB. Il suffit de taper sur Oui une fois que vous obtenez cette invite.
Maintenant, vous pouvez exécuter l'application sur votre appareil Android:
réagit natif run-android
Pour iOS:
réactif natif run-ios
Si vous ne rencontrez aucune erreur, vous devriez être accueilli avec la page suivante:
Pour vous donner une idée des différentes pages disponibles dans le modèle, voici quelques captures d'écran supplémentaires:
Dans cette section, j'ai compilé une liste des erreurs courantes de configuration de projet et de leurs solutions..
Si le serveur de développement n'a pas démarré automatiquement lors de l'exécution réagit natif run-android ou réactif natif run-ios, vous pouvez l'exécuter manuellement en exécutant:
début réactif
Si vous obtenez une erreur semblable à la suivante:
Erreur lors de la création de DependencyGraph: Erreur: Watcher a mis trop de temps à charger Essayez d’exécuter 'watchman version' à partir de votre terminal https://facebook.github.io/watchman/docs/troubleshooting.html sur [objet Object] ._ onTimeout (index.js: 103: 16) à Timer.listOnTimeout (timers.js: 89: 15)
En effet, une instance Watchman existante est en cours d'exécution. Ceci est un composant du serveur de développement React Native. Vous pouvez résoudre cette erreur et arrêter Watchman en exécutant les commandes suivantes:
sudo sysctl fs.inotify.max_user_instances = 99999 sudo sysctl fs.inotify.max_user_watches = 99999 sudo sysctl fs.inotify.max_queued_events = 99999 serveur de surveillance shutdown
Si vous obtenez l'erreur suivante:
error: closed Impossible d'exécuter adb reverse: La commande a échoué: / chemin / vers / android-sdk-linux / sdk / platform-tools / adb -s 300494a80ea22200 reverse tcp: 8081 tcp: 8081
Cela signifie que votre appareil Android fonctionne sur une version inférieure à 5.0 (Lollipop). Ce n'est pas vraiment une erreur. Cela signifie simplement que votre appareil Android ne prend pas en charge adb reverse, qui est utilisé pour connecter le serveur de développement à votre appareil via un débogage USB. Si ce n'est pas disponible, React Native revient au débogage via Wi-Fi. Vous pouvez trouver plus d'informations à ce sujet ici: Running on Device.
Quelque chose d'autre pourrait causer votre build à échouer. Vous pouvez faire défiler le terminal pour voir s’il ya des erreurs qui se sont produites auparavant..
Accentsconagua
_fbBatchedBridge Si le message d'erreur suivant s'affiche et que le serveur de développement fonctionne en mode Wi-Fi, cela signifie que vous n'avez pas configuré l'adresse IP de votre ordinateur sur votre appareil Android. (Cela ne vient généralement qu'avec les appareils Android sous la version 5.0.)
ReferenceError: Impossible de trouver la variable: _fbBatchedBridge (ligne 1 du paquet généré)
Vous pouvez exécuter ce qui suit pour afficher les options du développeur React Native sur votre appareil:
entrée shell adb keyevent 82
Sélectionner Paramètres de développement dans le menu qui apparaît. Sous le Débogage section, appuyez sur Déboguer l'hôte du serveur et le port pour le périphérique. Entrez l'adresse IP interne attribuée par votre routeur domestique ainsi que le port sur lequel le serveur de développement est en cours d'exécution et appuyez sur OK:
YOUR_INTERNAL_IP: 8081
Retournez à l'écran d'accueil de l'application et exécutez entrée shell adb keyevent 82 encore. Cette fois sélectionnez Recharger recharger l'application.
Si vous obtenez des erreurs "impossible à trouver", cela signifie que vous n'avez pas installé le package correspondant à l'aide du gestionnaire de SDK Android..
Voici les paquets qui doivent être installés:
Assurez-vous également de mettre à jour les paquets existants s'il y a une mise à jour disponible.
Si votre problème n'implique aucun des problèmes ci-dessus, vous pouvez essayer les solutions suivantes:
Un bon endroit pour commencer à apprendre à faire les choses dans le modèle est sa documentation:
Assurez-vous de vérifier ceux-ci! Je ne vais pas répéter ce qui a été mentionné dans la documentation. Au lieu de cela, ce que nous allons faire dans cette section est de personnaliser le modèle pour qu’il ressemble à ce que nous voulons..
La plupart des paramètres de configuration du projet sont stockés dans la app / Constants.js fichier. Voici quelques exemples de choses que vous pouvez modifier à partir de ce fichier:
Intégration WooCommerce: L'URL du magasin WooCommerce utilisé par l'application. Par défaut, cela utilise mstore.io.
WordPress: Adresse: 'http://mstore.io/api',, WooCommerce: url: 'http://mstore.io', consumerKey: ", consumerSecret:", wp_api: true, version: 'wc / v1 ', délai d'expiration: 10, // délai d'expiration de la requête RootCategoryId: 0, Produit: Affichage: ProductThumbnails: width: 180, height: 216,, CatalogImages: width: 300, height: 360,, SingleProductImage: largeur: 600, hauteur: 720,,,
Logins sociaux: Ceci est implémenté en utilisant Auth0, une plate-forme d'authentification. Par défaut, le modèle prend uniquement en charge les connexions Google et Facebook. Mais vous devriez pouvoir ajouter n’importe quel service supporté par Auth0.
Auth0: clientId: ", domaine:",,
Icônes: Vous pouvez utiliser n’importe quelle icône de Fontawesome, mais vous devez préfixer le nom par iOS-.
Icône: // Icônes de l'application. Commander http://fontawesome.io/icons/ pour plus d'icônes. Menu: 'ios-menu', Accueil: 'ios-home', Retour: 'ios-arrow-back', Avant: 'ios-arrow-forward', Config: 'paramètres ios', Plus: 'ios-more ', SignIn:' ios-log-in ', SignOut:' ios-log-out ', ShoppingCart:' ios-cart ', ShoppingCartEmpty:' ios-cart-outline ', Tri:' ios-funnel ', Filtre: 'ios-funnel-outline', ShowItem: 'ios-arrow-dropright', HideItem: 'ios-arrow-dropup', ListMode: 'ios-list-box', GridMode: 'ios-grid', RatingFull: 'ios -star ', RatingEmpty:' ios-star-contour ', Liste de souhaits:' ios-heart ', Liste de souhaitsEmpty:' ios-heart-contour ', Supprimer:' ios-trash ', AddToCart:' ios-cart ', MyOrder: 'ios-cube', News: 'ios-paper', Mail: 'ios-mail', RatioOff: 'ios-radio-button-off', RatioOn: 'ios-radio-button-on', Recherche: 'ios -search ', Close:' ios-close ', HappyFace:' ios-happy-contour ', SadFace:' ios-sad-contour ',,
Thème: Les couleurs des différents composants de chaque page peuvent également être mises à jour. Par exemple, si vous souhaitez modifier la couleur d’arrière-plan de l’en-tête, vous pouvez mettre à jour la valeur de Barre du haut:
Couleur: TopBar: 'white', TopBarIcon: '# 283747',
Images: L'écran de démarrage et les autres images peuvent également être mis à jour en spécifiant un nouveau chemin d'accès à chacun des éléments suivants:
Image: Logo: require ('./ images / logo.png'), SplashScreen: require ('./ images / splash_screen.png'), CategoryPlaceholder: require ('./ images / category_placehodler.png'), DefaultAvatar: require ('./ images / default_avatar.jpg'), AvatarBackground: require ('./ images / avatar_background.jpg'), CheckoutStep1: require ('./ images / line-1.png'), CheckoutStep2: require (' ./images/line-2.png '), CheckoutStep3: require (' ./ images / line-3.png '), Stripe: require (' ./ images / stripe.png '), PayPal: require ('. /images/PayPal.png '), CashOnDelivery: require (' ./ images / cash_on_delivery.png '), PlaceHolder: require (' ./ images / placeholderImage.png '),,Ces images sont stockées dans le app / images répertoire, vous pouvez simplement les remplacer si vous ne voulez pas conserver les anciennes images.
identité du client et clef secrète. N'oubliez pas de mettre à jour Mode bac à sable à faux lorsque vous déployez votre application en production, car elle utilise par défaut le mode bac à sable pour ne pas dépenser d'argent en transactions.PayPal: clientID: ", secretKey:", sandBoxMode: true, // passe à false en production,
this.styles = conteneur: flex: 1, imageCard: width: Constants.Dimension.ScreenWidth (1), height: 200,, mainCategoryText: color: 'white', // change la couleur de la catégorie text fontSize: 40 // agrandit le texte de la catégorie, numberOfProductsText: color: 'white', fontSize: 15
Ce didacticiel n’est en aucun cas un guide complet sur l’utilisation du modèle BeoStore. Mais nous avons couvert beaucoup de terrain, en particulier sur le dépannage de configuration, qui manque à la documentation officielle.
L'étape suivante consiste à connecter ce modèle à votre site Web WooCommerce ou même à le modifier afin qu'il puisse être utilisé pour d'autres types d'applications..
Téléchargez le modèle maintenant ou si vous souhaitez en savoir plus à ce sujet, vous pouvez consulter la documentation ici. Vous pouvez également trouver de nombreux autres modèles d'applications natives React sur CodeCanyon..
