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 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