Bem, para alcançar nossas outras telas, precisamos de algo em que possamos clicar e tocar.
Posteriormente, teremos nossa grade de categorias aqui e trabalharemos nisso também neste módulo, mas
apenas para começar a navegação, adicionarei um botão. Na tela de categorias
em que tenho este texto, quero adicionar um botão no qual posso tocar para ir para a tela
de refeições da categoria.
Então, aqui, adicionarei este botão React Native, aquele que está embutido e defina um título para ir às refeições e, quando pressionamos
esse botão, quero ativar uma função que realmente me leva à tela de categoria
de refeições.
Agora, configuramos a tela de
categoria de refeições aqui, mas como podemos ir agora? Bem, para isso, é importante saber que qualquer componente que
você carregou com a ajuda do React navigation recebe automaticamente uma proposta especial; portanto, qualquer componente mapeado para um dos
seus identificadores de tela aqui;
nesse caso, esses três componentes obterão o suporte especial. Os componentes aninhados não o recebem automaticamente, apenas
os componentes de nível superior que você mapeou para identificadores em seus navegadores.
Então, esse é um acessório especial de que estou falando,
vamos dar uma olhada.
Portanto, aqui nos adereços, podemos extraí-lo e vamos simplesmente começar pelos adereços de log do console aqui, para que
possamos ter uma idéia e, por enquanto, para que não ocorram erros,
passarei uma função vazia aqui para onPress .
Então, vamos salvar isso e ver o que há dentro dos adereços.
Isso é recarregado, temos o botão que não faz nada e, aqui no console, vemos que os objetos
não estão vazios.
Este é
o nosso objeto de suporte e lá temos um suporte de navegação que é um
objeto que possui algumas ações, ok, mas que também possui, por exemplo, pop, push, substituir, redefinir e uma função de navegação, portanto, várias funções nele,
funções que nos ajudam a se locomover em nosso aplicativo.
Ele também possui um suporte de tela, então nosso suporte tem acessórios de tela que podemos ignorar por enquanto.
Então, isso que está dentro dos adereços e esse acessório de navegação, essa parte de navegação que
está lá,
realmente nos ajuda, então esse acessório de navegação. Isso nos ajuda aqui porque, quando pressionamos este botão, eu faço isso
com uma função de seta embutida aqui, é claro que você pode ter uma função separada que
você cria e que mapeia
para o onPress, isso nos ajuda e pode ser usado para navegar.
Portanto, na navegação de acessórios, a navegação é esse acessório especial que estamos recebendo pelo React Navigation, porque carregamos esse
componente de tela de categorias com a ajuda do nosso navegador aqui,
esse acessório de navegação especial tem um método de navegação e esse
é o seu método principal,
o mais importante método para se locomover com a ajuda do React Navigation. Como funciona a navegação?
Navegar usa um objeto como argumento e, nesse objeto, você pode configurar o nome da rota para a qual
deseja navegar.
Então, você passa uma propriedade de nome de rota neste objeto que você passa para navegar e agora é importante, o nome
da rota que você especificar aqui deve ser um dos três nomes de rota que eu configurei aqui.
Agora, os nomes de rotas são os identificadores que você mostra escolhidos na frente desses dois pontos; portanto, os nomes de propriedades
nesse objeto que você passou para criar o navegador de pilha.
Estes são os nomes das suas rotas
e é isso que agora você pode usar para navegar. Então, aqui eu quero ir para a categoria
refeições, este é o
nome da rota que eu quero usar, portanto, aqui, aponto
para a categoria refeições, mas não assim, isso no Javascript procuraria uma variável de categoria refeições, em vez de uma string chamada
refeições de categoria, porque isso basicamente informará ao Javascript e React a navegação no final que você deseja
ir para a rota que possui o nome da categoria refeições e que é essa rota aqui.
Então agora, é assim que você pode ir para lá.
Se agora salvarmos isso e clicarmos em ir para as refeições aqui, você verá que vamos para a tela da refeição, obtemos
essa bela animação pronta para uso, obtemos o botão voltar, que é exatamente o que
esperávamos que fosse. O iOS e tudo isso funcionam de maneira imediata, sem nenhum trabalho extra, sem verificação, sem
código de animação manual, nós conseguimos isso imediatamente, graças à biblioteca de navegação React.
Portanto, com isso, podemos avançar e voltar para a tela de refeição, para a tela de categoria de refeição e depois para
a tela de categoria, e isso também funciona no Android. Aí temos a navegação de roteamento específica para Android, que
parece um pouco diferente do iOS, é a animação de navegação que você esperaria no Android, é
claro que você também pode usar o botão Voltar do dispositivo para voltar.
Portanto, é assim que você pode navegar para uma tela diferente e observe que a navegação, é claro,
não diz nada sobre a direção que queremos seguir, não informa ao React Navigation se deve reproduzir
essa animação para frente ou para trás. . O React Navigation detecta isso automaticamente porque, sob o
capô, ele gerencia essa pilha de páginas que eu estava falando, essa pilha de telas e essa
pilha, agora que iniciamos o aplicativo, temos apenas a tela de categoria, mas quando pressiono esse
botão , navegar no final informa ao React Navigation que, como estamos fazendo isso dentro de um
componente carregado com um navegador de pilha, queremos navegar para uma tela diferente que
deve ser colocada no topo da pilha. Esse é simplesmente o comportamento padrão e, portanto, ele sabe
que deseja avançar porque uma nova rota foi enviada, o que significa que foi adicionada à pilha, queremos avançar
e, quando clicamos no botão voltar, ele adiciona automaticamente, retira essa tela da pilha e, como remove algo da pilha, ele sabe
que deve reproduzir a animação de volta. Então é isso que está acontecendo
nos bastidores, você realmente não precisa se preocupar com isso e isso é
bom, eu só quero que você esteja ciente disso, que o React Navigation está fazendo o
trabalho pesado para você lá e gerencia essa pilha de tela e as animações correspondentes que você precisa, portanto, sob o capô para você.
Ok, isso nos permite ir e voltar ou avançar e voltar.
Agora, seu desafio para a próxima palestra, onde faremos isso juntos, é que você também fará o mesmo
na tela da categoria refeição e certifique-se de que também possamos ir para o
MealDetailScreen a partir daí. Não deve ser muito difícil, na próxima palestra, faremos isso juntos.