spotthestation

Bienvenido al stsapp

Este proyecto se inició con Ignite CLI V8.4.2 (React Native V0.69.7).

Actualmente incluye:

• Reaccionar nativo
• Reaccionar navegación
• Árbol de estado mobx
• Mecanografiado
• ¡Y más!

Empezando

Requisitos previos

Antes de poder ejecutar este proyecto, deberá tener el siguiente software instalado en su máquina:

• Node.js (v16.x o superior)
• hilo (v1.x)
• React CLI nativo

Instalación

1. Copiar el archivo ENV de muestra en el directorio de configuración:

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

2. En el archivo scripts/config/.env.staging , proporcione valores para las siguientes variables:
   • API_URL - URL de su backend, por ejemplo: http: // localhost: 5000/.
   • GOOGLE_API_TOKEN : su token API de Google Maps. Aprenda a obtenerlo aquí.
   • MAPBOX_API_TOKEN - Su token de mapbox. Aprenda a obtenerlo aquí.
   • Puedes dejar otras variables sin cambios
3. Ejecutar el script config-env.sh

    ./scripts/config-env.sh staging
   

4. Crear archivo .netrc en su directorio de inicio (no directorio de proyectos) con el siguiente contenido:

    machine api.mapbox.com
   login mapbox
   password YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Reemplace YOUR_SECRET_MAPBOX_ACCESS_TOKEN con su token de mapbox.
5. Cambiar los permisos de archivo .netrc

    sudo chmod 0600 ~/.netrc
   

6. Crear archivo .gradle/gradle.properties en su directorio de inicio (no directorio de proyectos) con el siguiente contenido:

    MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Reemplace YOUR_SECRET_MAPBOX_ACCESS_TOKEN con su token de mapbox.
7. Ejecute npx @sentry/wizard@latest -s -i reactNative para configurar centinry. Siéntase libre de rechazar actualizaciones y/o la instalación de POD.
8. Instalar dependencias del proyecto:

    yarn install
   

Ejecutando en el dispositivo iOS

1. Abra ios/STSApp.xcworkspace en xcode.
2. Vaya a la pestaña Signing & Capabilities .
3. Marque Automatically manage signing .
4. Seleccione el equipo de desarrollo. Nota: Debido a que este proyecto utiliza notificaciones push, los equipos de desarrollo personal no funcionarán.
5. Cambiar el identificador de paquete a cualquier valor.
6. Haga clic en Iniciar el icono para construir y ejecutar la aplicación en su dispositivo.

Ejecutando en el dispositivo Android

Ejecute el siguiente comando:

 yarn android

Si la compilación tiene éxito, es posible que deba abrir la aplicación manualmente en su dispositivo.

Estructura de proyectos

La estructura del proyecto Ignite Boilerplate se verá similar a esto:

 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

directorio ./App

Se incluye en un proyecto de Boilerplate de Ignite el directorio app . Este es un directorio que normalmente tendría que crear al usar Vanilla React Native.

El interior del directorio app se ve similar al siguiente:

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

Componentes Aquí es donde viven sus componentes reutilizables que lo ayudan a construir sus pantallas.

i18n Aquí es donde vivirán sus traducciones si está utilizando react-native-i18n .

Modelos de aquí es donde vivirán los modelos de su aplicación. Cada modelo tiene un directorio que contendrá el archivo del modelo mobx-state-tree , el archivo de prueba y cualquier otro archivo de soporte como acciones, tipos, etc.

Navegadores Aquí es donde vivirán sus navegadores react-navigation .

pantallas Aquí es donde vivirán los componentes de su pantalla. Una pantalla es un componente React que ocupará toda la pantalla y será parte de la jerarquía de navegación. Cada pantalla tendrá un directorio que contiene el archivo .tsx , junto con cualquier activo u otros archivos de ayuda.

Servicios de cualquier servicio que interactúe con el mundo exterior vivirá aquí (piense en API REST, notificaciones de push, etc.).

El tema aquí vive el tema de su aplicación, incluido el espacio, los colores y la tipografía.

Utils Este es un gran lugar para poner a varios ayudantes y servicios públicos. A menudo se encuentran cosas como ayudantes de citas, formateros, etc. Sin embargo, solo debe usarse para cosas que realmente se comparten en su aplicación. Si un componente o modelo específico usa un ayudante o utilidad, considere conjuntar su ayudante con ese componente o modelo.

App.tsx Este es el punto de entrada a su aplicación. Aquí es donde encontrará el componente de la aplicación principal que representa el resto de la aplicación.

directorio ./test

Este directorio sostendrá sus configuraciones y simulacros de broma.

¿Cómo obtener el token de mapbox?

1. Crea una cuenta de mapbox aquí
2. Vaya a la página de tokens de acceso
3. Haga clic en Create a token
4. Nombra tu token, marque todas las casillas de verificación Public Scopes, marque las siguientes casillas de verificación Secret Scopes:
   • estilos: descargar
   • Descargas: Leer
   • Visión: Descargar
   • Navegación: descargar
5. Haga clic en Create token y copiar su token. Debería comenzar con sk.