Programação Mobile Coding
Prof. Victor Sotero
Aula 05 – Componentes básicos do React Native
Utilizando ScrollView
• Vamos agora criar um layout capaz de rolar o seu conteúdo
na página;
• Isso é bem interessante principalmente quando temos
conteúdos que excedem o tamanho limite da tela;
• Um exemplo disso é quando precisamos exibir uma lista
longa de itens na tela.
Prof. Victor Sotero
Utilizando ScrollView
• Vamos fazer um teste adicionando quatro Views na tela.
Percebemos que a última View (blue) não vai estar visível.
• Clique aqui para ter acesso ao código
Prof. Victor Sotero
Utilizando ScrollView
• Vamos fazer uns ajustes no código anterior, agora
adicionando o componente ScrollView dentro do import;
• Após isso podemos criar a tag ScrollView e adicionar todas as
Views dentro dela.
• Vamos adicionar também algumas propriedades para trazer
maior riqueza a rolagem da tela.
• Veja aqui como fica a opção de desativar a barra de rolagem
na vertical.
Prof. Victor Sotero
Utilizando ScrollView
• Caso você ache interessante, nós também podemos modificar
a propriedade do ScrollView para funcionar de forma
horizontal.
• Um exemplo disso é aquela rolagem de stories no topo do
Instagram. Você pode passar alguns stories que não quer
visualizar.
• Para isso, precisamos adicionar uma largura nas boxs e após
isso adicionar também a propriedade horizontal={true} na tag
do ScrollView. Clique aqui para ver como fica.
Prof. Victor Sotero
Utilizando Switch
• Vamos utilizar um componente para ativar ou desativar
outros componentes da tela.
• Então na medida que ele for pressionado algum outro
componente deve receber alguma mudança.
• Clique aqui para acessar o arquivo completo.
Prof. Victor Sotero
Utilizando AsyncStorage
• Biblioteca do React Native que oferece uma maneira
assíncrona de armazenar dados persistentes no dispositivo
do usuário;
• Permite que aplicativos salvem dados localmente de forma
eficiente e acessem esses dados em futuras sessões;
• Funciona semelhante a um dicionário (chave e valor).
Prof. Victor Sotero
Por que utilizar?
• Simplicidade: fácil de aprender;
• Persistência de dados: os dados permanecem disponíveis mesmo
após o fechamento do aplicativo;
• Performance: é utilizado para armazenar pequena quantidade de
dados;
• Compatibilidade: é compatível com Android e IOS.
Prof. Victor Sotero
Forma de uso
• Primeiro precisamos instalá-lo no nosso projeto (isso se não
estiver utilizando o Snack Expo);
• npm install @react-native-community/async-storage
• Em seguida podemos importar o mesmo no [Link]
• import AsyncStorage from '@react-native-community/async-
storage’;
• No nosso exemplo vamos utilizar a função para atribuir um
nome em um campo e após fechar o aplicativo esse nome
vai continuar disponível.
Prof. Victor Sotero
Forma de uso
• Precisamos atribuir uma função gravaNome ao botão e
depois dar um “bind” para essa função.
• Pra quem não lembra o bind faz com que seja possível
acessar todas as propriedades do botão para fazermos o
state;
• Crie a função gravaNome;
• Essa função vai pegar o que o usuário digita dentro do input
e atribuir ao state de um Text. A ideia é criar uma lista de
cadastros;
Prof. Victor Sotero
1º Passo – importando o AsyncStorage
Prof. Victor Sotero
2º Passo – Renderizando o app
Prof. Victor Sotero
3º Passo
4º Passo – Construtor de states e função
gravaNome
Prof. Victor Sotero
5º Passo - componentDidMount
Prof. Victor Sotero
6º Passo - componentDidUpdate
Clique para ter acesso ao arquivo completo.
Prof. Victor Sotero