Navegação, Estilização e Animações no React Native

Prévia do material em texto

Resumo – Navegação, Estilização e Animações 
no React Native
O conteúdo aborda recursos importantes do React Native relacionados à:
• componentes de lista; 
• navegação entre telas; 
• estilização; 
• animações. 
Esses recursos são fundamentais para criar interfaces modernas, organizadas e interativas em 
aplicativos mobile.
1. Componentes de Lista no React Native
O React Native oferece componentes específicos para exibição eficiente de listas de dados.
FlatList
O FlatList é utilizado para:
• renderizar listas de forma otimizada; 
• melhorar desempenho; 
• carregar apenas elementos visíveis na tela. 
Exemplo de uso:
 item.id}
/>
Recursos importantes do FlatList
extraData
Permite atualizar automaticamente a lista quando os dados mudam.
Pode receber:
• state; 
• métodos; 
• variáveis de controle. 
onEndReached
Executa ações quando o usuário chega ao final da lista.
Muito usado para:
• carregamento infinito; 
• redes sociais; 
• paginação de dados. 
onEndReachedThreshold
Define o ponto em que o carregamento será acionado.
2. VirtualizedList
O VirtualizedList é a implementação base dos componentes:
• FlatList; 
• SectionList. 
Características:
• otimizado para grandes volumes de dados; 
• trabalha com renderização virtual; 
• melhora performance. 
É indicado para:
• listas extensas; 
• dados imutáveis; 
• aplicações com muitos registros. 
3. Navegação em Aplicativos Mobile
Aplicativos React Native utilizam navegação entre telas semelhante aos websites.
Termos comuns:
• screens; 
• pages; 
• rotas; 
• histórico de navegação. 
A navegação é implementada com:
• React Navigation; 
• NavigationContainer. 
4. Stack Navigation
O Stack Navigation funciona como uma pilha de telas.
Cada nova tela:
• fica sobre a anterior; 
• mantém histórico de navegação. 
Características
• navegação semelhante a navegadores web; 
• botão de voltar automático; 
• gerenciamento de histórico. 
Componentes principais
NavigationContainer
Container principal da navegação.
createNativeStackNavigator
Cria o sistema de pilha.
Stack.Screen
Define as telas disponíveis.
Exemplo:
Navegação entre telas
Utiliza:
navigation.navigate('About')
Para voltar:
navigation.push('Home')
5. Tab Navigation
O Tab Navigation utiliza:
• abas; 
• botões inferiores; 
• navegação por guias. 
Biblioteca:
@react-navigation/bottom-tabs
Características
• navegação rápida; 
• menus inferiores; 
• possibilidade de usar ícones. 
Componentes:
• Tab.Navigator; 
• Tab.Screen. 
6. Drawer Navigation
O Drawer Navigation cria um menu lateral oculto.
O menu aparece:
• arrastando a tela; 
• clicando no menu hambúrguer. 
Biblioteca:
@react-navigation/drawer
Recursos
• menus laterais; 
• abertura e fechamento programático; 
• suporte a múltiplas telas. 
Métodos:
navigation.openDrawer()
navigation.closeDrawer()
7. Combinação de Navegações
Os modelos:
• Stack; 
• Tab; 
• Drawer; 
podem ser combinados no mesmo aplicativo.
Regra importante:
• só pode existir um NavigationContainer. 
A combinação é útil em:
• aplicativos grandes; 
• múltiplas telas; 
• sistemas complexos. 
8. Estilização no React Native
A estilização utiliza:
• JavaScript; 
• propriedade style. 
As propriedades seguem o padrão:
• camelCase. 
Exemplo:
marginTop
backgroundColor
9. Formas de Estilização
Inline
Estilo diretamente no componente.
Exemplo:
Interna
Utiliza:
StyleSheet.create()
Exemplo:
const styles = StyleSheet.create({
 textoAzul:{
 color:'blue'
 }
})
Externa
Os estilos ficam em arquivo separado.
Exemplo:
• styles.js 
Melhora:
• organização; 
• reutilização; 
• manutenção. 
10. Styled Components
Biblioteca que permite usar CSS no React Native.
Instalação:
styled-components
Exemplo:
const StyledText = styled.Text`
 color: blue;
`
Vantagens
• sintaxe semelhante ao CSS; 
• reutilização; 
• estilos dinâmicos; 
• suporte a animações. 
11. Animated API
API nativa usada para animações em componentes.
Permite:
• fade in; 
• fade out; 
• movimentos; 
• transições; 
• animações interativas. 
Componentes animáveis
• Animated.View; 
• Animated.Text; 
• Animated.Image; 
• Animated.ScrollView. 
12. Animated.timing
Método utilizado para controlar animações.
Exemplo:
Animated.timing(
 fadeAnim,
 {
 toValue:1,
 duration:1000
 }
).start();
Parâmetros:
• valor final; 
• duração da animação. 
13. Hooks Utilizados
useRef
Armazena valores persistentes.
useEffect
Executa ações durante renderização.
Muito usado para:
• iniciar animações; 
• chamadas de API; 
• atualizações automáticas. 
14. LayoutAnimation API
API voltada para animações de layout.
Muito usada para:
• redimensionamento; 
• expansão de conteúdo; 
• reorganização visual. 
Recursos
• animação automática do layout; 
• integração com state; 
• efeitos fluidos. 
Exemplo:
LayoutAnimation.spring();
15. State
O state armazena:
• dados mutáveis; 
• informações dinâmicas; 
• estados da interface. 
Exemplo:
state = {
 w:200,
 h:200
}
Quando o state muda:
• a interface é renderizada novamente. 
16. Importância das Animações
As animações:
• melhoram experiência do usuário; 
• deixam transições mais fluidas; 
• fornecem feedback visual; 
• aumentam interatividade. 
Exemplos:
• carregamento de conteúdo; 
• mudanças de tela; 
• botões animados; 
• efeitos de transição. 
Exercícios de Fixação
1. O FlatList é utilizado para:
a) Criar animações.
b) Gerenciar banco de dados.
c) Renderizar listas de forma otimizada.
d) Criar APIs REST.
2. A propriedade extraData do FlatList serve para:
a) Criar tabelas SQL.
b) Atualizar a lista quando os dados mudam.
c) Inserir imagens.
d) Fazer navegação entre telas.
3. O VirtualizedList é:
a) Um banco de dados local.
b) Um componente de animação.
c) A implementação base de listas no React Native.
d) Um componente exclusivo do Android.
4. O Stack Navigation funciona como:
a) Um menu lateral oculto.
b) Uma pilha de telas.
c) Um banco relacional.
d) Um componente visual.
5. O método usado para navegar entre telas é:
a) navigation.change()
b) navigation.move()
c) navigation.navigate()
d) navigation.screen()
6. O Tab Navigation utiliza:
a) abas e guias de navegação.
b) banco de dados SQL.
c) animações automáticas.
d) renderização virtual.
7. O Drawer Navigation cria:
a) um banco SQLite.
b) um menu lateral oculto.
c) uma animação de fade.
d) um componente de lista.
8. No React Native, as propriedades de estilo utilizam:
a) snake_case
b) PascalCase
c) camelCase
d) kebab-case
9. A biblioteca Styled Components permite:
a) usar CSS no React Native.
b) substituir JavaScript.
c) criar bancos de dados.
d) compilar aplicações Android.
10. A Animated API é utilizada para:
a) gerenciamento de banco de dados.
b) criação de animações e transições.
c) roteamento de APIs REST.
d) renderização de arquivos XML.
Gabarito
1. c 
2. b 
3. c 
4. b 
5. c 
6. a 
7. b 
8. c 
9. a 
10.b