Dica Native Base - Construindo interfaces poderosas no React Native

tutorial Mai 22, 2019

Olá Rocketz, hoje estarei apresentando para vocês uma maneira fácil de utilizar componentes visuais nativos comuns como: Menus, botões e cards no react native, que dará para os seus apps um upgrade visual por meio dos guidelines padrões do mundo mobile como o material design. Então vamos lá! 👨‍💻
(obs: É novo no react native? Siga esse tutorial do Facebook para se familiarizar com as ferramentas).

Mas o que é o Native Base?

O Native Base é uma biblioteca open source de componentes visuais, que nos disponibiliza rapidamente componentes comuns e reusáveis como os botões, textos e menus que vemos nos apps nativos de forma rápida e fácil. O mais legal é que a comunidade é bem grande e ativa. Regularmente  eles realizam updates fresquinhos que podem ser encontrados na documentação.

Sem mais papo furado, vamos ao que interessa 😎

Instalação

Para iniciar, você vai precisar ter o gerenciador de pacote npm instalado em sua máquina, se você seguiu o tutorial acima do Facebook para instalação do react native, tudo deve funcionar bem :).

O próximo passo é iniciarmos o nosso projeto, então vá para o seu diretório favorito de projetos e rode o seguinte comando:

react-native init fantasticProject
cd fantasticProject

Agora que já iniciamos o nosso projeto, podemos instalar o Native Base:

npm install native-base --save

O que iremos construir

Agora que já fizemos o setup do nosso projeto, vamos por a mão na massa e desenvolver um app que incrementa um contador simples, no clique de um botão, iremos utilizar alguns componentes como navbar, button, toast e text, para ver a utilização dessa lib na prática.

Plugue o seu celular ou inicie o seu emulador e rode o comando abaixo para visualizar como está o seu app agora:

react-native run-android

Ou

react-native run-ios

Você deve obter um resultado parecido com esse:

Tela de Welcome React Native

Vamos começar a modificar essa tela, para isso abra o arquivo App.js no seu editor favorito (por aqui utilizamos o Visual Code.). O App.js é o nosso arquivo de entrada, que é chamado assim que iniciamos o nosso app, vamos começar removendo o que não precisaremos utilizar e importando o native base:

import React, {Component} from 'react';
import { View } from 'react-native';
import { Container, Header, Left, Body, Right, Title, Button, Toast , Text } from 'native-base'

export default class App extends Component {
  render() {
    return (
      <Container>
      </Container>
    );
  }
}

Perceba que importamos os componentes do Native Base que utilizaremos como o nosso Header, o Text e o Toast para exibir a mensagem de atualização do contador.

Nosso próximo passo é adicionar os componentes de cabeçalho, texto e o botão em nossa interface:

import React, {Component} from 'react';
import { View } from 'react-native';
import { Root, Container, Header, Left, Body, Right, Title, Button, Toast , Text } from 'native-base'

export default class App extends Component {
  render() {
    return (
      <Container>
         <Header>
          <Left/>
          <Body>
            <Title>Fantastic Project</Title>
          </Body>
          <Right />
        </Header>
        <View style={{flex: 1, justifyContent: "center", alignItems:"center"}}>
          <Text>0</Text>
          <Button style={{alignSelf: "center", marginTop: 20}} rounded>
            <Text>Incrementar!</Text>
          </Button>
        </View>
      </Container>
    );
  }
}

Adicionamos alguns estilos para alinhas os componentes no centro da tela, quando visualizar o seu app agora ele deve estar assim:

Deve ter percebido que não acontece nada ao clicar no botão, é o que faremos a seguir, vamos adicionar a lógica para que ao clicar no botão, haja o incremento do número e um aviso de que adicionamos um número, vamos ao código:

O primeiro passo é definir o nosso estado para o contador, então vamos criar um estado que será atualizado ao clicarmos no botão:

export default class App extends Component {

  state = {
    counter: 0
  }

O próximo passo é criarmos o nosso método que irá incrementar o valor do counter e exibir uma mensagem através do componente Toast (Personalize a mensagem como quiser):

export default class App extends Component {

  state = {
    counter: 0
  }

  incrementNumber = () => {
      this.setState({ counter: this.state.counter + 1 });
      Toast.show({
        text: "Número atualizado!",
        position: "bottom",
        duration: 2000
      })
  }

Por fim iremos adicionar um listener no nosso botão para que quando for clicado chame o nosso método incrementNumber, e modificar o nosso texto central para receber o valor do estado, assim quando o nosso estado counter for atualizado, o nosso texto também será:

 <Container>
         <Header>
           <Left/>
           <Body>
            <Title>Fantastic Project</Title>
           </Body>
           <Right />
         </Header>
         <View style={{flex: 1, justifyContent: "center", alignItems:"center"}}>
           <Text>{this.state.counter}</Text>
           <Button onPress={this.incrementNumber} style={{alignSelf: "center", marginTop: 20}} rounded>
           <Text>Incrementar!</Text>
           </Button>
         </View>
 </Container>

É isso ai! O nosso código final fica com essa cara:

import React, {Component} from 'react';
import { View } from 'react-native';
import { Root, Container, Header, Left, Body, Right, Title, Button, Toast , Text } from 'native-base'

export default class App extends Component {

  state = {
    counter: 0
  }

  incrementNumber = () => {
      this.setState({ counter: this.state.counter + 1 });
      Toast.show({
        text: "Número atualizado!",
        position: "bottom",
        duration: 2000
      })
  }

  render() {
    return (
      <Root>
       <Container>
         <Header>
          <Left/>
          <Body>
            <Title>Fantastic Project</Title>
          </Body>
          <Right />
        </Header>
        <View style={{flex: 1, justifyContent: "center", alignItems:"center"}}>
          <Text>{this.state.counter}</Text>
          <Button onPress={this.incrementNumber} style={{alignSelf: "center", marginTop: 20}} rounded>
            <Text>Incrementar!</Text>
          </Button>
        </View>
       </Container>
      </Root>
    );
  }
}

Quando rodar o seu projeto agora deverá obter o seguinte resultado:

YES! Com isso você deu os seus primeiros passos com o Native Base, há muito mais componentes para serem usados e explorados, acessando esta página! Continue e utilize um desses componentes para modificar o nosso projeto, o limite está na sua imaginação :). Sinta-se livre para comentar e sugerir novos tutoriais, e até a próxima! 👋

Encontre o código completo do projeto aqui.

José Diôgo

Computer Student, Co-Funder and COO at Space Rocket.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.