React Native: explorando ferramentas de desenvolvimento

Ferramentas essenciais para desenvolvimento - Apresentação

Boas-vindas a este curso, onde falaremos sobre ferramentas para o React Native! Meu nome é Wilson e irei te acompanhar ao longo dessa jornada.

Audiodescrição: Wilson se descreve como um homem de cabelo preto ondulado, olhos pretos, sobrancelhas pretas, e barba curta castanho-clara. Ele veste uma camisa branca, usa um brinco preto na orelha esquerda, e tem tatuagens pretas ao redor do pescoço. Ao fundo, há uma parede de pedra iluminada em gradiente azul e roxo, com uma estante branca e preta contendo livros e enfeites à esquerda do instrutor, e uma guitarra preta à direita.

O que vamos aprender?

Neste curso, vamos desenvolver o ClimaApp, uma aplicação de previsão do tempo que nos ensinará:

• A usar ferramentas como DevMenu e React DevTools;
• A realizar o debug da aplicação com console.log() ou breakpoints;
• A verificar os dados que vêm de uma API;
• E também a analisar o uso de memória no nosso aplicativo.

Conclusão

Prepare sua IDE preferida e vamos para o código!

Ferramentas essenciais para desenvolvimento - Configurando o ambiente

Neste vídeo, daremos início ao projeto ClimaApp.

Configurando o ambiente

Iniciando o projeto

Começaremos acessando a documentação do Expo no navegador. Na seção "Quick Start", há um comando que podemos executar no terminal para iniciar o projeto.

npx create-expo-app@latest

Antes de iniciar o projeto, criamos uma pasta vazia onde ele será armazenado, e também abrimos um terminal dentro dessa pasta para executar o comando. Feito isso, podemos copiar o comando npx da documentação, colar no terminal e executar. Durante a execução, será solicitado o nome do projeto; nesse caso, chamaremos de climapp. Ao final, basta aguardar a instalação da biblioteca.

climapp

Acessando o projeto no VS Code

Com o projeto iniciado com o comando do Expo, abriremos a IDE de preferência para visualizar o código. Utilizaremos o VS Code durante este curso.

Observação: qualquer IDE pode ser usada, conforme sua preferência pessoal.

Após abrir a pasta do projeto climapp, notamos que o Expo cria várias pastas e arquivos de exemplo para o projeto React Native. Como são exemplos, não os utilizaremos no projeto.

Resetando o projeto

Para começar do zero, vamos resetar o projeto. O Expo fornece uma pasta chamada "scripts" que contém o arquivo reset-project.js. Executando esse script, o projeto será resetado. Basta abrir um terminal no projeto e executar o comando node scripts/reset-project.js.

node scripts/reset-project.js

Após a execução, todos os arquivos são movidos para a pasta "app-example", que pode ser apagada. Com isso, restam apenas as pastas "assets", que pode ser utilizada ou não, e "app", que contém a estrutura de navegação com o arquivo _layout.tsx e a tela inicial da aplicação (index.tsx).

_layout.tsx:

import { Stack } from "expo-router";

export default function RootLayout() {
  return <Stack />;
}

index.tsx:

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

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

Criando a tela inicial da aplicação

Para continuar a estrutura, vamos retornar ao arquivo _layout.tsx e expandir o componente Stack no escopo da função, para adicionar mais componentes a ele.

Criaremos uma nova tela na pilha de telas Stack com Stack.Screen, definindo a propriedade name como index, que é o nome do arquivo da tela inicial.

_layout.tsx:

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" />
    </Stack>
  );
}

Executando o projeto

Após salvar, podemos executar o projeto com o comando npm run start no terminal.

npm run start

Com o Expo em execução, podemos abrir o terminal ou um dispositivo físico para testar a aplicação. Nesse caso, usaremos um terminal Android. Ao teclar "A", a tela inicial do projeto é exibida no emulador e o texto é o definido no arquivo index.tsx, onde o componente Text é renderizado.

Conclusão

Com a estrutura inicial finalizada, podemos começar o projeto!

Ferramentas essenciais para desenvolvimento - Definindo os estilos da nossa primeira tela

Com o projeto iniciado, vamos começar a estilização a partir do Figma.

Definindo os estilos da primeira tela

Acessando o protótipo Figma, observamos alguns detalhes importantes na tela:

• O fundo é um gradiente de azul para preto;
• No centro da tela, há duas imagens, um texto e um botão.

Com essas informações, podemos partir para o código.

Removendo o cabeçalho

No emulador, inicialmente, temos uma tela cinza com um texto no centro e um cabeçalho na parte superior. A primeira ação será remover o cabeçalho, que não será necessário.

Para isso, acessaremos o arquivo _layout.tsx, onde, no componente Stack.Screen, utilizaremos a propriedade options para definir um objeto contendo headerShown como false.

_layout.tsx:

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          headerShown: false,
        }}
      />
    </Stack>
  );
}

Após salvar o arquivo, o cabeçalho desaparece e a tela ocupa todo o espaço.

Implementando o gradiente

Para construir o gradiente de fundo, utilizaremos uma biblioteca externa do Expo, pois os componentes nativos do React Native são insuficientes para atingir o resultado esperado.

Na documentação do Expo, acessando a aba "Reference", encontramos a biblioteca LinearGradient. Vamos instalar essa biblioteca com o comando npx expo install, conforme indicado.

npx expo install expo-linear-gradient

Após a instalação, vamos acessar o arquivo index.tsx e substituir a View para começar a tela do zero, importando o LinearGradient da biblioteca do Expo.

index.tsx:

import { Text, View } from "react-native";
import { LinearGradient } from "expo-linear-gradient";

export default function Index() {
  return (

  );
}

Configuração do LinearGradient

Utilizaremos o LinearGradient com a propriedade obrigatória colors, que receberá um array de cores. No Figma, identificamos as seguintes cores: #00457D e #05051F.

// código omitido

export default function Index() {
  return <LinearGradient colors={["#00457D", "#05051F"]}></LinearGradient>;
}

Após adicionar essas cores, ao verificar no emulador, a tela ainda estará cinza, pois precisamos definir que o LinearGradient ocupe a tela inteira.

Usando um arquivo de estilo

Para isso, ainda no arquivo index.tsx, criaremos uma constante chamada style que receberá o arquivo de estilo StyleSheet, importado do react-native.

Iremos declarar StyleSheet.create() para criar um objeto chamado container contendo a propriedade flex: 1 para ocupar todo o espaço disponível.

Por fim, no LinearGradient, usaremos style={style.container} para aplicar a estilização. Ao salvar, o gradiente ocupa toda a tela com as cores corretas.

import { StyleSheet } from "react-native";
import { LinearGradient } from "expo-linear-gradient";

export default function Index() {
  return (
    <LinearGradient
      colors={["#00457D", "#05051F"]}
      style={style.container}
    ></LinearGradient>;
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Adicionando as imagens

Com o fundo configurado, podemos adicionar os componentes necessários:

• Duas imagens;
• Um texto;
• E um botão.

Na pasta "assets > images", temos duas imagens: o logotipo (logo.png) e uma ilustração de clima (weather.png). No arquivo index.tsx, vamos importar o componente Image do react-native.

import { StyleSheet, Image } from "react-native";
import { LinearGradient } from "expo-linear-gradient";

// código omitido

Feito isso, vamos definir dois componentes Image, com a propriedade source usando require() para especificar o caminho das imagens: ../assets/images/logo.png e ../assets/images/weather.png. Futuramente, iremos ajustar a posição dessas imagens.

// código omitido

export default function Index() {
  return (
    <LinearGradient colors={["#00457D", "#05051F"]} style={style.container}>
      <Image source={require("../assets/images/logo.png")} />
      <Image source={require("../assets/images/weather.png")} />
    </LinearGradient>;
  );
}

// código omitido

Após salvar as alterações, as imagens serão exibidas na tela.

Adicionando o texto e o botão

No Figma, resta um texto e um botão. Da biblioteca react-native, importaremos os componentes Text para o texto e TouchableOpacity para o botão.

Feito isso, podemos declarar um componente Text com o conteúdo "Boas-vindas!", e um TouchableOpacity ao redor de um Text com o texto "Entrar".

import { StyleSheet, Image, Text, TouchableOpacity } from "react-native";
import { LinearGradient } from "expo-linear-gradient";

export default function Index() {
  return (
    <LinearGradient colors={["#00457D", "#05051F"]} style={style.container}>
      <Image source={require("../assets/images/logo.png")} />
      <Image source={require("../assets/images/weather.png")} />
      <Text>Boas-vindas!</Text>
      
      <TouchableOpacity>
        <Text>Entrar</Text>
      </TouchableOpacity>
    </LinearGradient>;
  );
}

// código omitido

No emulador, os textos já aparecem na tela, embora pequenos.

Conclusão

Na sequência, trabalharemos na estilização dos componentes adicionados!

Sobre o curso React Native: explorando ferramentas de desenvolvimento

O curso React Native: explorando ferramentas de desenvolvimento possui 129 minutos de vídeos, em um total de 57 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Ferramentas essenciais para desenvolvimento
• Gerenciamento de dados no React Native
• Depuração e monitoramento em tempo real
• Analisando dados de uma API
• Identificando problemas de performance