react-native-architecture

Aperçu

Qu'est-ce que react-native-architecture ?

react-native-architecture offre un modèle pratique pour construire des applications mobiles React Native évolutives et prêtes pour la production. Il met l'accent sur l'utilisation d'Expo, une navigation avancée, l'intégration de modules natifs, les modèles offline-first, et une structure de projet robuste. Cette compétence est conçue pour les développeurs frontend et les équipes mobiles souhaitant accélérer la livraison d'applications tout en respectant les bonnes pratiques.

À qui s'adresse cette compétence ?

• Développeurs lançant de nouveaux projets React Native ou Expo
• Équipes mettant en place des flux complexes de navigation ou d'authentification
• Projets nécessitant l'intégration de modules natifs ou d'API plateformes
• Applications nécessitant un support hors ligne et une gestion d'état fiable
• Toute personne optimisant les performances React Native ou configurant un CI/CD mobile

Problèmes résolus

• Réduit le temps de configuration grâce à une structure de projet éprouvée
• Clarifie quand utiliser Expo ou React Native Bare
• Guide l'intégration des modules natifs et des API plateformes
• Supporte le développement offline-first et multiplateforme
• Aide à maintenir des bases de code évolutives et faciles à maintenir

Comment utiliser

Étapes d'installation

1. Ajoutez la compétence à votre agent avec :

   npx skills add https://github.com/wshobson/agents --skill react-native-architecture
   

2. Ouvrez le fichier SKILL.md pour une vue d'ensemble et des conseils sur le workflow.
3. Consultez les fichiers complémentaires comme README.md, AGENTS.md et metadata.json pour un contexte approfondi.
4. Explorez les dossiers rules/, resources/, references/ et scripts/ pour les détails d'implémentation et les utilitaires.

Aperçu de la structure du projet

La structure recommandée comprend :

• src/app/ : écrans Expo Router, organisés par type de navigation (ex. auth, tabs)
• src/components/ : composants UI et spécifiques aux fonctionnalités
• src/hooks/ : hooks React personnalisés
• src/services/ : intégrations API et services natifs
• src/stores/ : logique de gestion d'état
• src/utils/ : fonctions utilitaires
• src/types/ : définitions de types TypeScript

Expo vs Bare React Native

• Expo : configuration simplifiée, gestion des modules natifs, mises à jour rapides over-the-air
• Bare React Native : plus de contrôle, liaison manuelle des modules natifs, complexité accrue
  Choisissez Expo pour la plupart des projets, sauf si vous avez besoin de code natif personnalisé non supporté par Expo.

Adapter la compétence

Plutôt que de copier directement les fichiers, adaptez l'architecture et les modèles pour correspondre à votre propre dépôt, chaîne d'outils et conventions d'équipe.

FAQ

Quel est le principal avantage de react-native-architecture ?

Il offre un point de départ clair et évolutif pour les projets React Native, réduisant le temps de configuration et la dette technique.

Puis-je l'utiliser avec des projets React Native existants ?

Oui, vous pouvez adopter progressivement la structure et les modèles recommandés pour améliorer la maintenabilité.

Cette compétence est-elle réservée à Expo ?

Non. Bien qu'Expo soit recommandé pour la plupart des cas, l'architecture prend aussi en charge Bare React Native lorsque des intégrations natives personnalisées sont nécessaires.

Par où commencer après l'installation ?

Commencez par le fichier SKILL.md pour une vue d'ensemble, puis explorez l'arborescence des fichiers pour des conseils détaillés et des exemples.

Comment voir tous les fichiers et scripts disponibles ?

Utilisez l'onglet Fichiers pour parcourir l'arborescence complète, y compris les références imbriquées et les scripts d'aide.