title: 'Bota Impermeável Bull Terrier Alpina Dry – Masculina',

Anderson Irias - 02/11/2020

Estamos no quarto artigo da nossa série de artigos sobre React Native. Neste artigo vamos finalizar a nossa UI (Interface do Usuário), criando o card é listagem para exibirmos os produtos que estão em oferta. Relembrando estamos desenvolvendo um aplicativo que lista ofertas, promoções e desconto em produtos,  pegando essas informações de uma API. Veja o terceiro artigo da série onde criamos a primeira parte da UI. Criando o primeiro componente com React Native.

Vamos criar dois componentes: PromotionCard e PromotionsList. 

• PromotionCard: É o card onde será apresentado o produto que está em promoção, seu preço e o link para visualizar o mesmo.
• PromotionsList: Será um scroll que conterá os cards com os produtos.

Abra seu editor de códigos, crie o diretório PromotionCard dentro do diretório components. Depois crie os arquivos index.js e styles.js.

No componente PromotionCard, vamos utilizar os componentes do React Native:

• View
• Image
• Text
• TouchableHighlight
• Linking oferece uma interface geral para interagir com links de aplicativos de entrada e saída. Estamos utilizando este componente, para quando o usuário clicar no botão: Ir para loja, o link da loja ser aberto no navegador do smartphone.

Eu já falei mais sobre esses componentes no artigo anterior, assim para não ser repetitivo somente falei sobre o componente Linking.

Por fim nosso componente PromotionCard ficará do seguinte modo:

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

class PromotionCard extends Component { constructor(props) { super(props) }

render() { return( <View style={ Styles.centeredView }> <View style={ Styles.cardView }> <Image style={ Styles.promotionImage } source={ {uri: this.props.data.imageUri} } /> <View style={ Styles.descriptionText }> <Text style={ Styles.titleText }>{ this.props.data.title } <Text style={ Styles.priceText }>{ this.props.data.price } <TouchableHighlight style={ Styles.linkButton } onPress={ async () => { const supported = await Linking.canOpenURL(this.props.data.linkUrl); if (supported) { await Linking.openURL(this.props.data.linkUrl); } }}

<Text style={ Styles.textLinkButton }>Ir para loja

) } }

export default PromotionCard

Cole o conteúdo acima no arquivo components/PromotionCard/index.js.  A estilização do componente fica em um arquivo separado no styles.js.

import { StyleSheet } from 'react-native'

export default StyleSheet.create({ centeredView: { flex: 1, alignItems: "center", marginTop: 30 }, cardView: { flexDirection: 'row', justifyContent: 'space-between', margin: 5, backgroundColor: "white", borderRadius: 15, padding: 15, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, width: '94%', minHeight: 200 }, promotionImage: { width: '50%' }, descriptionText: { flex: 1 }, titleText: { color: "black", fontWeight: "bold", fontSize: 16, margin: 5 }, priceText: { color: "#e73931", fontWeight: "bold", fontSize: 16, margin: 5 }, linkButton: { backgroundColor: "#2196F3", borderRadius: 15, padding: 10, elevation: 2, margin: 5 }, textLinkButton: { color: "#FFFFFF", textAlign: 'center' } })

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

Agora vamos criar nosso componente PromotionsList. Crie o diretório PromotionsList dentro do diretório components. Depois crie os arquivos index.js e styles.js.

No componente PromotionsList vamos utilizar o componente do React Native FlatList. Também vamos utilizar nosso componente recém criado PromotionCard. 

• FlatList e uma interface de alto desempenho para renderizar listas simples e básicas, com suporte para os recursos mais úteis.
• PromotionCard componente que criamos anteriormente ele organiza os elementos da produção em um card para uma boa visualização pelo usuário.

Nosso componente PromotionsList ficará do seguinte modo:

import React, { Component } from 'react' import { FlatList } from 'react-native' import Styles from './styles' import PromotionCard from './../PromotionCard'

class PromotionsList extends Component { constructor(props) { super(props) this.state = { data: [ { id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', price: 'De: R$399,99 - Por: R$299,99', imageUri: 'https://irias.com.br/blog/wp-content/uploads/2020/11/bota-impermeavel-bull-terrier-alpina-dry-masculina-img-150x150-1.jpg', linkUrl: 'https://www.centauro.com.br/bota-bull-terrier-alpina-dry-masculina-855804.html' } ] } }

render() { return( <FlatList style={ Styles.promotionsList } data={ this.state.data } renderItem={ ({ item }) => ( <PromotionCard data={ item } /> )} keyExtractor={ item => item.id } /> ) } }

export default PromotionsList

Cole o conteúdo acima no arquivo components/PromotionsList/index.js.  A estilização do componente fica em um arquivo separado no styles.js.

import { StyleSheet } from 'react-native'

export default StyleSheet.create({ promotionsList: { minHeight: '90%', maxHeight: '90%', backgroundColor: '#ffffff' } })

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

Agora para concluir mais esta etapa, vamos atualizar nosso arquivo App.js para incluir nossos novos componentes criados.

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

import Header from './components/Header' import PromotionsList from './components/PromotionsList'

const App: () => React$Node = () => { return (