O que React Navigation faz?
Visão Geral
Guia para construir interfaces de navegação com React Navigation.
Este skill se aplica apenas ao React Navigation 7. A API e os padrões podem não funcionar com versões diferentes.
Seleção de API
React Navigation oferece duas APIs - a Static API baseada em objetos e a Dynamic API baseada em componentes.
- Aplicativos Existentes: Verifique a configuração de navegação atual e siga o mesmo estilo de API ao usar as referências.
- Novos Aplicativos: Se o aplicativo ainda não tiver uma configuração de navegação existente, prefira a
Static API.
Quando Aplicar
Consulte este skill quando:
- Construindo padrões de UI de navegação como pilhas, abas, gavetas, folhas inferiores, etc.
- Configurando cabeçalhos e outras UIs de navegadores integradas.
- Lidando com áreas seguras e recuos em interfaces de navegação.
Referências
| Arquivo | Descrição |
|---|---|
| stacks.md | Navegação baseada em pilhas |
| form-sheet.md | Folha inferior e folhas de formulário |
| bottom-tabs.md | Abas inferiores multiplataforma |
| native-bottom-tabs.md | Abas inferiores nativas |
| material-top-tabs.md | Abas superiores deslizáveis |
| drawers.md | Navegação por gavetas e barras laterais |
| header.md | Configuração de cabeçalhos |
| safe-areas.md | Tratamento de áreas seguras |
Mapeamento Problema -> Skill
| Problema | Comece Com |
|---|---|
| Exibindo telas e modais em uma pilha | stacks.md |
| Exibindo folhas inferiores ou folhas de formulário | form-sheet.md |
| Exibindo telas em abas inferiores ou barras laterais responsivas com suporte web | bottom-tabs.md |
| Exibindo telas em abas nativas no iOS e Android | native-bottom-tabs.md |
| Exibindo conteúdo em abas superiores deslizáveis | material-top-tabs.md |
| Usando uma gaveta ou barra lateral | drawers.md |
| Configurando o cabeçalho em navegador de abas inferiores ou gavetas | header.md |
| Lidando com áreas seguras como status bar, recuos de cabeçalho, recuos de barra de abas, etc. | safe-areas.md |