react-native-template-base-mobile
v0.0.1
Published
<h3 align="center">Template Mobile Basic MS</h3> </p>
Downloads
4
Readme
Tabela de Conteúdo
Sobre o Projeto
Este template tem por objetivo a criação de bases utilizando o React Native para facilitar o processo de desenvolvimento de criação de Apps ou afins ao gerar uma base inicial, possuindo algumas bibliotecas incluidas.
Bibliotecas Incluidas
Lista de bibliotecas incluídas neste template:
React Native - React Native é uma biblioteca Javascript criada pelo Facebook. Usado para criar aplicaçõs mobile Android e iOS de forma nativa.
React Navigation - O React Navigation é composto de alguns utilitários principais e esses são usados pelos navegadores para criar a estrutura de navegação em seu aplicativo.
React Native Gesture Handler - O React Native Gesture Handler fornece APIs de gerenciamento de gestos nativas para criar as melhores experiências possíveis com base no toque no React Native.
React Native Async Storage - AsyncStorage é um sistema de armazenamento de valor-chave não criptografado, assíncrono, persistente e global para o aplicativo. Deve ser usado em vez de LocalStorage.
React Native GeoLocation - É uma API de geolocalização estende as especificações da web de geolocalização, é necessário usar o pacote de permissões para autorização da coleta da localização.
React Native Permissions - Uma API de permissões unificada para React Native no iOS, Android e Windows.
React Native Masked View - fornece uma visualização mascarada que exibe apenas os pixels que se sobrepõem à visualização renderizada em seu elemento de máscara.
React Native Reanimated - React Native Reanimated fornece uma abstração de baixo nível mais abrangente para a API da biblioteca Animated ser construída e, portanto, permite uma flexibilidade muito maior, especialmente quando se trata de interações baseadas em gestos.
React Native Screens - Este projeto tem como objetivo expor componentes de contêiner de navegação nativa para React Native.
React Native Safe Area Context - Uma forma flexível de lidar com área segura, também funciona no Android e na Web!
React Native Swiper - Permite que você crie componentes que habilite função de deslizar(arrastar para o lado).
Axios - Cliente HTTP baseado em promessa para o Navegador e Node.js
Prop Types - Verificação de tipo em tempo de execução para propriedades (props) React e objetos semelhantes;
Reactotron - O Reactotron é um app Desktop para inspecionar projetos em React ou React Native. Está disponível para macOS, Linux e Windows;
- reactotron-react-native - Plugin para configurar o Reactotron para se conectar ao projeto React Native;
Babel - O Babel é um compilador JavaScript gratuito e de código aberto e transpiler configurável usado no desenvolvimento de aplicações JavaScript;
- babel-eslint - Este pacote é um wrapper do parser do Babel para o ESLint;
- babel-plugin-root-import - Esse plugin do Babel permite que sejam feitos imports e requires em caminhos baseados em uma raiz(root);
- babel-plugin-transform-remove-console - Esse plugin do Babel remove todos os console.* da sua aplicação (Dica no site oficial do RN);
ESLint - O ESLint é uma ferramenta de lint plugável para JavaScript e JSX;
- eslint-config-airbnb - Este pacote fornece o .eslintrc do Airbnb como uma configuração compartilhada extensível;
- eslint-plugin-import - Plugin do ESLint com regras para ajudar na validação de imports;
- eslint-plugin-jsx-a11y - Verificador estático AST das regras do a11y em elementos JSX;
- eslint-plugin-react - Regras de linting do ESLint específicas do React;
- eslint-plugin-react-native - Regras de linting do ESLint específicas do React Native;
- eslint-import-resolver-babel-plugin-root-import - Um resolver da lib babel-root-import para a lib eslint-plugin-import;
Prettier - O Prettier atualiza seu código automaticamente seguindo os padrões que você quiser toda vez salva o arquivo;
- eslint-plugin-prettier - Roda o Prettier como uma regra do ESLint;
- eslint-config-prettier - Desativa todas as regras que são desnecessárias ou que podem dar conflito com o Prettier;
EditorConfig - O EditorConfig é um formatador de arquivos e coleções em forma de Plugin para Editores de código/texto com o objetivo de manter um padrão de código consistente entre diferentes editores, IDE's ou ambientes;
StyledComponents - styled-components é o resultado de questionarmos como poderíamos aprimorar CSS para estilizar sistemas de componentes React.
Começando
Para conseguir utilizar o template, seja através do React Native CLI ou com uma cópia local dos arquivos, siga os passos abaixo.
Pré-requisitos
Antes de seguirmos para as configurações e uso do template, é ideal que você tenha o ambiente configurado para criar e testar aplicativos em React Native, para isso você pode seguir o guia do link abaixo:
Ambiente React Native (Android/iOS)
Estrutura de Arquivos
A estrutura de arquivos está da seguinte maneira:
template-mobile-basic-dev
├── routes/api.js
├── src/
│ ├── assets/
│ │ ├── icons
│ │ └── images/
│ │ └── BackgroundNoite.js
│ ├── components/
│ │ └── Home.js
│ │ └── styles.js
│ ├── config/
│ │ └── ReactotronConfig.js
│ ├── pages/
│ │ └── Main/
│ │ └── index.js
│ ├── router/
│ │ └── index.js
│ ├── app.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.json
├── LICENSE
├── metro.config.js
├── package.json
└── README.md
Serão explicados os arquivos e diretórios na seção de Edição.
Instalação
- Para instalar e utilizar esse template o processo é bem simples, basta criar um projeto novo utilizando o comando:
react-native init AwesomeExample --template react-native-template-mobile-basic-dev
- Depois do projeto criado você pode deletar o arquivo
App.js
da raiz, pois o arquivoindex.js
agora aponta para a pasta src.
Com isso o projeto será criado com todas as dependências do template devidamente instaladas e linkadas, tal como os arquivos de configuração que são copiados para o projeto.
Passo Adicional no Android
Verifique na pasta android o arquivo local.properties
e indique o caminho da pasta Sdk
Exemplo: sdk.dir = /home/username/Android/Sdk
Para que os gestos sejam habilitados no Android é necessário um passo a mais, que é bem simples, abra o arquivo android/app/src/main/java/<pacote_do_projeto>/MainActivity.java
, e comece importando os pacotes como abaixo:
// ...
import com.facebook.react.ReactActivity;
// Importações adicionadas
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
Feito a importação vamos criar um método novo, logo abaixo do getMainComponentName()
, ficando:
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() { ... }
// Método adicionado
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
Edição
Nesta seção haverão instruções caso você queira editar o template, explicando para que os diretórios são utilizados e também os arquivos de configuração.
routes - Diretório onde serão criados os arquivos relacionados a serviços utilizados na aplicação, por exemplo, requisições HTTP, autenticação com Firebase ou qualquer outro serviço que for utilizado;
- api.js - Arquivo com a configuração da biblioteca Axios para envio de requisições HTTP, o endereço que vem configurado por padrão é para a API do Github;
src - Diretório contendo todos os arquivos da aplicação, é criado um diretório
src
para que o código da aplicação possa ser isolado em um diretório e facilmente portado para outros projetos, se necessário;assets - Diretório para criar pastas e armazenar imagens que possam ser utilizadas pela aplicação, é possivel guardar todo tipo de arquivo não apenas imagens.
icons - Diretório que será reservado para importação de icones como por exemplo (nome-do-icone.svg) em geral para utilização no projeto
images - Esse é o diretório que será propriamente reservado para guardar imagens para a utilização no projeto
config - Diretório para guardar os arquivos de configuração da aplicação, por exemplo, a configuração de uso do Reactotron e configuração de inicialização do Firebase;
- ReactotronConfig.js - Arquivo contendo a configuração do Reactotron para ser usado na aplicação;
pages - Diretório onde ficam as páginas (telas) da aplicação, como forma de padronização e boas práticas toda página fica dentro de um diretório com seu nome;
Main - Diretório exemplo de uma página cujo nome é Main, por padrão foi adotado usar sempre como nome do diretório o nome da página em camelCase, dentro desse diretório é necessária a criação ao menos do arquivo
index.js
;- index.js - Arquivo com toda a lógica da página, tal como os componentes visuais a serem renderizados;
router - Este diretório é responsavel por criar as rotas entre componentes da pasta
pages
, é ele que chama oindex.js
doMain
para a exibição dos componentes, dentro desse diretório é necessária a criação ao menos do arquivoindex.js
;- index.js - Arquivo com toda a lógica da página, tal como os componentes visuais a serem renderizados;
app.js - Arquivo responsável por centralizar o código do diretório
src
, nele são chamadas as rotas tal como qualquer outra configuração que precise ser executada na inicialização da aplicação, ele é como um Entry Point do diretóriosrc
;.editorconfig - Arquivo destinado à configuração do plugin Editor Config, que padroniza algumas configurações para o editor em diferentes ambientes;
.eslintrc.json - Arquivo de configuração do ESLint, é nele que são inseridas as regras e configurações de Linting do projeto, tal como a configuração do Resolver para o Babel Plugin Root Import e configuração da variável global
__DEV__
;babel.config.js - Arquivo de configuração do Babel, é nele que é configurado o Babel Plugin Root Import para aceitar imports absolutos na aplicação usando o diretório
src
como raiz;dependencies.json - Arquivo contendo apenas um objeto com a lista de dependências que devem ser instaladas na aplicação, vale lembrar que as dependências que já vem por padrão no projeto como
react
ereact-native
não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;devDependencies.json - Arquivo contendo apenas um objeto com a lista de dependências de desenvolvimento que devem ser instaladas na aplicação, vale lembrar que as dependências de desenvolvimento que já vem por padrão no projeto como
@babel/core
,@babel/runtime
, entre outras, não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;index.js - Arquivo raiz da aplicação, também chamado de Entry Point, é o primeiro arquivo chamado no momento do build e execução da aplicação, nele é chamado o arquivo
src/index.js
que por sua vez chama as rotas da aplicação;jsconfig.json - Arquivo de configuração do JavaScript no Editor, ele é o responsável por ativar o Auto Complete de códigos JavaScript na aplicação;
package.json - Diferente dos projetos comuns, esse arquivo tem as configurações necessárias para a publicação do Template no NPM, para saber mais sobre isso veja a seção abaixo.
Publicação
Para publicar um template como esse, o processo é bastante simples e rápido.
Crie uma conta no site do NPM;
Com a conta criada execute o comando abaixo e insira suas credenciais;
npm login
Basta abrir o arquivo
package.json
e modificar as informações de acordo com o seu template, mas as informações mais importantes são duas, oname
e oversion
, que são os únicos que tem restrições, seguem abaixo as restrições:- O
name
sempre deve começar com o prefixoreact-native-template-
seguido do nome do seu template; - O template deve ser publicado em uma conta pessoal, pois quando publicado em uma Organization é acrescentado o prefixo
@<nome_da_organization>
no nome do pacote; - O
name
deve ser único, não podendo ser igual ao de um template já publicado; - A
version
deve ser atualizada a cada publicação, se o template está na versão 0.0.1 e é preciso publicar uma atualização no mesmo, aversion
deve ser diferente e superior a versão atual, por exemplo, 0.0.2;
- O
Após configurar corretamente o
package.json
basta executar no terminal/prompt o comandonpm publish
;Com a publicação finalizada o template deve ficar disponível através do link
https://www.npmjs.com/package/react-native-template-<nome_do_template>
.
Licença
Distribuído sob a licença MIT. Veja LICENSE
para mais informações.
Contato
MS Web Developer - Site - [email protected]