Codelab - React Native

Última atualização: 06/09/2022

React Native é um dos frameworks de desenvolvimento de aplicativos móveis mais populares projetada e desenvolvida pelo Facebook. O Facebook abriu sua base de código em 2015. Permite desenvolver um único código que roda nas duas plataformas que existem: Android e iOS.

O que você vai fazer

Preparar o ambiente de desenvolvimento Expo
Criar uma aplicação de e-commerce simples com uma tela de produtos, tela de detalhe e carrinho de compras

O que você vai aprender

Estrutura de uma aplicação React Native
Componentes funcionais
Hooks
Estilização
Layout com flexbox
Componentes fundamentais: View, Text e Image
Navegação entre telas (stack navigation)
Contexto

O que você precisa

VS Code

Referências

Instalação do Node.js e Expo

Baixe o instalador direto do site site oficial. Após a instalação, você poderá verificar a instalação com o comando:

node -v

Depois de instalar o node, precisamos instalar Expo CLI:

npm install --global expo-cli

Para executar a aplicação no celular é necessário instalar o app Expo na Google Play ou na App Store.

Na linha de comando crie uma pasta chamada projetos: e dentro desta pasta execute o comando npx abaixo:

npx create-expo-app app-rn1

Após o download e instalação das dependências, digite:

cd app-rn1
code .

Depois de abrir o VSCode você verá a estrutura de pastas e arquivos do projeto criado, como mostrado abaixo:

Crie as seguintes pastas para conter o código da aplicação:

1 - Criar a pasta /src na raiz da aplicação

2 - Criar as pastas /components, /screens e /services dentro da pasta /src

Para executar o app em seu celular temos duas situações:

Quando seu computador e seu celular estiverem na mesma rede digite o comando na pasta raiz da aplicação:

npx expo start

Quando seu computador e seu celular estiverem em redes separadas:

npm install -g @expo/ngrok@4.1.0
npx expo start --tunnel

Abra no seu celular o app Expo Go e escaneie o QR-Code que aparece na janela de comandos depois que você executou o comando acima.

Conheça os componentes básicos

Início do desenvolvimento
Apresentação de informações de um determinado dado
Componente criado

Customizando o componente

Antes de falarmos da customização do componente, uma palavrinha sobre o mecanismo de importação de módulo/componente.

Temos duas maneiras de exportar um módulo de um arquivo:

exportação nomeada
exportação padrão

Exportação nomeada

Com exportações nomeadas, pode-se ter várias exportações nomeadas por arquivo. Em seguida, importe as exportações específicas que desejar entre chaves. O nome do módulo importado deve ser igual ao nome do módulo exportado.

Exemplos de exportação:

// Arquivo Componentes.js 
export const Componente1 = () => {}
export const Componente2 = () => {}

// Importando um único componente
import { Componente1 } from "./Componentes";

// Importing múltiplos componentes
import { Componente1, Componenet2 } from "./Componentes";

// Renomeando o componente importado
import { Componente2 as Comp2 } from "./Componentes";

// Importando todos os componentes
// Uso: Comp.Componente1 e Comp.Componente2
import * as Comp from "./Componentes";

Exportação Default

Pode-se ter apenas uma exportação padrão por arquivo. Quando importamos, temos que especificar um nome que pode ser diferente do nome exportado.

Exemplo de exportação default:

// export
const NovoComponente = () => {}
export default NovoComponente;

// import sem mudar o nome 
import NovoComponente from "./NovoComponente";

// import renomeando o componente 
import Comp from "./NovoComponente";

Referência

Props

Vamos customizar o nosso componente recém criado. Podemos perceber as informações que podem ser utilizadas para customizar o componente: a imagem a ser exibida e os textos: titulo, descrição e informações. A função Card pode receber um parâmetro que representa as propriedades (conhecido como Props, abreviação de "properties") do componente. (React Native Guides - Fundamentals - Props).

Devemos passar os valores para a customização do componente como o exemplo a seguir:

<Card
    imagem={imagem1}
    titulo={"Título"}
    descrição={"Descrição"}
    informações={"demais informações sobre o item/produto"}
/>

O componente possui as seguintes propriedades: imagem, titulo, descrição e informações.

Podemos usar duas notações para receber as propriedades pelo componente:

Recebendo o objeto Props

Observe no código abaixo o parâmetro props sendo recebido como um objeto e seu uso com a notação ponto (props.imagem por exemplos) para acessar os valores individuais de props.

const Card = (props) => {
  return (
    <View style={styles.seção}>
      <Image style={styles.imagem} source={props.imagem} />
      <View style={styles.texto}>
        <Text>{props.titulo}</Text>
        <Text>{props.descrição}</Text>
        <Text>{props.informações}</Text>
      </View>
    </View>
  );
};

Desestruturação de parâmetros

Observe a existência dos colchetes que contêm a lista de parâmetros que o componente recebe. Esta forma é nomeada desestruturação de objetos.

const Card = ({ imagem, titulo, descrição, informações }) => {
  return (
    <View style={styles.seção}>
      <Image style={styles.imagem} source={imagem} />
      <View style={styles.texto}>
        <Text>{titulo}</Text>
        <Text>{descrição}</Text>
        <Text>{informações}</Text>
      </View>
    </View>
  );
};

O componente básico do React Native deve ser usado quando temos uma lista de objetos a serem consumidos para exibição dos valores.

Vamos simular um repositório de dados através de um arquivo mock:

const itemList = [
  {
    id: 1,
    titulo: "Aspirador de pó",
    descricao:
      "Aspirador de Pó Vertical e Portátil de Mão 2 em 1 WAP HIGH SPEED 1000W 1,2 litros Filtro HEPA 127V",
    valor: 150.99,
    imagem: require("../../assets/products/aspirador.jpg"),
  },
  {
    id: 2,
    titulo: "Power Bank",
    descricao: "Belkin BPB006BT USB-C 10000mAh Power Bank",
    valor: 90.99,
    imagem: require("../../assets/products/power-bank.jpg"),
  },
  {
    id: 3,
    titulo: "Smartphone",
    descricao:
      "Smartphone Samsung Galaxy A32 128GB Violeta 4G - 4GB RAM Tela 6,4" Câm. Quádrupla + Selfie 20MP",
    valor: 1150.99,
    imagem: require("../../assets/products/smartphone.jpg"),
  },
];

export const getItens = () => {
  return itemList;
};

Duas propriedades são obrigatórias: renderItem e data

import { FlatList, StatusBar, StyleSheet, Text, View } from "react-native";
import Card from "./src/components/Card";
import { getItens } from "./src/services/ItemServiceMock";

const App = () => {
  const renderCard = ({ item }) => (
    <Card
      descrição={item.descricao}
      imagem={item.imagem}
      informações={item.valor}
      titulo={item.titulo}
    />
  );

  return (
    <View style={styles.container}>
      <StatusBar />
      <FlatList data={getItens()} renderItem={renderCard} />
    </View>
  );
};
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 4,
  },
  seção: {
    flexDirection: "row",
    borderColor: "#ccc",
    borderWidth: 1,
  },
  imagem: {
    padding: 4,
    flex: 1,
    height: 200,
  },
  texto: {
    flex: 1,
    padding: 4,
  },
});

Existem muitas bibliotecas de componentes de navegação disponíveis para usar com react native. Aqui vamos usar a biblioteca React Navigation.

Vamos usar a navegação em pilha (stack navigation) que simula o funcionamento dos links de uma página na web. Os tipos diferentes de navegação estão ilustrados abaixo:

Para mais detalhes veja este artigo.

Vamos seguir o tutorial da documentação oficial.

https://pt-br.reactjs.org/docs/hooks-reference.html#usecontext

O que você vai fazer

O que você vai aprender

O que você precisa

Referências

Instalação do Node.js e Expo

Início do desenvolvimento

Apresentação de informações de um determinado dado

Componente criado

Customizando o componente

Exportação nomeada

Exportação Default

Props