PROGRAMAÇÃO DE DISPOSITIVOS MOVEIS - React Native

Prévia do material em texto

Programação para 
Dispositivos Móveis
Prof. Henrique Mota
mota.henrique@gmail.com
Introdução ao React Native
- Permite a criação de aplicativos nativos 
para Android e iOS combinando as 
melhores partes do desenvolvimento 
nativo com o uso do React.
- Usa os mesmos conceitos permitindo a 
criação de interfaces móveis mais ricas.
- Permite criar aplicativos realmente 
nativos e não compromete a 
experiência dos usuários.
- Fornece um conjunto principal de 
componentes nativos independentes da 
plataforma, como View, Text, e Image, 
que são mapeados diretamente para os 
blocos de construção da UI nativa da 
plataforma.
JavaScript: uso de conhecimento prévio em JavaScirpt para o 
desenvolvimento mobile.
Code Sharing: permite compartilhar a maior parte dos código nas 
diferentes plataformas.
Community: comunidade bastante atuante no auxílio aos problemas 
comuns.
Native Components: se necessário a criação de uma funcionalidade nativa 
ainda não criada, é necessário faze-la com código da plataforma específica.
Vantagens e limitações
Cria um projeto sem instalar ou configurar
nenhuma ferramenta para criar código
nativo
expo init nomeprojeto
Usa o “NodeJs”, através do utilitário “npm”,
para instalar o utilitário de linha de
comando
npm install -g expo-cli
const element = <Text>Hello world!</Text>
A sintaxe acima é chamada de jsx (JavaScript XML), uma extensão da 
linguagem JavaScript que permite criar componentes (objetos) com 
uma sintaxe parecida com “xml”.
CONSIDERAÇÕES
- Utilizado para escrita de modelos de objetos.
- Transforma XML em JavaScript, permitindo melhor compreensão de 
como será montado o seu componente.
- Não é interpretado nativamente, necessário uso de um “transpiler” 
(o mais conhecido, BABEL).
https://babeljs.io/repl
https://babeljs.io/repl
ECMAScript 6 / ES6 / ECMAScript 2015
- Especificação de linguagem baseada em scripts.
- Padronizada pela Ecma International.
- Base do JavaScript.
- Especificação complementar, possui retro compatibilidade (ES5 
ou ECMAScript 2009 é suportado pelo ES6).
Funções de Seta (Arrow Function)
- Proposta de diminuição do código e a facilitação da leitura e 
escrita da função.
- Materiais atualizados já incorporam esse tipo de função.
function soma(a,b){
return a + b;
}
var soma = function(a,b) {
return a + b;
}
var soma = (a,b) => {
return a + b;
}
Atribuição Desestruturada (Destructuring Assignment)
- Forma direta de atribuir valore em arrays e/ou objetos a 
variáveis.
const [a,b,c] = [10,20,30]
const [p1, p2] = [{nome: ‘joao’}, {nome: ‘pedro’}]
const {nome} = {nome: ‘joao’, idade: 30}
Gerador de Números 
Randômicos
Estilo, API’s e Componentes
- ActivityIndicator
- Button
- FlatList
- Image
- KeyboardAvoidingView
- ListView
- SafeAreaView
- ScrollView
- Text
- TextInput
- TouchableHighlight
- View
- WebView
- Alert
- Dimensions
- Geolocation
- Settings
- StyleSheets
Estilo
Estilos são definidos em um objeto JSON literal com nomes de 
atributos de estilo semelhantes ao CSS. 
Esse objeto pode ser colocado em linha, direto, na declaração de 
propriedade style; ou 
Pode ser passado para a função StyleSheet.create (StyleObject)
sendo armazenado em uma variável para acesso interno, usando um 
nome de seletor semelhante a uma classe em CSS.
const styles = StyleSheet.create({ 
red: { color: 'red' }, 
big: { fontSize: 30 } 
}); 
<View> 
<Text style={styles.red}>Red</Text> 
<Text style={styles.big}>Big</Text> 
</View> 
<View> 
<Text style={{color: ‘red’}}>Red</Text> 
<Text style={{fontSize: 30}}>Big</Text> 
</View> 
Altura, largura e densidade
- Dispositivos diferentes possuem densidades diferentes.
- Quanto maior a densidade, melhor a aparência dos componentes 
(pixes por espaço).
Baixa densidade Alta densidadeMédia densidade
Altura, largura e densidade
React usa uma unidade de medida chamada DP (Density Independent
Pixel) – uma densidade virtual. 
A maneira mais simples é informando altura e largura no estilo
Espaçamentos (margin e padding)
- Por padrão, os componentes renderizados formam uma caixa 
ocupando toda a largura disponível no dispositivo (strech).
- A altura deste quadrado depende, originalmente, do tamanho do 
conteúdo do componente.
- Use os atributos margin e padding para espaçamento externo e 
interno, respectivamente, referente à caixa do componente.
Efeitos de sombra
React Native possui uma quatro propriedades responsáveis por definir 
sombra sobre os componentes.
- shadowColor: a cor desejada.
- shadowOffset: um objeto com altura e largura.
- shadowOpacity: a opacidade.
- shadowRadius: o quanto a sombra ficará “borrada”.
Altura e Largura
A altura e largura dos componentes determinam seu tamanho de tela.
Tamanho fixo
A maneira mais simples de definir as dimensões de um componente é 
informando sua largura e altura fixas ao estilo. 
Definir dimensões dessa maneira é comum para componentes que 
querem sempre renderizar exatamente no mesmo tamanho, 
independentemente das dimensões da tela.
Flex Dimensions
Use flex no estilo de um componente para que o componente se 
expanda e encolha dinamicamente com base no espaço disponível. 
Flexbox
- Um componente pode especificar o layout de seus filhos usando o 
algoritmo flexbox. 
- Projetado para fornecer layout consistente em dispositivos diferentes.
- Normalmente utilizado com as propriedades flexDirection, alignItems
e justifyContent para obter o layout correto.
- Por padrão, organiza os filhos em colunas podendo ser alterado para 
linha usando a propriedade flexDirection.
A propriedade flex
- A propriedade flex definirá como seus itens serão "preenchidos" sobre 
o espaço disponível ao longo do seu eixo principal. O espaço será 
dividido de acordo com a propriedade flex de cada elemento.
FlexDirection
- A propriedade de estilo flexDirection determina o eixo principal de seu 
layout. Os componentes filhos devem ser organizadas horizontalmente 
(row) ou verticalmente (col). Tem como padrão o alinhamento vertical.
- Valores possíveis: col, row, column-reverse, row-reverse
flexDirection
JustifyContent
- Determina o alinhamento dos componentes filhos no eixo principal do 
container. 
- Pode-se centralizar um filho horizontalmente com flexDirection
definido para “row” ou verticalmente com flexDirection definido para 
“col”.
- Valores possíveis: flex-start, flex-end, center, space-between, space-
arround, space-evenly
justifyContent
AlignItems
- Descreve como alinhar os filhos ao longo do eixo transversal do 
container. Muito semelhante ao justifyContent, mas em vez de aplicar 
ao eixo principal, se aplica ao eixo transversal. 
- Se o eixo primário for “row”, o secundário será “col” e vice-versa.
- Valores possíveis: strech, flex-start, flex-end, center e baseline.
alignItems
AlignSelf
- Possui as mesmas opções que alignItems, mas se aplica apenas ao 
próprio elemento referente a seu pai. 
- Sobrescreve qualquer opção definida pelo pai com alignItems.
FlexWrap
- Definida em containers, controla o que acontece quando os filhos 
excedem o tamanho ao longo do eixo principal. 
- Por padrão, os filhos são forçados a uma única linha. Se o agrupamento 
for permitido, os itens serão agrupados em várias linhas ao longo do 
eixo principal.
- Ao quebrar linhas, o alignContent pode ser usado para especificar 
como as linhas são colocadas no container. 
AlignContent
- Define a distribuição de linhas ao longo do eixo transversal. Isso só tem 
efeito quando os itens são agrupados em várias linhas usando o 
flexWrap.
- Valores possíveis: flex-start, flex-end, strech, center, space-between, 
space-arround, space-evenlyProporções com flexbox
Proporções com flexbox
Custmizando botões
- O componente Button do React Native não possui muitas opções de 
customização.
- A biblioteca traz ainda quatro opções de botões customizáveis 
(TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, 
TouchableWithoutFeedback).
- Escolha uma das opções para criar botões customizados..
Adicionando imagens
• Crie uma pasta chamada assets
no seu projeto e, dentro dela, 
crie uma pasta chamada img.
• Coloque suas imagens nesta 
pasta.
Adicionando imagens
require => caminho relativo ao App
Adicionando imagens
uri => caminho absoluto
Usando o componente ImageBackground
Colocando estilo a sua 
aplicação “Frases do dia”
Criando seus próprios 
componentes
Componentes
• Componentes são “peças” independentes entre si utilizadas para 
representar objetos UI.
• Pode-se usar componentes disponibilizados pelo React ou estendê-los 
e criar componentes próprios.
• Conceitualmente, é uma função JavaScript que aceita entrada de 
dados e retornam elementos React parametrizados por esses dados.
• Os parâmetros de entrada de dados dos componentes são chamados 
de props.
• Podem ser divididos em dois grupos: a) Container components e b) 
Presentational components.
a) Container components: componentes de classe, possuem 
estados e propriedades. Representam um objeto.
b) Presentational components: componentes funcionais, 
representam uma função apenas. Possuem apenas propriedades. 
Não possuem estados.
Props e States
• React gerencia os dados com “state” e “props” – estados e 
propriedades.
• O estado (state) é mutável enquanto a propriedade (props) não (não 
pode ser alterada).
State
• Um estado inicial é definido no componente “root” do App.
• A declaração “state = {}” cria o objeto de estado no construtor da 
classe.
• A seguir, o valor do componente Text é populado fazendo uso dos 
valores armazenados em um state.
• Os dados em um estado são armazenados em um objeto JavaScript.
• Apenas componentes de classe possuem estado.
State
• Como mencionado, o estado é mutável e pode ter seu valor atualizado 
a qualquer momento pelo App.
• A propriedade “onPress” do coponente Button foi utilizada para 
manipular o valor do atributo msg no state do App.
• O código de manipulação do estado foi encapsulado em uma arrow
function.
Props
• Propriedades são utilizadas para passar e recuperar dados dos 
componentes.
Trabalhando com props e 
states
aplicação “Pedra, Papel e 
Tesoura”
Ciclo de vida de componentes
Ciclo de vida de um componente
• Todo componente possui ciclos de vida. São montados em tela, podem 
sofrer alterações e no fim são desmontados. 
• Em cada passo do ciclo de vida de um componente podem ser 
invocados métodos interceptando sua renderização ou captando 
informações desse ciclo.
• São definidos junto à classe do Component.
• Pode ser divido em duas partes: MountingCycle, UpdatingCycle e 
UnMountingCycle.
a) MountingCycle: ciclo de vida de montagem.
b) UpdatingCycle: ciclo de vida de atualização.
c) UnMountingCycle: ciclo de vida de desmontagem.
Ciclo de vida de montagem - MoutingCycle
Representado por quatro métodos automaticamente executados.
• constructor: invocado quando a classe do componente é instanciada. 
Nele podemos receber as propriedades (props) e o estado inicial do 
componente (state).
• componentWillMount: invocado imediatamente antes da 
renderização do componente.
• render: invocado quando necessitamos renderizar um elemento.
• componentDidMount: invocado imediatamente após a renderização
do componente.
Ciclo de vida de atualização - UpdatingCycle
Representado por quatro métodos automaticamente executados.
• componentWillReceiveProps: invocado automaticamente toda vez 
que alguma propriedade do componente for atualizada. Utilizado 
quando o estado do nosso componente é composto por propriedades, 
e dessa forma podemos alterar o estado por esse método.
• shouldComponentUpdate: responsável por determinar se o 
componente deve realizar o render novamente ou não. Recebe as 
novas propriedades e estado como parâmetro
• componentWillUpdate: invocado quando o shouldComponentUpdate
liberou a atualização. Ele realiza a intermediação entre o render 
podendo realizar alguma preparação antes de realiza-lo. Recebe as 
novas propriedades e estado como parâmetro.
• componentDidUpdate: invocado imediatamente após o novo render, 
indicando que o componente foi atualizado com sucesso. Recebe as 
propriedades e estado antigos como parâmetro.
Ciclo de vida de desmontagem - UnmoutingCycle
Representado por quatro métodos automaticamente executados.
• componentWillUnmount: invocado antes de um componente ser 
desmontado.
• componentDidCatch: a partir do React 16 podemos “ouvir“ os erros 
causados durante o ciclo de vida do componente inclusive podendo 
passar esses erros para a View.
• render: invocado quando necessitamos renderizar um elemento.
• componentDidMount: invocado imediatamente após a renderização
do componente.
Navegando entre “scenes”
Navegando entre cenas
• Em um navegador Web, pode-se navegar para páginas diferentes 
usando uma TAG de âncora (<a>). 
• Ao clicar em um link, a URL é enviado para a pilha de histórico do 
navegador.
• Ao pressionar o botão voltar, o navegador exibe o item da parte 
superior da pilha do histórico, portanto, a página ativa é agora a página 
visitada anteriormente.
• O React Native não possui uma pilha de histórico global como um 
navegador Web.
React Native Router Flux
• API de navegação para React-Native; 
• Ajuda a definir rotas em um único ponto central e navegar e se comunicar entre 
diferentes scenes (telas) de maneira fácil;
Objetos do React Native Router Flux
• Router
• Scene
• Tabs
• Stack
• Tabbed Scene
• Drawer
• Modal
• Lightbox
• Actions
• ActionConst
Networking
Networking
• Muitos aplicativos móveis precisam carregar recursos de uma URL 
remota. 
• Pode-se fazer uma solicitação POST para uma API REST ou buscar um 
pedaço de conteúdo estático de outro servidor.
HTTP Request com axios
“axios” é um cliente HTTP baseados em “promisses”. 
a) Suporta a API Promise.
b) Interceptação de Request e Response.
c) Transforma dados de solicitação e resposta.
d) Cancelar requisições.
e) Transformações automáticas para dados JSON.
Trabalhando com 
requisições AJAX
App Catálogo de produtos
Obrigado!