Einführung

React Native ist ein leistungsstarkes Framework zum Erstellen mobiler Anwendungen mit JavaScript und React. Wenn Sie sich mit der Entwicklung mit React Native befassen, ist es wichtig, die Struktur eines typischen React Native-Projekts zu verstehen. Jeder Ordner und jede Datei hat einen bestimmten Zweck. Wenn Sie ihre Rollen kennen, können Sie Ihr Projekt effizienter verwalten und steuern. Dieser Artikel bietet einen umfassenden Überblick über die Ordnerstruktur einer React Native-App und konzentriert sich dabei auf die Inhalte und Zwecke der Hauptverzeichnisse: das Stammverzeichnis, den Ordner „android/“ und den Ordner „ios/“.

Wurzelverzeichnis

Das Stammverzeichnis eines React Native-Projekts enthält wichtige Dateien und Ordner, die die Abhängigkeiten, die Konfiguration und den Einstiegspunkt des Projekts verwalten.

Wichtige Dateien und Ordner

• node_modules/: Enthält alle über npm oder Yarn installierten Abhängigkeiten und Unterabhängigkeiten. Normalerweise müssen Sie diesen Ordner nicht direkt berühren.
• package.json: Listet Ihre Projektabhängigkeiten, Skripte und andere Metadaten auf. Es ist entscheidend für die Verwaltung von Projektabhängigkeiten und Skripten.
• package-lock.json oder Yarn.lock: Sperrt die Versionen der installierten Abhängigkeiten und sorgt so für Konsistenz in verschiedenen Umgebungen.
• index.js: Der Einstiegspunkt für Ihre React Native-App, der normalerweise die Hauptkomponente der App registriert.

Kernordner

• android/: Enthält den nativen Android-Code und die Konfigurationsdateien, die erforderlich sind, wenn Sie nativen Android-Code schreiben oder ändern müssen.
• ios/: Enthält den nativen iOS-Code und die Konfigurationsdateien, die zum Schreiben oder Ändern von nativem iOS-Code unerlässlich sind.
• app/ oder src/: Oft der Hauptordner für Ihren JavaScript-/TypeScript-Code, wie Komponenten, Bildschirme und Dienste. Hier befindet sich der Großteil des Codes Ihrer App.

Gemeinsame Unterordner (innerhalb von app/ oder src/)

• components/: Wiederverwendbare UI-Komponenten, die dabei helfen, UI-Elemente in verschiedenen Teilen der App zu organisieren und wiederzuverwenden.
• Bildschirme/: Komponenten, die verschiedene Bildschirme oder Ansichten darstellen und die Verwaltung der Navigation und einzelner Bildschirme erleichtern.
• navigations/: Navigationskonfiguration und -komponenten, die zum Definieren der Navigationsstruktur der App verwendet werden.
• assets/: Bilder, Schriftarten und andere statische Assets, um alle statischen Ressourcen organisiert zu halten.
• redux/ (bei Verwendung von Redux für die Statusverwaltung): Aktionen, Reduzierer und Speicherkonfiguration für die Verwaltung des globalen Status der Anwendung.
• Stile/: Gemeinsame Stile, die für alle Komponenten und Bildschirme verwendet werden, um ein einheitliches Design beizubehalten und die Stilverwaltung zu vereinfachen.

Konfigurations- und Dienstprogrammdateien

• .babelrc oder babel.config.js: Babel-Konfigurationsdatei, die definiert, wie Babel Ihren Code transpiliert.
• .eslintrc.js: ESLint-Konfigurationsdatei, die Linting-Regeln für Ihr Projekt einrichtet.
• .prettierrc: Hübschere Konfigurationsdatei, die Codeformatierungsregeln konfiguriert.
• metro.config.js: Konfigurationsdatei für den Metro-Bundler, den von React Native verwendeten JavaScript-Bundler.
• .gitignore: Gibt an, welche Dateien und Verzeichnisse in Ihrem Git-Repository ignoriert werden sollen.

Der Android/-Ordner

Der Ordner „android/“ enthält den gesamten nativen Android-Code und die Konfigurationsdateien, die zum Erstellen und Ausführen Ihrer React Native-App auf einem Android-Gerät oder Emulator erforderlich sind.

Wichtige Dateien und Ordner

• build.gradle: Die Build-Datei der obersten Ebene, in der Sie Konfigurationsoptionen hinzufügen können, die für alle Unterprojekte/Module gelten.
• gradle.properties: Konfigurationseigenschaften für das Gradle-Build-System.
• gradlew und gradlew.bat: Skripte zum Ausführen von Gradle-Befehlen auf Unix-basierten bzw. Windows-Systemen.
• settings.gradle: Gibt die Module des Projekts an, einschließlich aller externen Bibliotheken oder zusätzlichen Module, von denen Ihr Projekt möglicherweise abhängt.

Unterordner

App/

• build.gradle: Die Build-Datei für das App-Modul, die für Ihre App spezifische Konfigurationen und Abhängigkeiten enthält.
• src/: Enthält den Quellcode für den Android-Teil Ihrer App.
  • hauptsächlich/:
  • AndroidManifest.xml: Beschreibt wichtige Informationen zu Ihrer App für die Android-Build-Tools, das Android-Betriebssystem und Google Play.
  • java/: Enthält Java- oder Kotlin-Quelldateien, einschließlich MainActivity.java oder MainActivity.kt, dem Einstiegspunkt der App.
  • res/: Enthält App-Ressourcen wie Layouts, zeichnbare Dateien (Bilder), Zeichenfolgen und andere von der App verwendete XML-Dateien.
  • assets/: Speichert Roh-Asset-Dateien, die von Ihrer App benötigt werden, z. B. Schriftarten oder andere Binärdateien.
  • jniLibs/: Enthält vorkompilierte native Bibliotheken (.so-Dateien), von denen Ihre App abhängt.

gradle/

• wrapper/: Enthält Dateien, die beim Gradle-Build-System helfen.
  • gradle-wrapper.jar: Eine JAR-Datei für den Gradle-Wrapper, mit der Sie Ihr Projekt erstellen können, ohne dass Benutzer Gradle installieren müssen.
  • gradle-wrapper.properties: Gibt die zu verwendende Gradle-Version und andere Eigenschaften an.

Der ios/-Ordner

Der Ordner ios/ enthält alle nativen iOS-Code- und Konfigurationsdateien, die zum Erstellen und Ausführen Ihrer React Native-App auf einem iOS-Gerät oder Simulator erforderlich sind.

Wichtige Dateien und Ordner

• Podfile: Gibt Abhängigkeiten für den iOS-Teil Ihrer React Native-App an, verwaltet von CocoaPods.
• Podfile.lock: Sperrt die Versionen der in der Poddatei angegebenen Abhängigkeiten und sorgt so für Konsistenz in verschiedenen Umgebungen.
• .xcworkspace: Eine von CocoaPods generierte Arbeitsbereichsdatei, die Sie zum Öffnen Ihres Projekts in Xcode verwenden.
• .xcodeproj: Die Xcode-Projektdatei, die die Projekteinstellungen und -informationen Ihrer App enthält.

Unterordner

/

• AppDelegate.m oder AppDelegate.swift: Verwaltet Ereignisse und Zustände auf Anwendungsebene, den Einstiegspunkt für die iOS-App.
• Info.plist: Enthält Konfigurationsinformationen für die App, wie Bundle-ID, App-Name, Berechtigungen und andere Einstellungen.
• Assets.xcassets/: Enthält die Bild- und Symbol-Assets der App.
• Base.lproj/: Enthält das Haupt-Storyboard oder die Startbildschirmdatei (LaunchScreen.storyboard).
• main.m oder main.swift: Der Haupteinstiegspunkt für die App, der das Anwendungsobjekt und den Anwendungsdelegaten einrichtet.
• Unterstützende Dateien/: Enthält zusätzliche Ressourcen und Konfigurationen, wie Berechtigungen und Bridging-Header (bei Verwendung von Swift).

Abschluss

Das Verständnis der Ordnerstruktur einer React Native-App ist für ein effizientes Projektmanagement und eine effiziente Projektentwicklung von entscheidender Bedeutung. Jeder Ordner und jede Datei hat eine bestimmte Rolle, von der Verwaltung von Abhängigkeiten und Konfigurationen bis hin zur Speicherung des Codes und der Ressourcen für Android- und iOS-Plattformen.