Eu quero começar com a forma mais básica de navegação e também a forma mais comum de navegação que
você tem em qualquer aplicativo móvel. É assim que você vai e volta entre as telas e, para
isso, irá configurar a chamada pilha e navegador, porque páginas ou telas.
Vou usar essas palavras como sinônimos aqui.
Portanto, páginas e telas são basicamente gerenciadas em uma pilha de páginas.
E sempre que você for para uma nova tela, ela será empurrada para cima da pilha, na tela superior
da pilha sempre será a tela visível.
E quando você clica no botão Voltar, é exibido nesta tela em que você estava.
E como você sempre vê no aplicativo a tela superior, verá a tela abaixo da tela de
onde você veio.
É por isso que se chama Stack Navigator.
Agora essa é a fúria.
Vamos simplesmente usá-lo e ficará muito claro.
Nós importamos de reagir.
Navegação e seu nome foram o nome da função.
Na verdade, precisamos criar um navegador de pilha é criar um navegador de pilha.
Agora, uma observação importante: esta sintaxe está correta se você estiver usando a versão de navegação de reação gratuita, se estiver
usando a aversão à navegação de navegação, pois ela mudou um pouco, então você precisa instalar um pacote extra, como
mencionado em uma aula anterior.
Você precisa executar o npm install dash dash salvar reat dash dash dash stack e instalar este pacote extra e, com ele instalado, você cria create
stack navigator de react como navigation dash stack em vez de react navigation, que é um pequeno ajuste que
você não precisa fazer quatro crie um navegador de pilha e, quando criarmos nossos navegadores, por exemplo,
os toques ou o navegador de desenho mais tarde, você terá os respectivos pacotes necessários para instalar os
toques de traço de navegação de reação e assim por diante novamente, tudo isso coberto pela palestra
que você encontra antes desta palestra.
Agora, aqui eu gravei este curso com a versão de navegação de reação gratuita, que, caso contrário, é exatamente a
mesma.
É apenas a importação que difere e, portanto, importarei da navegação de reação aqui.
Mas se você está acompanhando a Versão 4, o painel de navegação do bash react reage com um pacote extra
que você precisa instalar.
Então é assim que a navegação por reação nesta biblioteca funciona, você cria os chamados navegadores que
estão no final. Você poderia dizer que os objetos reagem de fato aos componentes, uma vez que resultará em todas as configurações de
navegação, todas as informações sobre as diferentes telas que você possui e quais
fará o trabalho pesado carregando telas diferentes e tocando boas transições suaves para passar de
A para B para você.
Portanto, precisamos importar o create navigator da pilha e, em seguida, podemos simplesmente chamar que agora o create navigator da
pilha recebe pelo menos um argumento e esse é um objeto javascript, onde configuramos as diferentes telas
que queremos que possamos mover agora e esse aplicativo que eu quero para iniciar na tela de categorias
e se eu tocar em uma categoria lá, quero ir para a tela de refeições categoria e se
tocar em uma receita em uma refeição, quero ir para a tela de detalhes da refeição, para que precisemos
deles três telas em nosso navegador de pilha, para que você possa se mover usando essas linhas, empurrando as
páginas e abrindo-as e porque não precisamos de favoritos e filtros, porque os filtros serão adicionados posteriormente com
a ajuda de uma barra lateral será uma alternativa a esta pilha aqui e os favoritos também como uma
alternativa a essa pilha, poderemos ir lá com toques mais tarde, mas não agora.
Então, vamos começar com esta navegação básica baseada em pilha, na qual podemos ir e voltar
entre as categorias tela de refeições da categoria Tela e você detalha a tela, informamos a navegação de reação sobre essas três
telas registrando-as como pares de valores-chave que você escolhe qualquer identificador com qualquer nome sua escolha, por exemplo, categorias, mas esse nome depende
de você como convenção de nome de propriedade: comece com um caractere maiúsculo aqui, a propósito,
mas você não precisa fazer isso tecnicamente.
Portanto, você usa qualquer identificador que desejar como um nome de propriedade neste objeto que
está passando para criar um navegador de pilha e agora o valor em sua forma mais simples simplesmente é um ponteiro no componente de
react que você deseja carregar como uma tela para essa tela.
Portanto, no meu caso, todas as categorias de tela importam essa tela de todas as categorias de importação da tela
de categoria de telas. Posso importar isso porque essa é a minha exportação padrão.
Então agora mapeamos essas duas categorias e isso nos permite dizer mais tarde que a navegação de reação usa a biblioteca que estamos
usando e que ela deve carregar a tela de categoria.
Agora, como eu disse, essa não é a única tela de que preciso. Também quero ter a categoria refeições.
Portanto, esses são os sistemas da segunda tela. Essa tela apresentará todas as refeições da categoria escolhida, para
as quais temos vários componentes e essa é a tela de refeições da categoria que preparamos, que importamos das telas
da tela de refeições da categoria, para mapearmos este ano agora até da maneira que mencionei que esta é a forma mais simples de mapeamento, simplesmente
com o nome da propriedade e, em seguida, um ponteiro no componente que você deseja
carregar, você também pode passar o objeto aqui e, em vez disso, definir a propriedade de tela nesse objeto e apontar para
at o componente que você deseja carregar.
Agora, por que você faria isso?
Como agora você também pode definir configurações adicionais aqui, além da tela, você pode definir algumas opções padrão para a
tela e assim por diante, mas isso não é algo com o que tenhamos
que nos preocupar agora. Na verdade, cuidaremos disso mais adiante neste módulo só quero mencionar que
esse é o atalho, essa é a forma mais longa de informar à navegação de reação quais
telas devem ser carregadas para qual identificador falando que precisamos de um terceiro identificador, é claro, e esse é
o identificador que deve carregar nossa tela detalhada. nomeie-o como detalhe da refeição e eu quero apontar para a tela detalhada da
minha refeição, então eu importarei a tela de detalhes da refeição E agora vamos para a pasta screens e lá está a tela detalhada da
refeição e, novamente, usarei o atalho aqui.
Poderíamos usar esse formulário mais longo, mas usarei esse atalho no ponto na tela detalhada da refeição.
Então, com essa configuração básica, estamos dizendo para reagir à navegação.
Ei, estas são as telas que poderão se mover no momento, no entanto, os dados por si só não farão muito.
Por quê.
Como estamos criando esse navegador de pilha, mas não estamos fazendo nada com ele, então vamos mudar esse navegador de
criação de pilha, na verdade, retorna um contêiner de navegação e acaba sendo um componente de reação.
É tudo nomeado como navegador de refeições.
Parece um nome adequado, porque é isso que temos no final aqui.
E agora estamos armazenando o componente de reação criado pelo Stack Navigator, que é basicamente
um componente de reação com todo o trabalho pesado de carregar telas diferentes e reproduzir animações que esse componente de
reação é armazenado no navegador de refeições.
Agora, podemos exportar o navegador de refeições aqui e tentar usá-lo dessa maneira e capturá-lo para renderizá-lo na tela e ver
o que acontece, mas na verdade reagir a navegação funciona de maneira um pouco diferente.
Você também precisa criar um contêiner de aplicativo neste contêiner de aplicativo, para quebrar sua rota.
Portanto, seu navegador principal, neste caso, temos apenas um, temos apenas que empilhar o Navegador.
Então, vamos encerrar isso com isso.
Vamos embrulhar as refeições, navegá-las ou recriá-las, chamando create container de aplicativo e, em seguida, simplesmente passe
o Navegador de refeições como um argumento para criar container de aplicativo.
Também cria um contêiner de navegação.
O que também oferece um componente de reação.
Mas este não é realmente o componente de reação.
Você deve usar seu código ASX, pois agora ele possui todos os metadados da navegação em geral, sobre a navegação por
reação e assim por diante.
Portanto, este é simplesmente um padrão que você precisa para envolver sua rota com o navegador mais importante e usar esse componente de
reação de retorno no seu código J é X; em seguida, faz basicamente a configuração que você sempre
terá ao trabalhar com a navegação de reação mais tarde. como usar vários navegadores em um aplicativo.
A propósito, por enquanto, temos este e exportamos esse componente que é o fim que cria.
Portanto, agora em busca de aplicativos, podemos começar a usar esse componente.
Então, vimos algo na tela para que vamos lá e importe o navegador de refeições do navegador de refeições
de navegação.
Agora, como eu mencionei, o navegador de refeições agora é apenas um componente de reação. No final, o que podemos
fazer é simplesmente retornar isso em vez de retornar nossa visão com o texto aqui.
Retornarei o navegador de refeições e, como é um componente de reação, posso simplesmente usar
o código de J Isaac assim com o papai, se salvarmos isso.
Analisamos nosso aplicativo enquanto ele é recarregado
e você pode precisar recarregar manualmente seu aplicativo.
Você deve ver a tela de categorias uma vez recarregada e, claro, isso é enorme, porque isso significa
que isso funciona.
Agora, observe também que todos, por padrão, obtêm um bom cabeçalho que tem a plataforma padrão para
E / S; é limpo e plano; tem essa linha fina abaixo dele para o Android; é mais dimensional, porque tudo
tem uma leve sombra.
Agora, é claro, está faltando um título e você aprenderá como podemos adicionar um neste módulo,
mas tiramos isso da caixa e isso automaticamente respeita todos os entalhes que você possa precisar para ficar tão longe
quanto você tem aqui, para que ele use automaticamente tal visualização de área segura e isso é tudo o
que mencionei no último módulo do curso enquanto você tem esse componente e, às vezes, é necessário, por exemplo,
ao criar um aplicativo com navegação de reação, a navegação de reação já agrupa suas visualizações em uma visualização de área segura, pelo
menos muito do trabalho que você teria que fazer, caso contrário, garantirá que o cabeçalho tenha boa
aparência e isso é importante, porque criar manualmente um cabeçalho com boa aparência em todos os dispositivos é
realmente um pouco de trabalho.
Então é isso que chegamos aqui.
A questão óbvia agora é como podemos alcançar nossas outras telas.