Criando o primeiro componente com React Native

Continuando nossa série de artigos sobre React Native, estamos no terceiro artigo. Vamos agora desenvolver os primeiros componentes do nosso aplicativo. Nesta série de artigos, vamos desenvolver do zero um aplicativo Android com React Native. Vamos desenvolver um aplicativo que lista ofertas, promoções e desconto em produtos,  pegando essas informações de uma API. Para quem gostaria de saber mais sobre APIs sugiro o artigo: API HTTP+REST – Conceito e exemplo em Node.js.

Para quem caiu de paraquedas aqui, no artigo: Iniciando o desenvolvimento de um App Android com React Native , apresento como realizar a configuração inicial para o desenvolvimento. E no artigo: Instalando e Configurando o Ambiente de desenvolvimento React Native, apresento como instalar e configurar o ambiente de desenvolvimento React Native no Linux Ubuntu.

Depois de iniciar nosso aplicativo, vamos abrir o código com o nosso editor de códigos de preferência. Eu escolhi o Visual Studio Code para realizar o desenvolvimento do aplicativo, também já iniciei o Emulador Android para visualizar o aplicativo desenvolvido.

Neste artigo não vou apresentar cada arquivo que já vem na instalação, pois o mesmo deixaria o artigo muito extenso e cansativo. Para mais informações, veja a documentação do React Native que é bem completa.

O React Native assim como o React, trabalha com um conceito de componentes. Criamos os elementos que vão compor nosso aplicativo, os dividindo em componentes. Um componente é um elemento independente que compoẽ nossa aplicação. Assim podemos dividir nosso aplicativo em partes independentes e reutilizáveis, podemos pensar cada parte do aplicativo separadamente.

O arquivo principal do nosso aplicativo é o App.js, no exemplo que vem padrão do React Native, toda a aplicação está codificada nele. Neste exemplo são usados componentes que já são nativos do React Native, qual podemos utilizar também em nossas aplicações.

Vamos começar limpando o arquivo App.js, vamos deixar os componentes: StatusBar e SafeAreaView

  • StatusBar controla a barra de status do aplicativo.
  • SafeAreaView renderiza o conteúdo dentro dos limites da área segura de um dispositivo.
import React from 'react';
import {
 SafeAreaView,
 StatusBar,
} from 'react-native';
 
const App: () => React$Node = () => {
 return (
   <>
     <StatusBar />
     <SafeAreaView>
 
     </SafeAreaView>
   </>
 );
};
 
export default App;

Agora vamos criar nossos primeiros componentes o Header e o PromotionFormSearch. Vou realizar todas as nomenclaturas em inglês, para ficar padronizado com os componentes nativos do React Native.

  • Header: Será o cabeçalho do nosso aplicativo, onde ficará a logo do aplicativo e um botão para busca dentro do aplicativo.
  • PromotionFormSearch: Será um formulário para realizar a busca de promoções no aplicativo.

Vamos criar o diretório components onde colocaremos nossos componentes e dentro dele vamos criar o diretório Header e o diretório PromotionFormSearch. Dentro de cada um  destes diretórios vamos ter os arquivos: index.js e styles.js.

Vamos começar pelo componente PromotionFormSearch. Neste componente vamos utilizar alguns componentes do React Native:

  • View é um contêiner que oferece suporte a layout com flexbox , estilo , alguns controles de toque e acessibilidade . Vamos utilizar este elemento para ser o elemento raiz do nosso componente.
  • Modal é um elemento que se sobrepõe na tela para apresentar informações. Vamos utilizar este elemento, para exibir um formulário de pesquisa e um botão para cancelar a pesquisa.
  • TextInput é uma caixa onde é possível inserir texto. Vamos utilizar este elemento, para inserir o texto para realizar a pesquisa.
  • TouchableHighlight permite que uma área da tela possa receber o clique. Vamos utilizar este elemento, para permitir que o usuário do aplicativo clique nos botões de pesquisa e cancelar.
  • Text permite imprimir um texto na tela. Vamos utilizar este elemento para criar nosso botão de cancelar.
  • Image permite utilizar uma imagem em nosso aplicativo. Vamos utilizar este elemento para inserir o ícone de pesquisa.

Por fim nosso componente  PromotionFormSearch ficará do seguinte modo:

import React, { Component } from 'react'
import { View, Modal, Text, TextInput, TouchableHighlight, Image } from 'react-native'
import Styles from './styles'

const SearchIcon = require('./../../assets/search.png')

class PromotionFormSearch extends Component {
  constructor(props) {
    super(props)
    this.state = { modalVisible: false }
  }
  
  render() {
    return(
      <View>
        <Modal
          animationType="slide"
          transparent={ true }
          visible={ this.state.modalVisible }
          onRequestClose={() => {
            this.setState({ modalVisible: false })
          }}
        >
          <View style={ Styles.centeredView }>
            <View style={ Styles.modalView }>
              <TextInput
                style={ Styles.searchInput }
                onChangeText={ () => { return false } }
                placeholder='Procurar por Promoções'
              />
              <TouchableHighlight
                style={ Styles.closeButton }
                onPress={() => {
                  this.setState({ modalVisible: false })
                }}
              >
                <Text style={ Styles.textStyle }>Cancelar</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
        <TouchableHighlight
          onPress={() => {
            this.setState({ modalVisible: true })
          }}
        >
          <Image source={ SearchIcon } style={ Styles.searchIcon } />
        </TouchableHighlight>
      </View>
    )
  }
}

export default PromotionFormSearch

Cole o conteúdo acima no arquivo components/PromotionFormSearch/index.js.  O componente PromotionFormSearch também utiliza uma imagem que é o ícone de lupa para o botão de pesquisa. Assim é necessário importar esta imagem, no código acima este importe é realizado com a linha:

const SearchIcon = require('./../../assets/search.png')

Crie o diretório assets e insira a seguinte imagem no mesmo.

http://irias.com.br/blog/wp-content/uploads/2020/10/search.png

A estilização do componente fica em um arquivo separado no styles.js.

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  searchIcon: {
    width: 20,
    height: 20
  },
  centeredView: {
    flex: 1,
    alignItems: "center",
    marginTop: 30
  },
  modalView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    margin: 20,
    backgroundColor: "white",
    borderRadius: 15,
    padding: 15,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    width: '94%',
    height: 60
  },
  closeButton: {
    backgroundColor: "#2196F3",
    borderRadius: 15,
    padding: 10,
    elevation: 2
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  },
  searchInput: { 
    height: 40,
    width: "75%",
    borderColor: "#ECEFF1",
    paddingLeft: 10,
    borderWidth: 1,
    borderRadius: 10,
    marginRight: 5
  }
})

Cole o conteúdo acima no arquivo components/PromotionFormSearch/styles.js.

Agora vamos criar nosso componente Header, neste componente vamos utilizar alguns componentes do React Native qual já descrevemos acima. Também vamos utilizar nosso componente recém criado PromotionFormSearch.

  • View vamos utilizar este elemento para ser o elemento raiz do nosso componente.
  • Image vamos utilizar este elemento para inserir a logo no cabeçalho do aplicativo.
  • PromotionFormSearch vamos utilizar este elemento para exibir o formulário de pesquisa de promoções.

Nosso componente Header ficará do seguinte modo:

import React, { Component } from 'react'
import { View, Image } from 'react-native'
import Styles from './styles'
import PromotionFormSearch from './../PromotionFormSearch'

const Logo = require('./../../assets/logo.png')

class Header extends Component {
  render() {
    return(
      <View style={ Styles.sectionHeader }>
        <Image source={ Logo } style={ Styles.logoIcon } />
        <PromotionFormSearch />
      </View>
    )
  }
}

export default Header

Cole o conteúdo acima no arquivo components/Header/index.js.  O componente Header também utiliza uma imagem que é a logo do aplicativo. Assim também é necessário importar esta imagem como fizemos com a lupa. No código acima este importe é realizado na linha:

const Logo = require('./../../assets/logo.png')

Coloque sua logo no diretório assets.

Como no outro componente a estilização também fica em um arquivo separado no styles.js.

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  sectionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 15,
    paddingHorizontal: 15,
    alignItems: 'center',
    backgroundColor: '#ffffff'
  },
  logoIcon: {
    width: 110,
    height: 20 
  }
})

Cole o conteúdo acima no arquivo components/Header/styles.js.

Agora para concluir esta primeira parte, vamos adicionar o nosso componente Header em nosso App.js.

import React from 'react'
import {
  SafeAreaView,
  StatusBar,
} from 'react-native'

import Header from './components/Header'

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar />
      <SafeAreaView>
        <Header />
      </SafeAreaView>
    </>
  );
};

export default App;

Cole o conteúdo acima no arquivo App.js.

Ao finalizar nossa aplicação ficará com a seguinte aparência.

Ao clicar no botão de pesquisar ele irá abrir o modal exibindo o formulário de pesquisa.

Assim concluímos esta parte do nosso projeto. No próximo artigo desta série, vamos continuar o desenvolvimento de mais uma parte do nosso aplicativo. Em breve vou disponibilizar todo o código em meu repositório do GitHub.

O projeto está disponível em meu GitHub:  https://github.com/andersonirias/react-native-tutorial.

Um comentário em “Criando o primeiro componente com React Native”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *