react native template

---

Reagierte native Vorlage

Dieses Projekt ist eine native React -Vorlage, die die Entwicklung beschleunigen soll, indem es wesentliche Merkmale wie das staatliche Management, die Internationalisierung, das Abholen von Daten, die Navigation und die wiederverwendbaren Komponenten bereitstellt.

Screenshots

Erstellt mit den Standardkomponenten im Projekt.

Willkommensbildschirm

Login -Bildschirm

Registrieren Sie Bildschirm

Profilbildschirm

Merkmale

• ? Internationalisierung (i18n)

  • Multisprachiger Unterstützung unter Verwendung von react-i18next für die nahtlose Lokalisierung.

• ? ️ Staatsmanagement mit Redux

  • Zentralisiertes staatliches Management für den effizienten globalen staatlichen Zugriff und Updates.

• ? Daten, die mit React -Abfrage abrufen

  • Optimierte Daten abrufen, zwischenstrichen und synchronisiert.

• ? Navigation

  • Glatte und intuitive Navigation mit react-navigation mit Basiskomponenten wie VStack und HStack .

• ⚛️ Komponentenbasierte Architektur

  • Modulares Design mit wiederverwendbaren UI -Komponenten und konsistentem Styling.

• ? Gemeinsame Dienstprogramme

  • Helferfunktionen und Dienstprogramme für optimierte Entwicklung.

• ? Axios Management

  • Konfigurierbare API-Anforderungen mit Axios mit integriertem Fehlerbehandlungen und Antwortmanagement.

• Websocket -Management

  • Echtzeit-Kommunikationsunterstützung mit WebSockets.

• ? Cookie -Management

  • Vereinfachtes Management von Cookies zur Authentifizierung und Benutzersitzungen.

• Authentifizierung

  • Benutzerauthentifizierung und Registrierung mit sicherem Token -Management.

Komponenten

Das Projekt enthält eine Reihe wiederverwendbarer Komponenten zum Erstellen von Benutzeroberflächen:

• Knopfkomponenten

  • button.tsx : Standard -Tastekomponente mit anpassbarem Styling.

• Typografiekomponenten

  • h1.tsx , h2.tsx : Überschriftenkomponenten für eine konsistente Typografie.
  • text.tsx : Anpassbare Textkomponente zum Anzeigen von Inhalten.

• Eingangskomponenten

  • input.tsx : Grundlegende Eingangsfeldkomponente.
  • input-with-icon.tsx : Eingabefeld mit einem Symbol für eine erweiterte Benutzerinteraktion.

• Layoutkomponenten

  • vstack.tsx : Vertikales Stapel -Layout zum vertikalen Anordnen von Elementen.
  • hstack.tsx : Horizontales Stapel -Layout zum horizontalen Anordnen von Elementen.
  • spacer.tsx : Spacer -Komponente zum Hinzufügen flexibler Raum zwischen den Elementen.

• Navigationskomponenten

  • navbar.tsx : Anpassbare Navigationsleiste für App Header.

• Bildkomponenten

  • image.tsx : Bildkomponente zum Anzeigen von Bildern mit Unterstützung von Caching.

• Dienstprogrammkomponenten

  • separator.tsx : Teilerkomponente zum Trennen des Inhalts.
  • separator-with-text.tsx : Teiler mit Text für eine erweiterte Benutzeroberfläche.
  • switch.tsx : Schalterkomponente für Boolesche Eingänge.

• Indexdatei

  • index.ts : Zentrale Exportdatei für Komponenten.

Erste Schritte

Voraussetzungen

Stellen Sie sicher, dass Sie die folgenden Installation haben:

• Node.js (v14 oder höher)
• Garn
• Android Studio / Xcode für Android / iOS -Entwicklung

Installation

1. Klonen Sie das Repository:

   git clone [email protected]:ToniDarodda/react-native-template.git
   cd ReactNativeTemplate

2. Abhängigkeiten installieren:

   yarn install

3. Umgebungsvariablen konfigurieren:

   Aktualisieren Sie die .env -Datei im Stammverzeichnis mit Ihren Konfigurationseinstellungen:

   API_URL= ' https://your-api-url.com '
   SOCKET_URL= ' https://your-socket-url.com '

Ausführen der Anwendung

1. Starten Sie den Metro -Bundler:

   yarn start

2. Führen Sie die Anwendung auf Android aus:

   yarn android

3. Führen Sie die Anwendung auf iOS aus:

   yarn ios

4. Zugriff auf die Anwendung:

   Die App ist auf Ihrem Emulator oder Gerät verfügbar.

? Testen

Verwenden Sie zum Ausführen der Tests den folgenden Befehl:

yarn test 

Skripte

• ? Formatcode mit hübscherem: yarn format
• ? ‍Eitung, starten Sie die Anwendung: yarn start
• ? ‍ Beginnen Sie im Entwicklungsmodus: yarn android oder yarn ios
• ? FININT den Code mit Eslint: yarn lint
• ? Führen Sie die Tests aus: yarn test
• Durchführen von End-to-End-Tests: yarn test:e2e

Lizenz

Es gibt keine Lizenz; Sie können es frei verwenden.

? Autor

Toni da Rodda

Ikonen

• Einsatz
• Konfiguration
• ? Dokumentation
• ? Wartung
• Sicherheit
• ? E -Mail -Integration
• ? Leistungsoptimierung
• ⚡ Zeit gewinnen

---

Fühlen Sie sich frei, zu diesem Projekt beizutragen, indem Sie Probleme einreichen oder Anfragen ziehen.

Für Fragen oder Unterstützung wenden Sie sich bitte an Toni da Rodda.

---