1
00:00:02,530 --> 00:00:07,540
Bem, para alcançar nossas outras telas, precisamos de algo em que possamos clicar e tocar.

2
00:00:07,600 --> 00:00:12,130
Posteriormente, teremos nossa grade de categorias aqui e trabalharemos nisso também neste módulo, mas

3
00:00:12,220 --> 00:00:15,990
apenas para começar a navegação, adicionarei um botão. Na tela de categorias

4
00:00:16,030 --> 00:00:21,850
em que tenho este texto, quero adicionar um botão no qual posso tocar para ir para a tela

5
00:00:21,850 --> 00:00:23,510
de refeições da categoria.

6
00:00:23,980 --> 00:00:34,440
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

7
00:00:34,600 --> 00:00:41,630
esse botão, quero ativar uma função que realmente me leva à tela de categoria

8
00:00:41,660 --> 00:00:42,890
de refeições.

9
00:00:42,890 --> 00:00:45,610
Agora, configuramos a tela de

10
00:00:45,620 --> 00:00:53,040
categoria de refeições aqui, mas como podemos ir agora? Bem, para isso, é importante saber que qualquer componente que

11
00:00:53,040 --> 00:01:00,360
você carregou com a ajuda do React navigation recebe automaticamente uma proposta especial; portanto, qualquer componente mapeado para um dos

12
00:01:00,360 --> 00:01:02,550
seus identificadores de tela aqui;

13
00:01:02,550 --> 00:01:09,390
nesse caso, esses três componentes obterão o suporte especial. Os componentes aninhados não o recebem automaticamente, apenas

14
00:01:09,390 --> 00:01:14,850
os componentes de nível superior que você mapeou para identificadores em seus navegadores.

15
00:01:14,850 --> 00:01:16,800
Então, esse é um acessório especial de que estou falando,

16
00:01:16,800 --> 00:01:17,810
vamos dar uma olhada.

17
00:01:17,820 --> 00:01:23,790
Portanto, aqui nos adereços, podemos extraí-lo e vamos simplesmente começar pelos adereços de log do console aqui, para que

18
00:01:23,790 --> 00:01:27,510
possamos ter uma idéia e, por enquanto, para que não ocorram erros,

19
00:01:27,510 --> 00:01:30,480
passarei uma função vazia aqui para onPress .

20
00:01:30,480 --> 00:01:33,600
Então, vamos salvar isso e ver o que há dentro dos adereços.

21
00:01:33,690 --> 00:01:39,660
Isso é recarregado, temos o botão que não faz nada e, aqui no console, vemos que os objetos

22
00:01:39,720 --> 00:01:40,800
não estão vazios.

23
00:01:40,800 --> 00:01:42,030
Este é

24
00:01:42,030 --> 00:01:48,400
o nosso objeto de suporte e lá temos um suporte de navegação que é um

25
00:01:48,420 --> 00:01:58,980
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,

26
00:01:58,980 --> 00:02:03,090
funções que nos ajudam a se locomover em nosso aplicativo.

27
00:02:03,450 --> 00:02:09,670
Ele também possui um suporte de tela, então nosso suporte tem acessórios de tela que podemos ignorar por enquanto.

28
00:02:09,690 --> 00:02:17,160
Então, isso que está dentro dos adereços e esse acessório de navegação, essa parte de navegação que

29
00:02:17,520 --> 00:02:18,680
está lá,

30
00:02:18,690 --> 00:02:25,350
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

31
00:02:25,370 --> 00:02:30,270
com uma função de seta embutida aqui, é claro que você pode ter uma função separada que

32
00:02:30,270 --> 00:02:32,010
você cria e que mapeia

33
00:02:32,010 --> 00:02:35,430
para o onPress, isso nos ajuda e pode ser usado para navegar.

34
00:02:35,490 --> 00:02:42,210
Portanto, na navegação de acessórios, a navegação é esse acessório especial que estamos recebendo pelo React Navigation, porque carregamos esse

35
00:02:42,210 --> 00:02:46,390
componente de tela de categorias com a ajuda do nosso navegador aqui,

36
00:02:46,740 --> 00:02:50,900
esse acessório de navegação especial tem um método de navegação e esse

37
00:02:50,910 --> 00:02:53,040
é o seu método principal,

38
00:02:53,040 --> 00:03:01,620
o mais importante método para se locomover com a ajuda do React Navigation. Como funciona a navegação?

39
00:03:02,490 --> 00:03:12,040
Navegar usa um objeto como argumento e, nesse objeto, você pode configurar o nome da rota para a qual

40
00:03:12,040 --> 00:03:13,150
deseja navegar.

41
00:03:13,240 --> 00:03:19,720
Então, você passa uma propriedade de nome de rota neste objeto que você passa para navegar e agora é importante, o nome

42
00:03:19,720 --> 00:03:25,540
da rota que você especificar aqui deve ser um dos três nomes de rota que eu configurei aqui.

43
00:03:25,720 --> 00:03:31,450
Agora, os nomes de rotas são os identificadores que você mostra escolhidos na frente desses dois pontos; portanto, os nomes de propriedades

44
00:03:31,450 --> 00:03:34,420
nesse objeto que você passou para criar o navegador de pilha.

45
00:03:34,420 --> 00:03:36,660
Estes são os nomes das suas rotas

46
00:03:36,670 --> 00:03:42,900
e é isso que agora você pode usar para navegar. Então, aqui eu quero ir para a categoria

47
00:03:42,900 --> 00:03:44,690
refeições, este é o

48
00:03:44,690 --> 00:03:48,340
nome da rota que eu quero usar, portanto, aqui, aponto

49
00:03:48,410 --> 00:03:56,000
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

50
00:03:56,180 --> 00:04:02,450
refeições de categoria, porque isso basicamente informará ao Javascript e React a navegação no final que você deseja

51
00:04:02,450 --> 00:04:08,470
ir para a rota que possui o nome da categoria refeições e que é essa rota aqui.

52
00:04:08,470 --> 00:04:10,720
Então agora, é assim que você pode ir para lá.

53
00:04:13,730 --> 00:04:21,530
Se agora salvarmos isso e clicarmos em ir para as refeições aqui, você verá que vamos para a tela da refeição, obtemos

54
00:04:21,530 --> 00:04:27,020
essa bela animação pronta para uso, obtemos o botão voltar, que é exatamente o que

55
00:04:27,020 --> 00:04:33,650
esperávamos que fosse. O iOS e tudo isso funcionam de maneira imediata, sem nenhum trabalho extra, sem verificação, sem

56
00:04:33,650 --> 00:04:38,890
código de animação manual, nós conseguimos isso imediatamente, graças à biblioteca de navegação React.

57
00:04:38,990 --> 00:04:45,800
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

58
00:04:45,800 --> 00:04:52,130
a tela de categoria, e isso também funciona no Android. Aí temos a navegação de roteamento específica para Android, que

59
00:04:52,400 --> 00:04:57,620
parece um pouco diferente do iOS, é a animação de navegação que você esperaria no Android, é

60
00:04:57,620 --> 00:05:01,550
claro que você também pode usar o botão Voltar do dispositivo para voltar.

61
00:05:01,550 --> 00:05:08,600
Portanto, é assim que você pode navegar para uma tela diferente e observe que a navegação, é claro,

62
00:05:08,600 --> 00:05:15,530
não diz nada sobre a direção que queremos seguir, não informa ao React Navigation se deve reproduzir

63
00:05:15,530 --> 00:05:22,490
essa animação para frente ou para trás. . O React Navigation detecta isso automaticamente porque, sob o

64
00:05:22,550 --> 00:05:29,120
capô, ele gerencia essa pilha de páginas que eu estava falando, essa pilha de telas e essa

65
00:05:29,120 --> 00:05:35,060
pilha, agora que iniciamos o aplicativo, temos apenas a tela de categoria, mas quando pressiono esse

66
00:05:35,420 --> 00:05:42,050
botão , navegar no final informa ao React Navigation que, como estamos fazendo isso dentro de um

67
00:05:42,050 --> 00:05:47,570
componente carregado com um navegador de pilha, queremos navegar para uma tela diferente que

68
00:05:47,600 --> 00:05:53,810
deve ser colocada no topo da pilha. Esse é simplesmente o comportamento padrão e, portanto, ele sabe

69
00:05:53,840 --> 00:05:59,690
que deseja avançar porque uma nova rota foi enviada, o que significa que foi adicionada à pilha, queremos avançar

70
00:05:59,690 --> 00:06:06,080
e, quando clicamos no botão voltar, ele adiciona automaticamente, retira essa tela da pilha e, como remove algo da pilha, ele sabe

71
00:06:06,170 --> 00:06:10,700
que deve reproduzir a animação de volta. Então é isso que está acontecendo

72
00:06:10,700 --> 00:06:14,870
nos bastidores, você realmente não precisa se preocupar com isso e isso é

73
00:06:14,960 --> 00:06:20,330
bom, eu só quero que você esteja ciente disso, que o React Navigation está fazendo o

74
00:06:20,330 --> 00:06:27,980
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ê.

75
00:06:28,120 --> 00:06:32,990
Ok, isso nos permite ir e voltar ou avançar e voltar.

76
00:06:32,990 --> 00:06:39,260
Agora, seu desafio para a próxima palestra, onde faremos isso juntos, é que você também fará o mesmo

77
00:06:39,260 --> 00:06:44,270
na tela da categoria refeição e certifique-se de que também possamos ir para o

78
00:06:44,270 --> 00:06:47,990
MealDetailScreen a partir daí. Não deve ser muito difícil, na próxima palestra, faremos isso juntos.