Structure des dossiers d'une application native React

Introduction

React Native est un framework puissant pour créer des applications mobiles à l'aide de JavaScript et React. Lorsque vous vous lancez dans le développement avec React Native, il est essentiel de comprendre la structure d'un projet React Native typique. Chaque dossier et fichier a un objectif spécifique, et connaître leurs rôles vous aidera à gérer et à naviguer plus efficacement dans votre projet. Cet article fournit un aperçu complet de la structure des dossiers d'une application React Native, en se concentrant sur le contenu et les objectifs des répertoires principaux : le répertoire racine, le dossier android/ et le dossier ios/.

Répertoire racine

Le répertoire racine d'un projet React Native contient les fichiers et dossiers essentiels qui gèrent les dépendances, la configuration et le point d'entrée du projet.

Fichiers et dossiers clés

• node_modules/ : Contient toutes les dépendances et sous-dépendances installées via npm ou Yarn. En règle générale, vous n'aurez pas besoin de toucher directement ce dossier.
• package.json : répertorie les dépendances, les scripts et autres métadonnées de votre projet. C'est crucial pour gérer les dépendances et les scripts du projet.
• package-lock.json ou Yarn.lock : verrouille les versions des dépendances installées, garantissant ainsi la cohérence entre les différents environnements.
• index.js : Le point d'entrée de votre application React Native, enregistrant généralement le composant principal de l'application.

Dossiers principaux

• android/ : contient le code natif d'Android et les fichiers de configuration, nécessaires si vous devez écrire ou modifier du code natif d'Android.
• ios/ : Contient le code natif iOS et les fichiers de configuration, indispensables pour écrire ou modifier le code natif iOS.
• app/ ou src/ : souvent le dossier principal de votre code JavaScript/TypeScript, tel que les composants, les écrans et les services. C'est là que réside la majeure partie du code de votre application.

Sous-dossiers communs (dans app/ ou src/)

• composants/ : composants d'interface utilisateur réutilisables, aidant à organiser et à réutiliser les éléments d'interface utilisateur dans différentes parties de l'application.
• écrans/ : composants représentant différents écrans ou vues, facilitant la gestion de la navigation et des écrans individuels.
• navigations/ : configuration et composants de navigation, utilisés pour définir la structure de navigation de l'application.
• actifs/ : images, polices et autres actifs statiques, gardant toutes les ressources statiques organisées.
• redux/ (si vous utilisez Redux pour la gestion de l'état) : actions, réducteurs et configuration du magasin pour gérer l'état global de l'application.
• styles/ : styles courants utilisés dans les composants et les écrans, permettant de maintenir une conception cohérente et de simplifier la gestion des styles.

Fichiers de configuration et utilitaires

• .babelrc ou babel.config.js : fichier de configuration Babel, définissant comment Babel transpile votre code.
• .eslintrc.js : fichier de configuration ESLint, configuration des règles de peluchage pour votre projet.
• .prettierrc : Fichier de configuration plus joli, configurant les règles de formatage du code.
• metro.config.js : Fichier de configuration du bundler Metro, le bundler JavaScript utilisé par React Native.
• .gitignore : Spécifie les fichiers et répertoires à ignorer dans votre référentiel git.

Le dossier Android/

Le dossier android/ contient tout le code natif Android et les fichiers de configuration nécessaires pour créer et exécuter votre application React Native sur un appareil ou un émulateur Android.

Fichiers et dossiers clés

• build.gradle : Le fichier de build de niveau supérieur dans lequel vous pouvez ajouter des options de configuration communes à tous les sous-projets/modules.
• gradle.properties : Propriétés de configuration pour le système de build Gradle.
• gradlew et gradlew.bat : scripts pour exécuter les commandes Gradle sur les systèmes Unix et Windows, respectivement.
• settings.gradle : Spécifie les modules du projet, y compris les bibliothèques externes ou les modules supplémentaires dont votre projet pourrait dépendre.

Sous-dossiers

application/

• build.gradle : Le fichier de build du module d'application, contenant les configurations et les dépendances spécifiques à votre application.
• src/ : Contient le code source de la partie Android de votre application.
  • principal/ :
  • AndroidManifest.xml : décrit les informations essentielles sur votre application aux outils de création Android, au système d'exploitation Android et à Google Play.
  • java/ : contient les fichiers sources Java ou Kotlin, notamment MainActivity.java ou MainActivity.kt, le point d'entrée de l'application.
  • res/ : contient des ressources d'application telles que des mises en page, des fichiers dessinables (images), des chaînes et d'autres fichiers XML utilisés par l'application.
  • assets/ : stocke les fichiers d'actifs bruts nécessaires à votre application, tels que des polices ou d'autres fichiers binaires.
  • jniLibs/ : contient des bibliothèques natives précompilées (fichiers .so) dont dépend votre application.

diplôme/

• wrapper/ : contient des fichiers pour aider avec le système de construction Gradle.
  • gradle-wrapper.jar : Un fichier JAR pour le wrapper Gradle, vous permettant de créer votre projet sans obliger les utilisateurs à installer Gradle.
  • gradle-wrapper.properties : Spécifie la version de Gradle à utiliser et d'autres propriétés.

Le dossier ios/

Le dossier ios/ contient tout le code iOS natif et les fichiers de configuration nécessaires pour créer et exécuter votre application React Native sur un appareil ou un simulateur iOS.

Fichiers et dossiers clés

• Podfile : Spécifie les dépendances pour la partie iOS de votre application React Native, gérée par CocoaPods.
• Podfile.lock : verrouille les versions des dépendances spécifiées dans le Podfile, garantissant ainsi la cohérence entre les différents environnements.
• .xcworkspace : un fichier d'espace de travail généré par CocoaPods que vous utilisez pour ouvrir votre projet dans Xcode.
• .xcodeproj : le fichier de projet Xcode contenant les paramètres et les informations du projet de votre application.

Sous-dossiers

/

• AppDelegate.m ou AppDelegate.swift : gère les événements et les états au niveau de l'application, le point d'entrée de l'application iOS.
• Info.plist : contient des informations de configuration pour l'application, telles que l'identifiant du bundle, le nom de l'application, les autorisations et d'autres paramètres.
• Assets.xcassets/ : contient les éléments d'image et d'icône de l'application.
• Base.lproj/ : Contient le storyboard principal ou le fichier d'écran de lancement (LaunchScreen.storyboard).
• main.m ou main.swift : le point d'entrée principal de l'application, configurant l'objet d'application et le délégué d'application.
• Fichiers de support/ : contient des ressources et des configurations supplémentaires, telles que des droits et des en-têtes de pontage (si vous utilisez Swift).

Conclusion

Comprendre la structure des dossiers d'une application React Native est crucial pour une gestion et un développement de projet efficaces. Chaque dossier et fichier a un rôle spécifique, depuis la gestion des dépendances et des configurations jusqu'à contenir le code et les ressources pour les plates-formes Android et iOS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!