Começando com React Native

mm

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.
mm

React Native é um framework que permite você desenvolver aplicativos nativos usando apenas Javascript. Se você já possui experiência com React, para começar a desenvolver utilizando react native é um pulo, e se você nunca trabalhou com o React não tem problema vou tentar ser o mais didático possível, na minha opinião eu considero a curva de aprendizado bem curta 🙂
 
 O foco do framework é trabalhar com eficiência, para atender as plataformas Android e IOS, a qualquer momento você pode importar componentes nativos.

Leia também: React Native Do Zero Ao Profissional, Curso Sobre Criação De Apps React Native Para Android e IOS
 
Nesse post vou ensinar como começar a desenvolver utilizando create-react-native-app, que é a forma mais simples de começar o desenvolvimento com o react native.
 
 A primeira coisa a ser feita é instalar o node, se você já tiver o instalado você pode pular essa etapa.

 

Aprenda React do Zero ao Profissional

Em seguida instale o watchman, essa é uma ferramenta desenvolvida pelo facebook para escutar as alterações feitas, é extremamente recomendado instala-lo para que o React Native possa ter uma melhor performance.

Existe outras formas de iniciar um projeto com React Native mas esse tutorial vai se basear na cli create-react-native-appEssa cli irá criar um projeto bem enxuto com o mínimo possível, para rodar o projeto por padrão ela utiliza o Expo.

Expo é um conjunto de ferramentas, bibliotecas e serviços que permitem criar aplicativos iOS e Android nativos, escrevendo JavaScript. Os aplicativos utilizando Expo são aplicativos React Native que contêm o SDK da Expo. O SDK é uma biblioteca nativa fornece acesso à funcionalidade do sistema do dispositivo 
( como câmera, contatos, armazenamento local e outro hardware). Isso significa que ao utilizar Expo você não precisa usar Xcode ou Android Studio.

 

Agora crie o projeto utilizando utilizando create-react-native-app:

 

para rodar o projeto. utilize o comando:

 

Agora conecte o seu device na mesma rede wireless, que está o seu computador e escaneie o QR code que apareceu no seu terminal para abrir o seu projeto.

Agora vamos brincar um pouco 😀
Vamos instalar o moment, que é uma biblioteca de formatar e validar data.

 

Acrescente o import do moment ficando assim:

import React from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
import Moment from ‘moment’;

Vamos fazer o relógio funcionar, substitua o que está dentro do render por esse código abaixo:

 

Se você olhar seu emulador ou no seu próprio celular você verá a hora atual.

Para uma melhor reutilização de código vamos colocar o código das horas em um método.

 

Para que o relógio mude as horas de acordo com o seu device, temos que fazer algumas mudanças, primeiro é preciso setar o state inicial, no constructor da classe.

 

Para utilizar construtores nas classes react precisamos sempre invocar a palavra reservada super. Como estamos trabalhando com a classe App que é uma sub classe da classe React.Component, é necessário chamar o super para se ter acesso as propriedades da classe pai, nesse caso a classe pai é React.Component.

E em seguida vamos agora fazer com que o relógio mude as horas, para isso será colocado um setInterval dentro de componentDidMount, o setInterval começará a ser executado após a montagem do componente.

 

Todo componente possui métodos para controlar seu ciclo de vida, os métodos com o prefixo will será chamado logo antes de algo acontecer, e os métodos com o prefixo did serão chamados logo após que algo for acontecer. No caso o componentDidMount é chamado logo após a montagem do componente.

Vamos colocar alguns estilos e finalizar o relógio, ficando assim:

 

O nosso projeto final ficará assim:

 

Com react-native-create-app não é possível incluir códigos nativos customizados além da API do react native disponibilizado no Expo SDK.

Se você não sentir confortável ou precisar de utilizar algo que o Expo não dê suporte você pode usar o eject.

 

Com esse comando ele irá gerar um projeto bem similar ao que é feito com o react-native init. essa é uma uma ação permanente, não esqueça de utilizar o git, caso você desfazer algo que você fez.

Se você quiser baixar o projeto basta clonar o repositório no github.

Por:

Go to the profile of Victor Ferraz

Compartilhe.

PinIt
Top
%d blogueiros gostam disto: