Existem vários artigos por aí falando sobre o React Native, porém, esse não abordará somente esse assunto , abordará também como desenvolver aplicações usando o Expo no React Native e qual a diferença entre eles.
Por ANDERSON HENRIQUE DE SÁ SILVA
Desenvolver aplicações mobile normalmente exige bastante trabalho, principalmente com os diferentes tipos de plataforma como IOS e Android. Quando falamos de códigos nativos, é necessário desenvolver em Java para Android e Swift para IOS, porém, com o React Native, temos a facilidade de construir aplicações nativas utilizando apenas uma linguagem: Javascript.
Bom, antes vamos abordar o que é o Expo.
O que é o Expo?
Segundo o site, uma de suas definições é “Expo apps são aplicativos React Native que contém a Expo SDK. A SDK é uma biblioteca Javascript nativa que contém acesso a funcionalidades do sistema do dispositivo (coisas como câmera, contatos, armazenamento local e outros hardwares). Isso significa que você não precisa usar Xcode ou Android Studio, ou escrever qualquer código nativo. Significa também, fazer projetos puros de javascript portáteis que podem rodar em qualquer ambiente nativo contendo a SDK do expo.”.
Sendo assim, podemos ver um destaque bem interessante, pois não é necessário um Macbook ou algum outro com Xcode para criar nossas aplicações IOS. Então o que estamos esperando? Vamos colocar a mão na massa!
Requisitos necessários
Ferramentas que utilizaremos
Iniciando a criação do nosso app
Nesse artigo iremos criare um simples bloco de notas de forma fácil e rápida, para isso vamos instalar o expo digitando:
npm install -g expo-cli
Feito isso, vamos criar nossa aplicação:
expo init blog-project
Você pode colocar o nome da sua preferência no projeto, para este exemplo, o nome é “blog-project”. Feito isso, será necessário escolher entre as opções blank ou tabs. Nesse caso, vamos escolher tabs que virá com telas prontas de exemplo.
Logo após escolhermos a opção tabs, será necessário escolher o workflow. Existem duas opções: managed ou advanced. No exemplo iremos usar a managed, que é a opção default.
Depois, é necessário adicionar o nome da aplicação e a sua slug. Para esse artigo dei o nome de
Projeto Bloco de notas.
Após pressionar o enter, será iniciado o processo de instalação e criação do projeto, essa etapa exige alguns minutos, tempo suficiente para ir tomar um café.
Colocando a mão na massa
Agora chegou a melhor parte, vamos começar a codar. Abra o genymotion e inicialize uma VM com um android superior a 5. Com ela aberta, navegue até o projeto recém criado com os comandos:
cd <nome do seu projeto>
npm run android
É válido ressaltar que o último comando é usado porque estamos criando para o Android, porém, nada impede de utilizar o Xcode no seu Mac e, ao invés de android, digitar ios. Também é interessante dizer que nenhum dos dois são obrigatórios. Como já mencionado na introdução, você pode utilizar o seu próprio dispositivo físico para isso, só precisa baixar o aplicativo do Expo na loja virtual e escanear o QR Code gerado, que mostraremos a seguir.
Ao digitar o comando run, abrirá uma página no seu navegador e sua aplicação será executada no dispositivo virtual.
Dispositivo virtual no Genymotion
Aba aberta no navegador
Aqui entra uma das mágicas! Se você não quiser usar nenhum emulador para dispositivo móvel, você precisa usar o scanner do QR code do aplicativo do Expo e escanear o QR Code gerado, assim irá começar a construir a aplicação no seu próprio dispositivo. Já se estiver usando emulador, será iniciado a aplicação que foi mostrado na imagem.
Agora abra o código no seu editor de preferência.
Vamos começar alterando a página inicial, abra o arquivo “/screens/HomeScreen.js” a partir da raiz do seu projeto e substitua pelo seguinte código:
import React from 'react';
import {
Text,
View
} from 'react-native';
export default class HomeScreen extends React.Component {
static navigationOptions = {
header: null,
};
render() {
return (
<View>
<Text>Hello World!</Text>
</View>
);
}
}
O resultado deve ser parecido com esse:
Esse será o nosso famoso Hello World, não se preocupem, ficará feio de início e sem nenhum alinhamento e posicionamento, porém, daremos continuidade em um segundo artigo sobre o assunto para finalizarmos nosso bloco de notas. Espero que tenham conseguido chegar no mesmo resultado, esse é o primeiro post de uma série sobre React Native e Expo.
Aguarde os próximos. Até lá!
