spotthestation

Bienvenue sur le STSApp

Ce projet a été bootstrapal en utilisant Ignite CLI V8.4.2 (React Native V0.69.7).

Comprend actuellement:

• React natif
• Réagir la navigation
• Arbre d'État de Mobx
• Manuscrit
• Et plus!

Commencer

Condition préalable

Avant de pouvoir exécuter ce projet, vous devrez installer le logiciel suivant sur votre machine:

• Node.js (v16.x ou supérieur)
• fil (v1.x)
• React native CLI

Installation

1. Copiez un exemple de fichier env dans le répertoire de configuration:

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

2. Dans scripts/config/.env.staging Fichier, fournissez des valeurs pour les variables suivantes:
   • API_URL - URL de votre backend, par exemple: http: // localhost: 5000 /.
   • GOOGLE_API_TOKEN - Votre jeton API Google Maps. Apprenez à l'obtenir ici.
   • MAPBOX_API_TOKEN - Votre jeton de mapbox. Apprenez à l'obtenir ici.
   • Vous pouvez laisser d'autres variables inchangées
3. Exécuter le script config-env.sh

    ./scripts/config-env.sh staging
   

4. Créer un fichier .netrc dans votre répertoire domestique (pas le répertoire de projet) avec le contenu suivant:

    machine api.mapbox.com
   login mapbox
   password YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Remplacez YOUR_SECRET_MAPBOX_ACCESS_TOKEN par votre jeton de mapbox.
5. Modifier les autorisations de fichiers .netrc

    sudo chmod 0600 ~/.netrc
   

6. Créer un fichier .gradle/gradle.properties dans votre répertoire domestique (pas répertoire de projet) avec le contenu suivant:

    MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Remplacez YOUR_SECRET_MAPBOX_ACCESS_TOKEN par votre jeton de mapbox.
7. Exécutez npx @sentry/wizard@latest -s -i reactNative pour configurer Sentry. N'hésitez pas à rejeter les mises à jour et / ou l'installation de pods.
8. Installez les dépendances du projet:

    yarn install
   

Exécution sur l'appareil iOS

1. Ouvrez ios/STSApp.xcworkspace dans Xcode.
2. Accédez à l'onglet Signing & Capabilities .
3. Gérez Automatically manage signing .
4. Sélectionnez l'équipe de développement. Remarque: Parce que ce projet utilise des notifications push, les équipes de développement personnel ne fonctionneront pas.
5. Changer l'identifiant du bundle en toute valeur.
6. Cliquez sur Icône Démarrer pour créer et exécuter l'application sur votre appareil.

Exécution sur l'appareil Android

Exécutez la commande suivante:

 yarn android

Si la construction réussit, vous devrez peut-être ouvrir l'application manuellement sur votre appareil.

Structure du projet

La structure du projet Billerplate Ignite sera similaire à ceci:

 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 Directeur

Le répertoire app est inclus dans un projet Ignite Billerplate. Il s'agit d'un répertoire que vous devez normalement créer lors de l'utilisation de Vanilla React native.

L'intérieur du répertoire app ressemble à ce qui suit:

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

Composants C'est là que vivent vos composants réutilisables qui vous aident à construire vos écrans.

I18n C'est là que vos traductions vivront si vous utilisez react-native-i18n .

Modèles C'est là que les modèles de votre application vivront. Chaque modèle dispose d'un répertoire qui contiendra le fichier de modèle mobx-state-tree , le fichier de test et tout autre fichier de support comme des actions, des types, etc.

Navigateurs C'est là que vos navigateurs react-navigation vivront.

Écran C'est là que vos composants d'écran vivront. Un écran est un composant React qui prendra l'ensemble de l'écran et fera partie de la hiérarchie de navigation. Chaque écran aura un répertoire contenant le fichier .tsx , ainsi que des actifs ou d'autres fichiers d'assistance.

Services Tous les services qui interfacent avec le monde extérieur vivront ici (pensez aux API REST, aux notifications push, etc.).

Le thème vit ici le thème de votre application, y compris l'espacement, les couleurs et la typographie.

utilise c'est un endroit idéal pour mettre des aides et des services publics divers. Des choses comme les aides à la date, les formateurs, etc. se trouvent souvent ici. Cependant, il ne doit être utilisé que pour des choses qui sont vraiment partagées sur votre application. Si une aide ou un utilitaire n'est utilisé que par un composant ou un modèle spécifique, envisagez de colorer votre aide avec ce composant ou ce modèle.

app.tsx C'est le point d'entrée de votre application. C'est là que vous trouverez le composant d'application principal qui rend le reste de l'application.

./TEST RÉPERTOIRE

Ce répertoire contiendra vos configurations et maquettes en plaisantage.

Comment obtenir le jeton Mapbox?

1. Créez un compte Mapbox ici
2. Aller sur la page des jetons d'accès
3. Cliquez sur Create a token
4. Nommez votre jeton, cochez toutes les cases de portée publique, cochez les cases Secret Scopes suivantes:
   • Styles: télécharger
   • Téléchargements: lire
   • Vision: télécharger
   • Navigation: télécharger
5. Cliquez sur Create token et copiez votre jeton. Il devrait commencer par sk.