react-native-template-vife
Template para projetos em React Native, com Estrutura de Pastas customizada, Estilos Globais, ESLint + Prettier + Babel Plugin Root Import, React Navigation, Reactotron e Axios configurados.
Last updated a year ago by vinniciusgomes .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-template-vife 
SYNC missed versions from official npm registry.

npm npm GitHub issues GitHub last commit NPM


Logo

Tabela de Conteúdo

Sobre o Projeto

Este projeto visa a criação de um template que possa ser utilizado no momento de criação de projetos utilizando React Native, visto que o processo de instalação e configuração das libs no início de um projeto podem gerar certa complexidade e muitas vezes até erros que atrasam o processo, atrapalhando assim o fluxo de desenvolvimento.

Feito Com

Abaixo segue o que foi utilizado na criação deste template:

  • React Native - O React Native é um framework que permite o desenvolvimento de aplicações mobile usando Javascript e React;
  • React Navigation - O React Navigation surgiu da necessidade comunidade do React Native de uma navegação de forma fácil de se usar, e escrita toda em Javascript;
  • React Native Gesture Handler - API declarativa que permite a manipulação de toques e gestos no React Native;
  • Axios - O Axios é um cliente HTTP baseado em Promises para Browser e NodeJS;
  • 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;
  • 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);
  • Eslint - O ESLint é uma ferramenta de lint plugável para JavaScript e JSX;
  • 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;

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

Estrutura de Arquivos

A estrutura de arquivos está da seguinte maneira:

vife-template
├── src/
│   ├── config/
│   │   └── ReactotronConfig.js
│   ├── images/
│   ├── screens/
│   │   └── Main/
│   │       └── index.js
│   ├── services/
│   │   └── api.js
│   ├── index.js
│   └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md

Serão explicados os arquivos e diretórios na seção de Edição.

Instalação

  1. Para instalar e utilizar esse template o processo é bem simples, basta criar um projeto novo utilizando o comando:
react-native init meuApp --template vife
  1. Depois do projeto criado você pode deletar o arquivo App.js da raiz, pois o arquivo index.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

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 começe 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);
      }
    };
  }
}

Licença

Distribuído sob a licença MIT. Veja LICENSE para mais informações.

Contato

VIFE - Github - oi@vife.dev

Current Tags

  • 1.2.0                                ...           latest (a year ago)

11 Versions

  • 1.2.0                                ...           a year ago
  • 1.1.9                                ...           a year ago
  • 1.1.8                                ...           a year ago
  • 1.1.7                                ...           a year ago
  • 1.1.6                                ...           a year ago
  • 1.1.5                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 1
Last Month 11
Dependencies (653)
Dev Dependencies (0)
None
Dependents (1)

Copyright 2014 - 2016 © taobao.org |