Reagir Native Tutorial – Construindo Sua Primeira Aplicação iOS Com JavaScript (Parte 1)

• 22 min read
• Mobile,JavaScript,Apps,iOS,React,Swift
• Salvado para leitura offline
• Partilhar no Twitter, LinkedIn

A idéia de construir aplicativos móveis com JavaScript não é nova. Já vimos frameworks como Ionic e PhoneGap assumirem o desafio e, até certo ponto, conseguirem ganhar uma boa quantidade de suporte do desenvolvedor e da comunidade. Para a parte 2 do tutorial.

Estes frameworks e toda a idéia de construir aplicativos móveis com JavaScript nunca me atraíram, no entanto. Eu sempre pensei, por que não apenas aprender Swift/Objective-C ou Java e construir aplicativos reais? Isso definitivamente requer uma quantidade significativa de aprendizado, mas não é isso que nós desenvolvedores fazemos e devemos ser bons nisso? Aprender rapidamente novas linguagens e frameworks? Qual é o objetivo, então? Para mim, as vantagens nunca superaram as dúvidas.

até ler este artigo de Chalk + Chisel, a seguinte linha em particular:

Até alguns meses, e estou confiante o suficiente para dizer que posso nunca mais escrever uma aplicação iOS em Objective-C ou Swift.

O quê? Você está, tipo… sério?

>

Leitura adicional no SmashingMag:

• Por que você deve considerar React Native para o seu aplicativo móvel
• Renderização do lado do servidor com React, Node and Express
• Como escalar aplicações React
• Internacionalizando aplicações React

Ler uma afirmação tão ousada me fez ir em frente e dar uma chance ao React Native. Por que não? Eu já estava usando o React e adorando-o. React Native é tão parecido com React (duh!), você vai se sentir em casa se você já é um desenvolvedor de React. Mesmo que você não seja, React por sorte é muito fácil de envolver a cabeça.

What We Will Be Building

I’ve never had luck finding the perfect wallpaper app for my iPhone in the App store. Na área de trabalho, Unsplash é a loja one-stop shop para todas as minhas necessidades de papel de parede. Ao telefone: Configurações → Wallpaper 🙁

Então, ao contrário de alguns outros tutoriais onde você constrói contadores e mal os usa, neste tutorial, juntos construiremos um aplicativo que vai puxar papéis de parede aleatórios e deslumbrantes de Unsplash, exibi-los de uma forma esteticamente agradável, e permitir que você salve papéis de parede de sua escolha para o Camera Roll. Acredite em mim, eu me vi usando este aplicativo mais do que eu pensava inicialmente. Mesmo que no final deste tutorial React Native falhe em impressioná-lo, você ainda acabará tendo um aplicativo de papel de parede muito legal. Não é ótimo?

Antes de começarmos, aqui estão algumas coisas que você deve estar familiarizado:

1. JavaScript
2. algumas funcionalidades do ES2015, nomeadamente Classes, Funções de Seta, Desestruturação e Strings de Modelos
3. Mac OS X Terminal
4. CSS (yup!)
5. Reagir (opcional)

Mais uma coisa. Como o título diz claramente, neste tutorial nós estaremos construindo uma aplicação iOS. O que requer, sim, mesmo com React Native, que você esteja em um Mac. Com React Native você pode definitivamente construir aplicativos Android em Windows e Linux, mas não em iOS. Portanto, daqui em diante, este tutorial assume que você está executando Mac OS X.

Takeaways

No final deste tutorial, você estará familiarizado o suficiente com React Native para começar a escrever seus próprios aplicativos imediatamente. Vamos rever a configuração de um projeto no Xcode, instalando módulos e componentes de terceiros, ligando bibliotecas, estilo com flexbox, criando um ouvinte de gestos personalizado e muitas outras coisas.

Se você não tiver usado React antes, este tutorial também irá configurá-lo com React. React é a nova biblioteca quente JS com muito potencial, e não a vejo a ir a lado nenhum num futuro próximo.

Este tutorial foi dividido em duas partes para sua conveniência. Cada parte tem cinco seções. Em cada seção nós atingimos um objetivo que nos leva um passo mais perto de terminar nossa aplicação. Eu aconselharia que uma vez iniciado você deveria terminar toda essa seção de uma só vez já que elas são curtas, e assim você conhecerá todo o conceito que estou tentando introduzir sem quebrar o seu fluxo.

Para sua referência, o código final do aplicativo que estamos construindo pode ser encontrado nesta repo do GitHub.

Configurando um Projeto Nativo de Reação em Branco

Certifique-se de ter o Xcode 7.0 ou superior instalado. ele pode ser baixado gratuitamente da App Store.

Chances são (se você é um desenvolvedor web e está lendo isso em 2016) você já tem o Node instalado. Mas se não for esse o caso, vá em frente e instale o Node também. Outra ferramenta importante que vamos precisar é o npm. O Node vem com o npm instalado; você precisará atualizá-lo, no entanto, pois ele é atualizado com bastante frequência. Siga este guia de instalação.

É tudo o que precisaremos. Agora, a partir da execução do terminal npm install -g react-native-cli. Isto irá instalar o React Native globalmente no seu sistema.

Se tudo parecer novo demais para você, ou se você estiver apenas se sentindo um pouco perdido em todo o processo de instalação, o guia oficial de inicialização está sempre lá para ajudá-lo.

Enconte uma boa localização no seu computador onde você gostaria de configurar o projeto. Uma vez lá, a partir do terminal execute react-native init SplashWalls.

Isto deve ir buscar e instalar todos os módulos necessários e criar uma nova pasta chamada SplashWalls.

Uma grande coisa sobre o React Native é que você pode escrever ambos os aplicativos Android e iOS junto com a maioria do código JavaScript compartilhado entre eles. Dentro da pasta recém criada você encontrará dois arquivos .js: index.android.js e index.ios.js – os nomes são auto-explicativos. Se você está construindo um aplicativo iOS você vai trabalhar com index.ios.js; com index.android.js para um aplicativo Android; e ambos para, você sabe, ambas as plataformas.

Desde que estamos construindo um aplicativo iOS, para o bem deste tutorial e para manter as coisas limpas vamos nos livrar do index.android.js e da pasta android por completo. index.ios.js é o arquivo com o qual estaremos trabalhando. Este é o arquivo que é executado pela primeira vez quando a aplicação é lançada.

Next, vá para a pasta ios e acione o SplashWalls.xcodeproj.

Você deve ver uma janela de Xcode como a mostrada abaixo.

Note o aviso na imagem acima que diz “Nenhum perfil de provisionamento correspondente encontrado”. Vamos corrigir isto.

Primeiro, altere o texto no campo Bundle Identifier para algo personalizado. Você precisa ter certeza de que o que quer que você digite segue a convenção DNS reversa, na qual o nome de domínio de sua organização é revertido e sufixado com identificadores adicionais. Esta convenção ajuda a distinguir sua aplicação de outras em um dispositivo e na App Store. Eu usarei com.nashvail.me.tutorial.SplashWalls; simplesmente substitua seu nome no lugar do meu se você não conseguir inventar algo.

Próximo, escolha seu nome na dropdown da equipe.

Clique em Fix Issue.

Até agora, observe a seção Deployment Info. Ela tem algumas configurações padrão aplicadas.

Altere as configurações para combinar com o seguinte:

Faremos o aplicativo apenas com retrato e esconderemos a barra de status também.

Vá em frente e aperte o botão Run no canto superior esquerdo no Xcode. Fazendo isso, abriremos uma janela de terminal como a mostrada abaixo. A transformação inicial leva um pouco de tempo.

Após feito, você deve ver a seguinte saída no simulador:

E com isto completamos nossa primeira seção.

Ir buscar dados de papel de parede da API

Nesta seção faremos chamadas para a API Unsplash.it pedindo dados de papel de parede. Mas antes de começarmos a fazer todo o trabalho interessante, há algumas configurações a serem feitas.

Switching To ES2015 Class Syntax

Ao abrir o arquivo index.ios.js você vai notar algum código inicial já presente. Este é o código responsável pela saída no simulador (imagem anterior).

Inside index.ios.js repare na linha de código que diz var SplashWalls = React.createClass({ … }). Nós vamos modificar isto. Vamos usar a sintaxe class do ES2015 para este tutorial.

Nós, desenvolvedores, somos almas curiosas. Eu sei que você deve estar perguntando, Por quê? Porquê mudar para a sintaxe class?

Tudo se resume a uma preferência pessoal. Eu já programei extensivamente em linguagens orientadas a objetos antes e class apenas me sinto mais familiar. Além disso, ao usar class você também escolhe manter o código um pouco mais limpo já que não precisa adicionar vírgulas após cada declaração de método.

No lado oposto, quando você escolhe class você não obtém recursos como autobinding ou acesso ao método isMounted, o que não é uma coisa ruim, já que você não vai se encontrar perdido ao não usar estes.

Seja qual for o caminho, afinal você está criando uma classe. O meu conselho seria usar class. É uma nova funcionalidade e mais cedo ou mais tarde você vai se encontrar usando o ES2015. E se você estiver seguindo este tutorial, você terá que usar class – você realmente não tem escolha!

Para saber mais sobre isso, considere ler “React.Component vs React.createClass” de Naman Goel e Zach Silveira.

Após ter feito as alterações necessárias, o bloco de código deve agora ser como mostrado:

class SplashWalls extends Component{ render() { return ( . <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> .</View> ); }};

Para as pessoas novas a React, o código dentro de return parens pode parecer um pouco maluco, mas não é ciência de foguetes, apenas a boa e velha sintaxe do tipo XML chamada JSX. Leia mais sobre ele aqui.

Comparado com a implementação anterior a class, a sintaxe var desapareceu. Também render: function(){… é agora apenas render(){….

Hey! Mas o que é isso Component que você está estendendo? E você estaria certo em perguntar. Se você executasse o projeto em Xcode agora, você teria um erro dizendo que Component não está definido. Você pode fazer duas coisas aqui: substituir Component por React.Component; ou adicionar uma nova linha dentro do bloco (mostrado abaixo) no topo do arquivo.

Neste e em exemplos posteriores de código, eu cerco as novas linhas com // para que seja mais fácil para você comparar o código que você está escrevendo com o que é mostrado aqui. Apenas certifique-se de que se você copiar o código das amostras você não acaba copiando // junto com o código real. Como o JSX não suporta /***/ comentários, você acabará travando o aplicativo se os tiver incluído no seu código JSX.

var { AppRegistry, StyleSheet, Tex .t, View, /***/ Component /***/} = React;

Tudo o que o bloco de código acima faz é salvar alguns toques de tecla. Por exemplo, se não incluísse estas linhas de código no topo, teria de escrever React.AppRegistry em vez de apenas AppRegistry cada vez que o quisesse fazer. Bastante fixe! Não é? OK, nem por isso.

Vá de volta ao Xcode e execute o projecto mais uma vez para se certificar de que não partiu nada no processo.

Tudo o que é bom? Ótimo! Vamos avançar.

Na classe SplashWalls, a primeira coisa que precisamos de fazer é adicionar um construtor. Dentro do construtor, vamos inicializar nossas variáveis de estado. As únicas duas variáveis de estado que vamos precisar neste ponto são um array – wallsJSON – que vai armazenar todos os dados JSON obtidos da API, e isLoading, que é uma variável booleana, o que significa que ela vai manter um valor de verdadeiro ou falso. Tendo esta variável de estado nos ajudará a mostrar e ocultar a tela de carregamento dependendo se os dados foram carregados ou não.

Dentro da classe SplashWalls, adicione o constructor como mostrado abaixo.

class SplashWalls extends Component{/***/ constructor(props) { super(props); this.state = { wallsJSON: , isLoading: true }; }/***/...}

Próximo, vamos definir um método fetchWallsJSON, que, bem, faz o que ele diz. Deixe um par de linhas abaixo da trava de fechamento do construtor e adicione as seguintes linhas de código:

fetchWallsJSON() { console.log('Wallpapers will be fetched');}

Gostaríamos que esta função disparasse uma vez que nosso componente tenha sido montado com sucesso. Adicione o método componentDidMount. A maioria dos métodos descritos vão dentro da classe SplashWalls – Não esquecerei de mencionar quando eles não forem.

componentDidMount é um método de ciclo de vida que é disparado imediatamente após a primeira renderização ocorrer.

Aqui está uma boa explicação de todos os métodos do ciclo de vida do componente React. Basta lembrar que como estamos usando a mais nova sintaxe class, podemos omitir o método getInitialState. Ele é substituído por uma declaração de variável this.state no método constructor.

É uma boa idéia organizar os métodos dentro da sua classe de uma maneira limpa. Eu gosto de manter todos os métodos personalizados separados dos métodos do ciclo de vida. Você também deveria.

Vamos declarar componentDidMount:

componentDidMount() { this.fetchWallsJSON();}

Note que dentro do método fetchWallsJSON temos uma mensagem registrada no console – mas onde está o console? Segure firmemente.

>

Certifique-se que tem a janela do Simulador seleccionada e prima Cmd + Control + Z. No menu que aparece, seleccione Debug in Chrome. Isto abre uma nova aba. Enquanto estiver na mesma aba, vá até Dev Tools (Option + Cmd + J). No console você encontrará a mensagem “Wallpapers will be fetched”.

Escreva o depurador aberto por enquanto. Visite unsplash.it/lista em uma nova aba. Você deve ver toda a viewport preenchida com um array JSON. Cada elemento do array é um objeto JavaScript que contém dados para um único papel de parede. Estes são os dados que estaremos filtrando e pegando papéis de parede aleatórios de.

Deixe-nos primeiro fazer fetchWallsJSON fazer mais do que apenas registrar uma mensagem no console.

 fetchWallsJSON() { /***/ var url = 'http://unsplash.it/list'; fetch(url) .then( response => response.json() ) .then( jsonData => { console.log(jsonData); }) .catch( error => console.log('Fetch error ' + error) ); /***/ }

Refrescar o simulador (Cmd + R) ou, melhor, habilitar a recarga ao vivo pressionando Cmd + Ctrl + Z e escolhendo Habilitar recarga ao vivo. Ao activar a recarga ao vivo, não tem de actualizar o simulador cada vez que faz uma alteração ao seu código. Basta salvar no IDE e o simulador será automaticamente atualizado. Se você já desenvolveu uma aplicação em Xcode ou Android Studio antes, você vai achar esta funcionalidade particularmente incrível, pois você não precisa apertar o botão Run e recompilar a aplicação toda vez que você fizer uma mudança. Estes pequenos bits tornam o React Native muito mais apelativo.

Em refresh, depois de esperar alguns segundos, você deve ver a seguinte saída na consola:

Good, agora somos capazes de ir buscar os dados JSON dos papéis de parede da API. Como você deve ter notado, há um pequeno atraso antes que os dados sejam registrados no console. Isto é porque em segundo plano os dados estão sendo baixados dos servidores, o que leva tempo.

Esta parece ser a hora perfeita para adicionar uma tela de carregamento.

Adicionando uma tela de carregamento

Ao final desta seção teremos uma tela de carregamento exibida enquanto os dados JSON estão sendo descarregados.

Primeiro, livre-se de tudo de dentro SplashWall método da classe render e adicione estas linhas de código:

 render() { var {isLoading} = this.state; if(isLoading) return this.renderLoadingMessage(); else return this.renderResults(); }

Temos dois novos métodos. Vamos declará-los também, já que estamos nisso

 renderLoadingMessage() { return ( . <View style={styles.loadingContainer}> <ActivityIndicatorIOS animating={true} color={'#fff'} size={'small'} style={{margin: 15}} /> <Text style={{color: '#fff'}}>Contacting Unsplash</Text> .</View> ); } renderResults() { return ( . <View> <Text> Data loaded </Text> .</View> ); }

Dependente do valor que a variável de estado isLoading possuir, dois componentes diferentes View serão renderizados. Se isLoading for verdadeiro, mostramos um spinner de carregamento seguido do texto “Contacting Unsplash”; quando isLoading é falso (implicando que os dados foram carregados) mostramos os resultados, que a partir de agora é apenas um componente Text que diz “Data loaded”.

Mas falta-nos algo aqui: não vamos alterar o valor de isLoading uma vez que os nossos dados tenham sido descarregados. Vamos fazer exatamente isso. Vá para o método fetchWallsJSON e abaixo da linha que registra jsonData no console, adicione uma linha extra para atualizar isLoading.

 fetchWallsJSON() { var url = 'http://unsplash.it/list'; fetch(url) .then( response => response.json() ) .then( jsonData => { console.log(jsonData); /***/ this.setState({isLoading: false}); //update isLoading /***/ }) .catch( error => console.log('Fetch error ' + error) ); }

setState é um dos métodos da API do React’s Component. É o método primário usado para acionar as atualizações da IU.

Notice, em renderLoadingMessage temos um novo componente: ActivityIndicatorIOS (colocado de forma simples, o spinner). Precisamos importar este componente antes de podermos usá-lo. Lembra-se quando importamos Component onde salvamos alguns toques de tecla? Precisamos fazer exatamente isso.

var { AppRegistry, StyleSheet, Tex .t, View, Component,/***/ ActivityIndicatorIOS // Add new component/***/} = React;

Precisamos fazer mais uma coisa antes de podermos ver os resultados. Note que o View contendo ActivityIndicatorIOS tem o estilo definido para styles.loadingContainer. Vamos precisar definir isso. Encontre a linha que diz var styles = StyleSheet.create({…. Aqui você vai ver que existem alguns estilos já definidos. Estes estilos são responsáveis por estilizar a mensagem inicial “Welcome to React Native” no simulador. Livre-se de todos os estilos predefinidos e adicione apenas um para o loadingContainer como mostrado.

var styles = StyleSheet.create({/***/ loadingContainer: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }/***/});

Todos os estilos que você aplica em componentes no React Native são declarados da maneira mostrada acima. StyleSheet.create assume um objeto JavaScript contendo estilos como argumento e então os estilos podem ser acessados usando o operador dot. Como nós aplicamos o estilo no wrapper View da seguinte maneira.

<View style={styles.loadingContainer}/>

Você também pode declarar estilos inline:

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }} />

Isso torna nosso código um pouco desordenado, no entanto. Quando você tem um número de estilos aplicados a um componente, é sempre uma boa idéia armazená-los em uma variável.

Os estilos se parecem muito com CSS, não é mesmo? Sabe porquê? Porque é suposto serem – não são nada diferentes. Isto torna o React Native ainda mais fácil para os desenvolvedores web. Quando você constrói um aplicativo em um IDE dedicado (Xcode, por exemplo), você recebe um StoryBoard para arrastar diretamente e posicionar elementos de IU como botões e rótulos na tela. Você não pode fazer isso no React Native, o que – acredite – não é nada mal.

React Native faz uso pesado do flexbox para posicionar elementos na tela. Uma vez que você esteja confortável com o flexbox, posicionar elementos ao redor é uma brisa. Em qualquer dia eu vou preferir o layout do flexbox ao invés do StoryBoard, ponto final. É apenas uma daquelas coisas que você tem que tentar dizer a diferença.

Guardar as mudanças, vá até o simulador e pressione Cmd + R. Você deve ver a tela de carregamento.

Após alguns segundos você deve ver a tela que diz “Dados carregados”.

Filtragem e selecção de papéis de parede aleatórios

Nesta secção iremos filtrar através dos dados do papel de parede e seleccionar o número especificado de papéis de parede aleatórios.

Esta secção irá focar-se mais no JavaScript do que no React Native. Iremos criar um novo módulo (arquivo) que irá lidar com a geração de números aleatórios. Se os módulos em JavaScript soarem novos para você, considere ir através dos módulos Node.js docs.

Vá para a linha acima da declaração class e declare uma nova constante que irá dizer ao aplicativo o número de papéis de parede aleatórios a serem escolhidos; vamos fazer cinco.

const NUM_WALLPAPERS = 5;

Agora vamos criar um módulo que irá nos ajudar com a geração de números aleatórios. Este módulo irá exportar duas funções. Vamos olhar para cada uma delas.

• uniqueRandomNumbers: Esta função aceita três argumentos. O primeiro é o número de números aleatórios que devem ser retornados. Os dois argumentos seguintes definem o intervalo no qual os números aleatórios devem ser retornados, ou seja, lowerLimit e upperLimit. Se você chamar a função uniqueRandomNumbers(5, 10, 20) você receberá um array de cinco números aleatórios únicos entre 10 e 20.
• randomNumberInRange: Esta função aceita dois argumentos que definem o limite inferior e superior, respectivamente, entre os quais um único número aleatório é retornado. Por exemplo, se você chamar randomNumberInRange(2, 10) um único número aleatório entre 2 e 10 é retornado.

Poderíamos ter fundido as duas funções em uma só, mas como sou um pregador de código de boa qualidade, eu sigo o princípio da responsabilidade única. SRP afirma, mais ou menos, que cada função deve fazer uma coisa bem e não fazer mais nada. Seguir bons princípios de programação salva você de uma série de dores de cabeça futuras.

Criar um novo arquivo no mesmo diretório que index.ios.js. Se quisermos, podemos colocar estas funções no index.ios.js, mas pense nisso: para o tipo de propósito que este novo ficheiro serve, podemos simplesmente copiar este ficheiro e colá-lo em qualquer um dos nossos novos projectos que requeira a geração de números aleatórios e usá-lo a partir daí. Além disso, isto mantém o código dentro do index.ios.js muito mais limpo.

Chamaremos o arquivo RandManager.js. Mostrado abaixo está o seu conteúdo:

module.exports = { uniqueRandomNumbers(numRandomNumbers, lowerLimit, upperLimit) { var uniqueNumbers = ; while( uniqueNumbers.length != numRandomNumbers ) { var currentRandomNumber = this.randomNumberInRange(lowerLimit, upperLimit); if( uniqueNumbers.indexOf(currentRandomNumber) === -1 ) uniqueNumbers.push(currentRandomNumber); } return uniqueNumbers; }, randomNumberInRange(lowerLimit, upperLimit) { return Math.floor( Math.random() * (1 + upperLimit - lowerLimit) ) + lowerLimit; }};

Não se esqueça de requerer o módulo RandManager em index.ios.js. Basta adicionar: var RandManager = require('./RandManager.js'); abaixo da declaração use strict;. Quando tivermos RandManager pronto, faremos as seguintes alterações na nossa fetchWallsJSON função:

fetchWallsJSON() { var url = 'http://unsplash.it/list'; fetch(url) .then( response => response.json() ) .then( jsonData => { /***/ var randomIds = RandManager.uniqueRandomNumbers(NUM_WALLPAPERS, 0, jsonData.length); var walls = ; randomIds.forEach(randomId => { walls.push(jsonData); }); this.setState({ isLoading: false, wallsJSON: .concat(walls) }); /***/ }) .catch( error => console.log('JSON Fetch error : ' + error) );}

Após termos o jsonData, recuperamos números aleatórios únicos de RandManager e armazenamo-los no array de randomIds. Em seguida, fazemos um loop através deste array, pegando objetos de dados de papel de parede presentes em um particular randomId e armazenando-os em walls array.

Então atualizamos nossas variáveis de estado: isLoading para false como os dados foram baixados; e wallsJSON para walls.

Para ver os resultados, modifique a função renderResults para se parecer com o seguinte:

renderResults() {/***/ var {wallsJSON, isLoading} = this.state; if( !isLoading ) { return ( . <View> {wallsJSON.map((wallpaper, index) => { return( <Text key={index}> {wallpaper.id} </Text> ); })} .</View> ); }/***/}

Na primeira linha dentro de renderResults estamos usando uma nova função ES2015 chamada desestruturação. Com a desestruturação conseguimos substituir:

var wallsJSON = this.state.wallsJSON, isLoading = this.state.isLoading;

with:

var {wallsJSON, isLoading} = this.state;

ES2015 é muito legal, estou dizendo a você.

Então, dentro do View fazemos um loop através dos dados recuperados wallsJSON usando o mapa. Sempre que você quiser fazer um loop através de uma coleção no JSX, você usa o map build.

Também, ao fazer um loop através de um array ou coleção e renderizar um componente, React Native requer que você dê um key, uma identificação única para cada um dos componentes filhos que renderiza. É por isso que você vê uma propriedade chave em

<Text key={index}>

Após a atualização do simulador…

Vemos cinco IDs diferentes de papel de parede aleatórios sendo exibidos. Mude {wallpaper.id} para {wallpaper.author} em renderResults e você deve ver algo como o seguinte.

Great! Agora estamos a falar. Agora podemos pegar e filtrar o número especificado (cinco, neste caso) de papéis de parede aleatórios da API. Parece que estamos prontos para esta seção. Alto cinco!

Adicionando o componente Swiper

Nesta seção vamos incluir um componente Swiper na nossa aplicação. Este componente nos permitirá exibir papéis de parede em um container swipeable.

Você aprenderá como incluir um componente React Native de terceiros em nosso aplicativo. React Native tem um incrível suporte da comunidade e no GitHub existe uma rica coleção de todos os tipos de componentes de terceiros.

Para nossos propósitos nós usaremos o componente ret-native-swiper.

Chegar ao diretório do projeto no terminal e executar o seguinte comando:

npm install react-native-swiper --save

Agora requer o componente Swiper: adicionar var Swiper = require('react-native-swiper'); abaixo de use strict.

Vamos experimentar o nosso recém incluído Swiper componente.

Ir para o método renderResults e substituir View por Swiper. Depois de fazer isso, o seu renderResults deve ficar assim:

renderResults() { var {wallsJSON, isLoading} = this.state; if( !isLoading ) { return ( /***/ <Swiper> /***/ {wallsJSON.map((wallpaper, index) => { return( <Text key={index}> {wallpaper.author} </Text> ); })} /***/ </Swiper> /***/ ); }}

Fazendo isso resulta no seguinte:

Em vez de mostrar os nomes dos autores como uma lista, nós os colocamos em um swiper que dá a cada papel de parede sua própria tela, que nós podemos passar através. Precisamos fazer mais algumas coisas aqui: adicione os seguintes atributos ao componente Swiper como mostrado.

<Swiper/***/dot.{<View style={{backgroundColor:'rgba(255,255,255,.4)', width: 8, height: 8,borderRadius: 10, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}activeDot.{<View style={{backgroundColor: '#fff', width: 13, height: 13, borderRadius: 7, marginLeft: 7, marginRight: 7}} />}loop={false} {wallsJSON.map((wallpaper, index) => { return( <Text key={index}> {wallpaper.author} </Text> ); })} </Swiper>

Fazendo isto:

• Estiliza os pontos de paginação (torna os pontos azuis que você vê na parte inferior da imagem anterior brancos e maiores).
• Desabilita o swiping contínuo (loop={false}). Ou seja, uma vez que você chega à página final e desliza mais, você não é levado de volta ao primeiro papel de parede.
• Fogo de vontade onMomentumScrollEnd (o qual nós estaremos aprofundando na próxima parte do tutorial) cada vez que terminarmos de deslizar.

Com isso, chegamos ao fim da primeira parte. Que viagem!

Para resumir o tutorial React Native

• Na primeira seção você aprendeu como configurar um projeto React Native em branco no Xcode.
• Na segunda seção nós falamos sobre as classes ES2015 e porque você deve preferir a nova sintaxe junto com a criação de variáveis de estado e pegar dados brutos da API.
• Na terceira seção nós revisamos dinamicamente a aplicação baseada no valor que uma variável de estado possui. Além disso, fizemos um posicionamento leve do flexbox.
• Na quarta seção criamos um novo módulo para lidar com a geração de números aleatórios e também passamos a incluí-lo no arquivo principal.
• Na última seção adicionamos o primeiro componente de terceiros ao nosso aplicativo, que foi um cakewalk, graças ao Node.

Up até agora, para ser honesto, nosso aplicativo não parece muito especial. Eu sei. Na próxima parte vamos adicionar imagens reais ao invés de apenas nomes de autores. Não só isso, estaremos fazendo algumas coisas avançadas como criar um detector de dupla tatuagem personalizado usando a API PanHandler. Você aprenderá como ligar uma biblioteca em Xcode e conceder o acesso do seu aplicativo ao Camera Roll. Também vamos criar o nosso próprio componente e muito mais. Parece interessante? Vejo você na próxima parte.

(da, ml, og, il)