Comece a programar com o React Native

Comece a programar com o React Native

30 de outubro de 2017 1 Por Ramos de Souza Janones
Como vender Software - Seja desktop, web ou MobilePowered by Rock Convert
Powered by Rock Convert

 O foco do React Native é trabalhar com eficiência, para atender as plataformas Android e IOS, a qualquer momento você pode importar componentes nativos.

Uma biblioteca JavaScript para criar interfaces de usuário

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 🙂

Declarativo

React faz com que a criação de UIs interativas seja uma tarefa fácil. Crie views simples para cada estado na sua aplicação, e o React irá atualizar e renderizar de forma eficiente apenas os componentes necessários na medida em que os dados mudam.

Views declarativas fazem com que seu código seja mais previsível e simples de depurar.

Baseado em componentes

Crie componentes encapsulados que gerenciam seu próprio estado e então, combine-os para criar UIs complexas.

Como a lógica do componente é escrita em JavaScript e não em templates, você pode facilmente passar diversos tipos de dados ao longo da sua aplicação e ainda manter o estado fora do DOM.

Aprenda uma vez, use em qualquer lugar

Não fazemos suposições sobre as outras tecnologias da sua stack, assim você pode desenvolver novos recursos com React sem reescrever o código existente.

O React também pode ser renderizado no servidor, usando Node, e ser usado para criar aplicações mobile, através do React Native.

 
 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: Release do livro: Desenvolvedor Kotlin Android – Bibliotecas para o dia a dia

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.

brew install node

 

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.

npm install -g create-react-native-app

 

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

create-react-native-app Clock

 

para rodar o projeto. utilize o comando:

npm run start

 

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.

npm install moment  —-save

 

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:

<View>
   <Text>{Moment().format('h:mm:s')}</Text>
 </View>

 

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.

timeNow() {
 return Moment().format('hh:mm:ss');
}
render() {
  return (
   <View style={styles.container}>
     <Text style={styles.timeNow}>{this.timeNow()}</Text>
   </View>
  );
}

 

LEIA TAMBÉM:  A arquitetura Front End com Redux em um mundo de IA

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.

constructor(props) {
  super(props);
  this.state = {timeNow: this.timeNow()};
}

 

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.

componentDidMount(){
  setInterval(() => {
    this.setState({
      timeNow: this.timeNow(),
    });
  }, 1000);
}

 

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:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Moment from 'moment';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {timeNow: this.timeNow()};
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.timeNow}>{this.state.timeNow}</Text>
      </View>
    );
  }
  componentDidMount(){
    setInterval(() => {
      this.setState({
        timeNow: this.timeNow(),
      });
    }, 30);
  }
  timeNow() {
    return Moment().format('H:mm:ss');
  }
}
const styles = StyleSheet.create({
  timeNow: {
    textShadowColor: '#0AAFE6',
    textShadowOffset: {
      width: 0,
      height: 0
    },
    textShadowRadius: 10,
    fontSize: 70,
    color: '#daf6ff'
  },
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

O nosso projeto final ficará assim:

 
blank

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.

npm run 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.

Utilizando NativeBase no React Native

Se existe uma coisa que faz muitos Apps React Native pecarem é a falta de organização e padrão no Layout. Isso porque apps construídos com ele requerem um mínimo de estilização e métricas, que as vezes é complicado compreender.

Se te incomoda cuidar desses detalhes existe algumas bibliotecas focadas nisso, e sua atenção se volta apenas ao negócio da aplicação.

Hoje neste post mostraremos uma biblioteca muito simples e robusta, o NativeBase, que cuidará disso sem problemas. Com ele você terá uma gama de componentes construídos para se comportarem como nativos em Android e iOS.

Como funciona?

NativeBase servirá apenas para cuidar do Layout da aplicação, nada mais é do que as estilizações em cima de componentes. Com ele teremos componentes como HeaderTabs,  ListButtonCard e entre outros prontos para usarmos, precisando apenas de organizarmos os mesmos.

Com isso o Layout será ajustado tanto para Android quanto iOS, cada um seguindo seu Design padrão:

blank

Observe que o componente utilizado é o mesmo, ListItem, entretanto o Design permaneceu nativo de cada plataforma, essa é a grande sacada do NativeBase.

Powered by Rock Convert

Instalação

Como na maioria das bibliotecas, não há segredos para sua instalação. Primeiro criaremos um projeto:

react-native init rocketapp

Umas vez com ele criado, instalaremos o NativeBase:

yarn add native-base
// ou npm install native-base

Por depender de outras bibliotecas, como o caso da fonte de ícones, e ela por sua vez altera a estrutura nativa, usaremos o link fazer isso:

react-native link native-base

Pronto!! Já temos tudo configurado para utilizamos essa biblioteca fantástica. Basta rodamos nossa aplicação.

react-native run-android
// ou react-native run-ios

Aplicação like a boss

E é lógico que vamos vamos fazer algo juntos, somos a Rocketseat!!!!

Dividirei os códigos por partes, assim ficará mais fácil entender!!

LEIA TAMBÉM:  Como otimizar aplicações React?

Por estar tudo num arquivo só, importaremos um caminhão de componentes, então no App.js:

import React, { Fragment } from 'react';
import { Container, Header, Left, Right, Body, Title, Button, Icon, View, Fab, List, ListItem, Thumbnail, Text, Badge, Content, Tab, Tabs, TabHeading, Card, CardItem } from 'native-base';
import { Image, StyleSheet } from 'react-native';

Alguns dados para utilizamos no nosso App:

const messages = [
{ id: 1, name: 'Diego Fernandes', avatar_url: 'https://avatars0.githubusercontent.com/u/2254731?s=460&v=4', last_message: 'Lorem ipsum', time: '18:20 PM' },
{ id: 2,name: 'Claudio Orlandi', avatar_url: 'https://secure.gravatar.com/avatar/4a75e363796021a2bc2b9f805bacc2da?s=500&d=mm&r=g', last_message: 'Lorem ipsum', time: '10:12 AM' },
];
const blogList = [
{ id: 1, title: 'Implementando Shimmer Effect no React Native', author: 'Claudio Orlandi', author_avatar: 'https://secure.gravatar.com/avatar/4a75e363796021a2bc2b9f805bacc2da?s=500&d=mm&r=g', cover_image_url: 'https://blog.rocketseat.com.br/wp-content/uploads/2018/06/capa_react-native-shimmer-868x488.png', likes: 1290, comments: 129, time: '21 de Junho' },
{ id: 2,title: 'Utilizando mapas no React Native com Mapbox', author: 'Higo Ribeiro', author_avatar: 'https://secure.gravatar.com/avatar/8834a7ccea235ca4cca9c970d95e27f3?s=500&d=mm&r=g', cover_image_url: 'https://blog.rocketseat.com.br/wp-content/uploads/2060/06/react-native-map-mapbox-868x488.png', likes: 1290, comments: 129, time: '20 de Junho' },
];

Agora vamos criar a base do nosso App, onde haverá um HeaderTabBar e uma pequena estilização:

const Home = ({ blogList }) => null;
const Messages = ({ messages }) => null;
const Notification = () => null;
const logo_url = 'https://avatars0.githubusercontent.com/u/28929274?s=200&v=4';
const App = () => (
<Container>
<Header androidStatusBarColor="#573ea8" style={styles.header} hasTabs>
<Left>
<Thumbnail small source={{ uri: logo_url }} />
</Left>
<Body>
<Title>Rocketseat</Title>
</Body>
</Header>
<View style={styles.container}>
<Tabs>
<Tab heading={<TabHeading style={styles.tabHeading} ><Icon type="FontAwesome" name="home" /></TabHeading>}>
<Home blogList={blogList}/>
</Tab>
<Tab heading={<TabHeading style={styles.tabHeading} ><Icon type="FontAwesome" name="bell-o" /></TabHeading>}>
<Notification />
</Tab>
<Tab heading={<TabHeading style={styles.tabHeading} ><Icon type="FontAwesome" name="envelope-o" /></TabHeading>}>
<Messages messages={messages}/>
</Tab>
</Tabs>
</View>
</Container>
);
export default App;
const styles = StyleSheet.create({
tabHeading: {
backgroundColor: "#7159C1",
},
header: { 
backgroundColor: "#7159C1",
},
container: {
flex: 1,
}
});

Observe que com poucos códigos já temos a cara do App definida. No Header adicionamos a propriedade androidStatusBarColor para forçar a cor que queremos no StatusBar do Android. No iOS ele pega a cor do Header.

No código coloquei HomeNotification e Message como componentes null para fazermos em seguida. Teremos algo parecido com isso:

blank

Tab Home

Agora definiremos o conteúdo da nossa Tab Home, que será a apresentação de dois post do blog em forma de uma lista de Cards. Substituiremos o null pelo código abaixo:

const Home = ({ blogList }) => (
<Content>
{blogList.map(blog => (
<Card key={blog.id}>
<CardItem>
<Left>
<Thumbnail source={{ uri: blog.author_avatar}} />
<Body>
<Text>{blog.title}</Text>
<Text note>{blog.author}</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image source={{ uri: blog.cover_image_url}} style={{height: 200, width: null, flex: 1}}/>
</CardItem>
<CardItem>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>{blog.likes}</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>{blog.comments}</Text>
</Button>
</Body>
<Right>
<Text note>{blog.time}</Text>
</Right>
</CardItem>
</Card>))}
</Content>
);

Precisamos notar a organização e o que cada componente representa com suas respectivas propriedades. Mais detalhes sobre Card.

LEIA TAMBÉM:  TypeScript 3.5: Os novos recursos do TypeScript
blank

Tab Messages

O conteúdo desse Tab será uma lista de mensagens de usuários e mais uma vez o NativeBase disponibiliza tudo pronto, precisamos apenas saber organizar os componentes.

Neste TabMessages colocaremos um FAB (Floating Action Button) para “adicionarmos” mais usuários na conversa. Dale código:

const Messages = ({ messages }) => (
<Fragment>
<List>
{messages.map( message => (
<ListItem avatar key={message.id}>
<Left>
<Thumbnail source={{ uri: message.avatar_url}} />
</Left>
<Body>
<Text>{message.name}</Text>
<Text note>{message.last_message}</Text>
</Body>
<Right>
<Text note>{message.time}</Text>
</Right>
</ListItem>
))}
</List>
<Fab
direction="up"
position="bottomRight"
style={{ backgroundColor: "#7159C1"}}
>
<Icon type="FontAwesome" name="plus" />
</Fab>
</Fragment>
);

É como se cada componente falasse por si só!! Mais sobre List.

blank

Tab Notification

Poderíamos fazer esse componente juntos, mas que tal você mostrar o que aprendeu e fazê-lo? Esse é o meu desafio para você!! Não esquece de postar lá na comunidade hehe.

blank

Não é adeus, é até logo!!!

Então, fala que não é simples?? E como é comum na comunidade existem outras alternativas, mas hoje ficaremos com essa biblioteca .

Se há alguma dúvida sobre o React Native e algumas funcionalidades do ES6+, não deixa de se inscrever no nosso curso gratuito sobre React Native e ES6+.

Ah é!! Não esqueça de compartilhar com seus amigos Devs e podes deixar também um comentário maroto ali embaixo :P.

Código no github: https://github.com/Rocketseat/blog-native-base

» MundoJS » React 

Por:

Go to the profile of Victor Ferraz
Powered by Rock Convert
Siga os bons!
Últimos posts por Ramos de Souza Janones (exibir todos)
vote
Article Rating