spotthestation

Willkommen im STSApp

Dieses Projekt wurde unter Verwendung von Ignite CLI V8.4.2 (React Native V0.69.7) strapaiert.

Derzeit beinhaltet:

• Reagieren Sie nativ
• Navigation reagieren
• Mobx State Tree
• Typoskript
• Und noch mehr!

Erste Schritte

Voraussetzungen

Bevor Sie dieses Projekt ausführen können, müssen die folgende Software auf Ihrem Computer installiert werden:

• Node.js (v16.x oder höher)
• Garn (v1.x)
• Reagieren Sie einheimische CLI

Installation

1. Kopieren Sie die Beispiel -Env -Datei in das Konfigurationsverzeichnis:

    cp .env.example scripts/config/.env.staging
   

2. Geben Sie in scripts/config/.env.staging -Datei Werte für die folgenden Variablen an:
   • API_URL - URL Ihres Backends, zum Beispiel: http: // localhost: 5000/.
   • GOOGLE_API_TOKEN - Ihr Google Maps API -Token. Erfahren Sie, wie Sie es hier erhalten.
   • MAPBOX_API_TOKEN - Ihr Mapbox -Token. Erfahren Sie, wie Sie es hier erhalten.
   • Sie können andere Variablen unverändert lassen
3. Führen Sie das Skript config-env.sh aus

    ./scripts/config-env.sh staging
   

4. Erstellen Sie .netrc -Datei in Ihrem Home -Verzeichnis (nicht Projektverzeichnis) mit dem folgenden Inhalt:

    machine api.mapbox.com
   login mapbox
   password YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Ersetzen Sie YOUR_SECRET_MAPBOX_ACCESS_TOKEN durch Ihr Mapbox -Token.
5. Ändern Sie .netrc -Dateiberechtigungen

    sudo chmod 0600 ~/.netrc
   

6. Create .gradle/gradle.properties -Datei in Ihrem Heimverzeichnis (nicht Projektverzeichnis) mit folgenden Inhalten:

    MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Ersetzen Sie YOUR_SECRET_MAPBOX_ACCESS_TOKEN durch Ihr Mapbox -Token.
7. Führen Sie npx @sentry/wizard@latest -s -i reactNative auf Sentry ein. Fühlen Sie sich frei, Updates und/oder Installation von Pods abzulehnen.
8. Projektabhängigkeiten installieren:

    yarn install
   

Laufen auf iOS -Gerät

1. Öffnen Sie ios/STSApp.xcworkspace in Xcode.
2. Gehen Sie zur Registerkarte Signing & Capabilities .
3. Ticken Sie Automatically manage signing .
4. Entwicklungsteam auswählen. Hinweis: Da dieses Projekt Push -Benachrichtigungen verwendet, funktionieren persönliche Entwicklungsteams nicht.
5. Ändern Sie die Bündelkennung in einen beliebigen Wert.
6. Klicken Sie auf Startsymbol, um die App auf Ihrem Gerät zu erstellen und auszuführen.

Ausführen auf Android -Gerät

Führen Sie den folgenden Befehl aus:

 yarn android

Wenn Build erfolgreich ist, müssen Sie die App möglicherweise manuell auf Ihrem Gerät öffnen.

Projektstruktur

Die Struktur des Ignite Boilerplate -Projekts sieht folgt ähnlich aus:

 ignite-project
├── app
│   ├── components
│   ├── config
│   ├── i18n
│   ├── models
│   ├── navigators
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
├── test
│   ├── __snapshots__
│   ├── mockFile.ts
│   ├── setup.ts
├── README.md
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   └── settings.gradle
├── index.js
├── ios
│   ├── IgniteProject
│   ├── IgniteProject-tvOS
│   ├── IgniteProject-tvOSTests
│   ├── IgniteProject.xcodeproj
│   └── IgniteProjectTests
├── .env
└── package.json

./App -Verzeichnis

In einem Ignite Boilerplate -Projekt enthalten ist das app -Verzeichnis. Dies ist ein Verzeichnis, das Sie normalerweise bei der Verwendung von Vanilla React Native erstellen müssen.

Das Innere des app -Verzeichnisses ähnelt wie folgt:

 app
├── components
├── config
├── i18n
├── models
├── navigators
├── screens
├── services
├── theme
├── utils
├── app.tsx

Komponenten Hier leben Ihre wiederverwendbaren Komponenten, mit denen Sie Ihre Bildschirme erstellen können.

I18N Hier leben Ihre Übersetzungen, wenn Sie react-native-i18n verwenden.

Models hier leben die Modelle Ihrer App. Jedes Modell verfügt über ein Verzeichnis, das die Modelldatei der mobx-state-tree , die Testdatei und alle anderen unterstützenden Dateien wie Aktionen, Typen usw. enthält.

Navigatoren Hier leben Ihre react-navigation .

Bildschirme Hier werden Ihre Bildschirmkomponenten leben. Ein Bildschirm ist eine React -Komponente, die den gesamten Bildschirm aufnimmt und Teil der Navigationshierarchie ist. In jedem Bildschirm verfügt ein Verzeichnis mit der .tsx -Datei zusammen mit Vermögenswerten oder anderen Helferdateien.

Dienste alle Dienste, die mit der Außenwelt eine Verbindung stehen, werden hier leben (denken Sie an REST -APIs, Push -Benachrichtigungen usw.).

Das Thema hier lebt das Thema für Ihre Anwendung, einschließlich Abstand, Farben und Typografie.

Utils Dies ist ein großartiger Ort, um verschiedene Helfer und Versorgungsunternehmen zu setzen. Dinge wie Datumshelfer, Formatter usw. werden hier oft gefunden. Es sollte jedoch nur für Dinge verwendet werden, die in Ihrer Bewerbung wirklich geteilt werden. Wenn ein Helfer oder Dienstprogramm nur von einer bestimmten Komponente oder einem bestimmten Modell verwendet wird, sollten Sie Ihren Helfer mit dieser Komponente oder diesem Modell zusammenstellen.

app.tsx Dies ist der Einstiegspunkt zu Ihrer App. Hier finden Sie die Haupt -App -Komponente, die den Rest der Anwendung rendert.

./Test Directory

Dieses Verzeichnis hält Ihre Scherzkonfigurationen und Mocks.

Wie bekomme ich Mapbox -Token?

1. Erstellen Sie hier ein Mapbox -Konto
2. Gehen Sie zur Seite zu Access Tokens
3. Klicken Sie auf Create a token
4. Nennen Sie Ihr Token, ticken Sie alle Public Scopes -Kontrollkästchen an und ticken Sie die folgenden Kontrollkästchen für geheime Scopes an:
   • Stile: Download
   • Downloads: Lesen
   • Vision: Download
   • Navigation: Download
5. Klicken Sie auf Create token und kopieren Sie Ihr Token. Es sollte mit sk.