Crie seu primeiro aplicativo Android nativo do React

0
Tutoriais
18/07/2022
A+ A-
Email Print

React Native é uma estrutura de aplicativo móvel de código aberto criada pelo Facebook. Você pode usá-lo para desenvolver aplicativos para dispositivos Android e iOS com uma única base de código. O React Native potencializa alguns dos aplicativos mais populares do mundo, como Instagram e Facebook, e neste post vou mostrar como criar seu primeiro aplicativo React Native para Android.

Exemplo de código React Native

O código React Native para uma tela típica de aplicativo móvel se parece com isso:

import * as React from 'react';
import {Text, View, Stylesheet} from 'react-native';

const ExampleScreen = (props) {

  return (

    
     Hello world!
    
    );
}

const styles = Stylesheet.create({
  containerStyling:{
    background: '#0000FF'
  },
  textStyling :{
    marginBottom :20,
    color:'#FFF'
  }
});

export default ExampleScreen

Se você olhar de perto, verá que o React Native usa uma combinação de JavaScript, marcação semelhante a HTML e CSS. Este trecho de código define uma tela com exibição de texto e estilo.

Ambientes de desenvolvimento React Native: Expo vs. CLI React Native

Existem duas maneiras de criar um aplicativo React Native:

  1. Expo CLI
  2. Reagir CLI Nativo

Vou falar sobre os prós e contras de cada um abaixo.

Expo CLI

Expo é uma estrutura de código aberto e uma plataforma para aplicativos React universais que oferece um fluxo de trabalho de desenvolvimento de aplicativo gerenciado. É um conjunto de ferramentas e serviços construídos em torno de plataformas React Native e nativas que ajudam a desenvolver, construir, implantar e iterar rapidamente em aplicativos iOS, Android e web a partir da mesma base de código JavaScript ou TypeScript.

A Expo elimina todas as complexidades associadas à criação de aplicativos React Native. Alguns dos recursos da Expo CLI incluem:

  • APIs universais que fornecem acesso a recursos como câmera, mapas, notificações, sensores, haptics e muito mais.
  • Um serviço de compilação baseado em nuvem que fornece binários prontos para armazenamento de aplicativos e lida com certificados.
  • Atualizações over-the-air que permitem que você atualize seu aplicativo a qualquer momento sem o incômodo e os atrasos de enviar para a loja.

Reagir CLI Nativo

O React Native CLI é um ambiente de desenvolvimento mais básico e bare-metal. O bom é que possibilita a construção de binários de aplicativos em sua própria máquina, sem depender de um serviço de nuvem. Por outro lado, a configuração é muito mais complicada — para criar aplicativos para Android, você precisará instalar o Android Studio e configurar muitos recursos antes de começar. Esse processo pode ser um pouco complexo, mas o ambiente React Native CLI é mais adequado para desenvolvedores de aplicativos profissionais.

Para este tutorial, usaremos a Expo, pois essa é a maneira mais fácil de começar a criar aplicativos React Native.

Como funciona a Expo

ExposiçãoExposiçãoExposição

Para usar o Expo, primeiro você precisa instalar o aplicativo Expo Client, que está disponível na Play Store (uma versão também está disponível na iOS App Store). O aplicativo Expo Client permitirá que você execute o aplicativo para fins de teste em tempo real.

Você pode codificar seu aplicativo React Native em seu próprio computador com seu editor de texto de programação favorito e, em seguida, usar a Expo CLI para testar ou publicar seu aplicativo. Nos bastidores, a Expo irá empacotar seu código React Native e disponibilizá-lo para o aplicativo Expo Client em seu dispositivo. Você também pode usar a Expo CLI para publicar seu aplicativo e disponibilizá-lo para qualquer pessoa com o Expo Client ou para criar uma versão independente do seu aplicativo que pode ser carregada na loja de aplicativos e executada sem instalar o Expo Client.

Criando um aplicativo com a Expo

Neste tutorial, usaremos a Expo CLI para criar nosso aplicativo.

Pré-requisitos

Para criar um aplicativo React Native com Expo, você precisa atender ao seguinte:

Além disso, observe que o computador de desenvolvimento e o telefone devem estar conectados à mesma rede sem fio.

Baixar Node.js

Visite o site do Node.js e baixe a versão mais recente do Node. O Node está disponível para os sistemas operacionais Windows, macOS e Linux. Basta escolher o seu sistema operacional e instalá-lo de acordo com as instruções disponíveis no site.

Para verificar se o Node.js está instalado, abra uma janela de terminal e digite:

node -v

Este comando exibirá a versão do Node instalada.

Instalar cliente Expo

Depois de instalar o Node, você também precisará instalar o cliente Expo CLI. Basta executar o seguinte comando:

 npm install expo-cli --global

Para usuários de macOS e Linux, certifique-se de usar sudo.

sudo  npm install expo-cli --global

Ignore quaisquer avisos ou erros que ocorram no processo de instalação do Expo CLI. Após uma instalação bem-sucedida, você deverá ver a mensagem abaixo.

instalar expoinstalar expoinstalar expo

Crie um aplicativo de lista de tarefas com React Native

Vamos criar um aplicativo simples de lista de tarefas que permite inserir uma lista de tarefas que você precisa realizar e exibi-las na tela.

Criar um novo projeto com a Expo

Para começar, execute o seguinte comando Expo CLI para criar um novo projeto:

expo init tasklist

tasklist é o nome do projeto. Você será solicitado a escolher um modelo para o seu projeto. Por enquanto, escolha o modelo em branco, que oferece dependências mínimas.

o expo init O comando cria uma pasta de projeto e instala todas as dependências exigidas pelo aplicativo React Native.

expo init tasklist-app
? Choose a template: expo-template-blank

📦 Using npm to install packages. You can pass --yarn to use Yarn instead.

✔ Downloaded and extracted project files.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd tasklist-app
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web

Navegue até a pasta do projeto e execute o seguinte comando:

cd tasklist-app
npm start
Ferramentas de desenvolvimento da Expo começandoFerramentas de desenvolvimento da Expo começandoFerramentas de desenvolvimento da Expo começando

npm start iniciará as ferramentas de desenvolvimento da Expo e abrirá uma nova guia no seu navegador que se parece com isso:

Pacote de metrôPacote de metrôPacote de metrô

Esta janela permite que você execute seu aplicativo em um simulador ou em um dispositivo conectado.

Conecte um dispositivo

Agora, abra o aplicativo cliente Expo em seu dispositivo Android físico e selecione o Digitalizar código QR opção, como mostrado abaixo.

aplicativo expoaplicativo expoaplicativo expo

Em seguida, volte para a janela de desenvolvimento do Expo, digitalize o código de barras e aguarde a conclusão do processo de compilação do pacote JavaScript. Isso geralmente leva alguns minutos. Quando o processo estiver concluído, o aplicativo deverá estar em execução no seu celular!

Estrutura do projeto

Agora que seu ambiente de desenvolvimento está pronto, você pode editar o código do projeto usando seu editor de código preferido. A pasta do projeto se parece com isso:

pasta de projetopasta de projetopasta de projeto
  • ativos: mantém as imagens para o aplicativo
  • node_modules: contém todas as dependências do projeto
  • App.js: contém o código que renderiza a interface do usuário e é um arquivo essencial

App.js está aberto na captura de tela acima. Vamos olhar mais de perto. Primeiro, importamos React a partir de react. Em seguida, importamos o Text e View componentes de react-native. Também importamos Stylesheeto que ajuda no estilo.

O React Native vem com componentes integrados, como e em oposição aos componentes HTML padrão, como

e

. o componente é o componente mais fundamental no React Native e é usado para agrupar outros componentes filhos – como

em HTML. o componente é usado para exibir conteúdo de texto na tela – como

em HTML.

Na versão padrão do App.js que o Expo cria, há uma visualização simples com um componente de texto e uma barra de status. Essa visão é retornada do App() função. o styles constante contém algum CSS básico para estilizar a visualização.

Em seguida, vamos adicionar alguns novos componentes e estilos ao aplicativo!

Criar a IU do aplicativo

Abra o App.js arquivo e digite o seguinte código.

import { StatusBar } from 'expo-status-bar';
import React , {useState} from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {

  return (

O código acima adiciona uma entrada de texto simples e um botão para adicionar novas tarefas. Usamos o estilo CSS flexbox para posicionar os componentes próximos uns dos outros.

Adicionar tratamento de eventos

Para obter a entrada do usuário, primeiro importamos o useState() função de react e use-o para atualizar o estado do newTask() e setnewTask() funções. Como o usuário ainda não digitou nada, o estado inicial estará vazio. Adicione o seguinte código na parte superior do App() função, logo acima return:

const [newTask, setNewTask] = useState('');

Em seguida, definimos o taskInputHandlerque ouve a mudança na entrada e atualiza o conteúdo da setNewTask() função. Adicione essas linhas ao App() função seguinte:

  const taskInputHandler = (enteredText) => {
    setNewTask(enteredText);
  };

Agora registramos esse manipulador de entrada com o TextInput componente. Atualize seu TextInput componente para que se pareça com o seguinte.

Agora precisamos lidar com os pressionamentos de botão. Quando o usuário pressiona o botão + botão, queremos adicionar a nova tarefa a uma lista.

Primeiro, vamos definir nosso estado para a lista de tarefas:

  const [appTasks, appTask] = useState([]);

A seguir, definimos um addTaskHandler função para adicionar a nova tarefa (encontrada no newTask estado) à lista.

 const addTaskHandler = () =>{
    appTask(currentTask => [...currentTask, newTask]);
    console.log(newTask);
  };

E registre esse manipulador de eventos com o

Posted by

Tagged with
Newer Post
Older Post

Deixe uma resposta