Conceitos

O que é React Native?

• Versão do React para desenvolvimento mobile;
• Multiplataforma;
• Podemos manipular cada plataforma de forma diferente;
• Interface nativa;
• Código não é transpilado;
• Outras plataformas migrando, Microsoft com Windows;

Arquitetura

JS -> Metro Bundler (packager) -> Bundle -> Bridge -> Android/iOS

Sintaxe

• A declaração de componentes é igual ao web;
• Não usamos HTML e sim componentes próprios do RN;
• Aplicamos estilo sem classes ou ID's;
• Todo texto é <Text/>, não existe estilização própria;

Exemplo:

import { StyleSheet, View, Text, TouchableOpacity } from "react-native";

function Button() {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button}>
        <Text style={styles.text}>Enviar</Text>
      </TouchableOpacity>
    </View>
  );
}

Expo

O que é?

• SDK com um conjunto de funcionalidades prontas para usar (câmera, vídeo, integrações);
• Não é necessário configurar emulador;

Por que não utilizar?

• Limitação sobre o controle do código nativo;
• Várias bibliotecas não tem suporte para o Expo;
• O Expo liberou seu conjunto de ferramentas prontas para serem utilizadas com projetos que não o utilizam;

Instalações

• Preparação do Ambiente de Desenvolvimento
• Template Rocketseat React Native
• Expo

Instalação (Windows)

1. Instalar dependências

choco install -y nodejs.install python2 jdk8

2. Instalar globalmente o Cliente do React Native:

yarn global add react-native-cli

Inicializando um projeto

$ npx react-native init NomeDoApp

Rodando no emulador/celular

$ react-native run-android

Comandos úteis

Instalar o react-native

$ npm i -g react-native

Iniciar o projeto

$ react-native start

Rodar no dispositivo

$ react-native run-android

Resetar cache do celular

$ react-native start --reset-cache