spotthestation

Bem -vindo ao STSAPP

Este projeto foi inicializado usando o IGNITE CLI V8.4.2 (React nativo v0.69.7).

Atualmente inclui:

• Reagir nativo
• Navegação reagida
• Árvore do Estado Mobx
• TypeScript
• E mais!

Começando

Pré -requisitos

Antes de executar este projeto, você precisará instalar o seguinte software em sua máquina:

• Node.js (v16.x ou superior)
• Fio (v1.x)
• Reaja a CLI nativa

Instalação

1. Copie o arquivo Env para o diretório de configuração:

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

2. No arquivo scripts/config/.env.staging , forneça valores para as seguintes variáveis:
   • API_URL - URL do seu back -end, por exemplo: http: // localhost: 5000/.
   • GOOGLE_API_TOKEN - seu token da API do Google Maps. Aprenda a obtê -lo aqui.
   • MAPBOX_API_TOKEN - seu token do mapbox. Aprenda a obtê -lo aqui.
   • Você pode deixar outras variáveis ​​inalteradas
3. Execute o script config-env.sh

    ./scripts/config-env.sh staging
   

4. Crie o arquivo .netrc no seu diretório inicial (não diretório de projeto) com o seguinte conteúdo:

    machine api.mapbox.com
   login mapbox
   password YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Substitua YOUR_SECRET_MAPBOX_ACCESS_TOKEN pelo seu token MapBox.
5. Alterar permissões de arquivo .netrc

    sudo chmod 0600 ~/.netrc
   

6. Criar arquivo .gradle/gradle.properties em seu diretório inicial (não diretório de projeto) com o seguinte conteúdo:

    MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Substitua YOUR_SECRET_MAPBOX_ACCESS_TOKEN pelo seu token MapBox.
7. Execute npx @sentry/wizard@latest -s -i reactNative para configurar a Sentry. Sinta -se à vontade para rejeitar atualizações e/ou instalação de pods.
8. Instale as dependências do projeto:

    yarn install
   

Executando no dispositivo iOS

1. Abra ios/STSApp.xcworkspace no xcode.
2. Vá para a guia Signing & Capabilities .
3. Tick Automatically manage signing .
4. Selecione a equipe de desenvolvimento. Nota: Como este projeto usa notificações push, as equipes de desenvolvimento pessoal não funcionarão.
5. Altere o identificador de pacote para qualquer valor.
6. Clique em Iniciar o ícone para criar e executar o aplicativo no seu dispositivo.

Executando no dispositivo Android

Execute o seguinte comando:

 yarn android

Se a construção for bem -sucedida, pode ser necessário abrir o aplicativo manualmente no seu dispositivo.

Estrutura do projeto

A estrutura do Projeto Ignite Boilerplate Project será parecida com isso:

 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 Directory

Incluído em um projeto Ignite Boilerplate está o diretório app . Este é um diretório que você normalmente teria que criar ao usar o Native React.

O interior do diretório app se parece com o seguinte:

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

Componentes é aqui que seus componentes reutilizáveis ​​vivem, o que o ajuda a criar suas telas.

I18N É aqui que suas traduções viverão se você estiver usando react-native-i18n .

Modelos é aqui que os modelos do seu aplicativo viverão. Cada modelo possui um diretório que conterá o arquivo de modelo mobx-state-tree , o arquivo de teste e quaisquer outros arquivos de suporte, como ações, tipos, etc.

Navegadores é aqui que seus navegadores react-navigation viverão.

Telas é aqui que seus componentes de tela viverão. Uma tela é um componente React que ocupará toda a tela e fará parte da hierarquia de navegação. Cada tela terá um diretório que contém o arquivo .tsx , juntamente com qualquer ativo ou outros arquivos auxiliares.

Serviços todos os serviços que interagem com o mundo exterior moram aqui (pense em APIs de descanso, notificações push etc.).

O tema aqui vive o tema do seu aplicativo, incluindo espaçamento, cores e tipografia.

UTILS Este é um ótimo lugar para colocar diversos ajudantes e serviços públicos. Coisas como ajudantes de data, formates etc. são frequentemente encontradas aqui. No entanto, ele deve ser usado apenas para coisas que são realmente compartilhadas em seu aplicativo. Se um ajudante ou utilidade for usado apenas por um componente ou modelo específico, considere co-localizar seu ajudante com esse componente ou modelo.

App.tsx Este é o ponto de entrada para o seu aplicativo. É aqui que você encontrará o componente principal do aplicativo que renderiza o restante do aplicativo.

./Test Directory

Este diretório manterá suas configurações e zombares de brincadeira.

Como obter o token do MapBox?

1. Crie uma conta MapBox aqui
2. Vá para acessar a página de tokens
3. Clique em Create a token
4. Nomeie o seu token, marque todas as caixas de seleção de escopos públicos, marque as seguintes caixas de seleção Secret Scopes:
   • Estilos: Download
   • Downloads: Leia
   • Visão: Download
   • Navegação: download
5. Clique em Create token e copiar seu token. Deve começar com sk.