Tutoriels
- Mise en route
- First Project
- Applications Web
- Applications mobiles
- React Native App
- SaaS Platform
- E-commerce Platform
- Real-Time Dashboard
- Location-Based App
- Mobile E-commerce
- Optimizing Sales
- Publishing Your App
- Acceptance Criteria
- Template Business
- Watching Virtuoso
Vous apprendrez :
- Configuration du projet React Native
- Composants d'interface utilisateur multiplateformes
- Navigation et routage
- Fonctionnalités natives de l'appareil
- Préparation au déploiement sur les app stores
Application mobile multiplateforme avec React Native
Créez une application qui fonctionne à la fois sur iOS et Android à partir d'un code source unique
React Native vous permet de créer des applications mobiles pour iOS et Android avec un code source unique. Dans ce tutoriel, ZBuild générera une application mobile complète qui s'exécute nativement sur les deux plateformes.
Un seul code source, deux plateformes. Déployez sur les deux app stores à partir d'un seul projet.
Prérequis
- Compte ZBuild Studio
- Connaissances de base en React utiles mais non requises
- Application Expo Go sur votre téléphone pour les tests
Aperçu du projet
Nous allons créer une application de gestion de tâches avec ces fonctionnalités optimisées pour le mobile :
Navigation native
Barre d'onglets, navigation par pile, modales
Prise en charge des gestes
Glisser pour supprimer, tirer pour rafraîchir
Notifications push
Rappels pour les tâches à venir
Support hors ligne
Fonctionne sans connexion Internet
Intégration de la caméra
Joindre des photos aux tâches
Mode sombre
Changement de thème automatique
Étape 1 : Définissez votre application mobile
Décrivez votre application mobile à Conductor en gardant à l'esprit les fonctionnalités spécifiques à chaque plateforme.
Je souhaite créer une application mobile de gestion de tâches.
Fonctionnalités :
- Listes de tâches avec catégories
- Dates d'échéance avec rappels par notification push
- Pièces jointes photo via la caméra ou la galerie
- Gestes de balayage (balayer pour terminer, balayer pour supprimer)
- Tirer pour rafraîchir
- Mode hors ligne avec synchronisation une fois en ligne
- Prise en charge du mode sombre
Navigation :
- Barre d'onglets inférieure (Tâches, Calendrier, Paramètres)
- Navigation par pile au sein de chaque onglet
Plateformes : iOS et Android
Framework : React Native avec ExpoÉtape 2 : Composants natifs
Virtuoso crée des composants adaptés aux plateformes qui semblent natifs sur chacune d'elles.
Interface style iOS
Police San Francisco, modèles de navigation iOS
Interface style Android
Éléments Material Design, navigation Android
Mises en page adaptatives
S'ajuste aux différentes tailles d'écran
Zones de sécurité
Respecte les encoches et les indicateurs d'accueil
Étape 3 : Fonctionnalités de l'appareil
Accédez aux capacités natives de l'appareil via les ponts React Native.
- Accès à la caméra et à la bibliothèque de photos
- Configuration des notifications push
- Stockage local avec AsyncStorage
- Retour haptique sur les interactions
- Option d'authentification biométrique
Étape 4 : Test sur l'appareil
Testez votre application sur de vrais appareils à l'aide d'Expo Go.
- Scannez le code QR avec l'application Expo Go
- L'application se charge sur votre appareil physique
- Apportez des modifications et voyez les mises à jour en direct
- Testez sur plusieurs appareils simultanément
Bonne pratique Testez sur les appareils iOS et Android pour détecter tôt les problèmes spécifiques aux plateformes.
Ce que vous avez construit
- Application mobile multiplateforme (iOS et Android)
- Navigation et gestes natifs
- Intégration de la caméra et des notifications push
- Capacité hors ligne avec synchronisation des données
- Prise en charge du mode sombre
Étapes suivantes
Application basée sur la localisation
Ajoutez le GPS et des cartes à votre application mobile
E-commerce mobile
Créez une application de shopping avec paiements
Prêt à créer votre application mobile ?
Commencez à créer votre application mobile multiplateforme dès aujourd'hui.