1
00:00:02,340 --> 00:00:08,460
É importante entender como a navegação funciona e aplicativos nativos e, especialmente, se você tem experiência em desenvolvimento

2
00:00:08,460 --> 00:00:14,400
na Web, é importante entender como ela difere da navegação entre telas e a Web, porque na

3
00:00:14,460 --> 00:00:20,760
Web você realmente digita um L e se está construindo um aplicativo de reação, você usa uma ferramenta como

4
00:00:20,760 --> 00:00:24,240
reagir ao roteador para carregar o componente de usuários.

5
00:00:24,240 --> 00:00:30,640
E se você clicar em um link que vá para o meu site produtos pontocom slash novamente, o roteador de reação, que é uma biblioteca extra que você instalou, entra em ação e

6
00:00:30,660 --> 00:00:37,950
vê que você altera o caminho no seu U. R. EU. e carrega um componente de

7
00:00:37,950 --> 00:00:38,820
reação diferente.

8
00:00:38,850 --> 00:00:40,800
É assim que a navegação funciona na web.

9
00:00:40,890 --> 00:00:47,880
Então, você é L? É a sua fonte de verdade e a mudança que você pode ser buscada por bibliotecas como

10
00:00:47,880 --> 00:00:51,220
o roteador de reação, que renderiza diferentes componentes na tela.

11
00:00:51,240 --> 00:00:53,910
É assim que reajo para os trabalhos na web.

12
00:00:54,030 --> 00:00:57,990
Agora, há uma diferença importante nisso quando pensamos em aplicativos nativos.

13
00:00:58,070 --> 00:01:05,070
Não temos usuários que não andam no seu aplicativo digitando alguns que você é L; em vez disso,

14
00:01:05,070 --> 00:01:09,510
você pressiona botões e pressiona e você está indo e voltando.

15
00:01:09,540 --> 00:01:16,050
Você tem botões de voltar, gavetas laterais e é assim que você navega em aplicativos móveis para ser mais preciso.

16
00:01:16,050 --> 00:01:19,720
Como eu mencionei, tocar é um padrão comum que você vê lá.

17
00:01:19,770 --> 00:01:25,170
O padrão comum comum é que você navega em uma pilha de páginas e isso significa simplesmente que

18
00:01:25,170 --> 00:01:31,770
você acessa uma página em que clica em algum item que é levado para uma nova tela e, em seguida, automaticamente recebe um

19
00:01:31,770 --> 00:01:36,210
botão voltar no topo ou no Android. tenha um embutido no dispositivo, é claro.

20
00:01:36,210 --> 00:01:41,850
E quando você pressiona que você navegou de volta para a página em que estava antes e obtém uma

21
00:01:41,850 --> 00:01:43,100
transição suave para isso.

22
00:01:43,140 --> 00:01:48,660
Assim, você pode navegar por exemplo, carregar um componente de usuários pressionando a guia ou pressionando um

23
00:01:48,870 --> 00:01:54,270
item especial e sendo navegado até lá, e a alegação simplesmente parece e se sente um pouco

24
00:01:54,270 --> 00:01:55,390
diferente dos usuários.

25
00:01:55,500 --> 00:02:00,700
Agora, é claro, também queremos trazer essa aparência para o nosso aplicativo nativo ReACT.

26
00:02:00,780 --> 00:02:02,570
E felizmente isso é muito fácil.

27
00:02:02,580 --> 00:02:09,310
Com a ajuda de uma biblioteca de terceiros, usaremos a biblioteca de terceiros

28
00:02:09,310 --> 00:02:16,630
que o utilizará para isso. Parei meu servidor exposto. Aqui é navegação de reação.

29
00:02:16,720 --> 00:02:24,280
Podemos instalá-lo com o npm install dash dash. na verdade, é uma biblioteca de navegação

30
00:02:24,310 --> 00:02:26,660
criada para reagir nativamente.

31
00:02:26,680 --> 00:02:33,370
Agora você também pode usá-lo em aplicativos Web, mas seu foco principal são aplicativos nativos criados com o React Native.

32
00:02:33,370 --> 00:02:40,330
Portanto, mesmo que seja chamada de navegação de reação, é para o React Native e não apenas para reagir na Web.

33
00:02:40,870 --> 00:02:46,330
Assim, podemos simplesmente instalar este pacote aqui em nosso aplicativo para começar a usá-lo.

34
00:02:46,330 --> 00:02:51,130
E, é claro, ensinarei os detalhes deste pacote e como usá-lo para diferentes

35
00:02:51,130 --> 00:02:53,200
padrões de navegação neste módulo.

36
00:02:53,200 --> 00:02:56,590
Mas caso você queira mergulhar mais fundo ou também queira ter um guia por escrito.

37
00:02:56,590 --> 00:03:02,280
Definitivamente, verifique também o ponto de navegação de reação ORIC, que é a página oficial deste pacote, onde

38
00:03:02,290 --> 00:03:06,000
você pode mergulhar nas docas para aprender tudo sobre este pacote.

39
00:03:06,040 --> 00:03:09,400
Lá você pode ler tudo sobre isso em detalhes.

40
00:03:09,430 --> 00:03:13,320
Você aprenderá como usá-lo, como configurá-lo e assim por diante.

41
00:03:13,330 --> 00:03:19,360
Há muito que você pode fazer com isso e, embora eu cubra a maioria disso aqui, este é um

42
00:03:19,360 --> 00:03:21,680
ótimo recurso para você se aprofundar.

43
00:03:21,760 --> 00:03:28,390
Agora, uma coisa que vemos aqui, que absolutamente devemos fazer é executar este comando user que instala um

44
00:03:28,390 --> 00:03:32,350
monte de dependências extras que reagem às necessidades de navegação.

45
00:03:32,510 --> 00:03:39,670
Portanto, basta copiar este comando da página Introdução aqui e executar em seu projeto na linha de comando no

46
00:03:39,670 --> 00:03:46,180
terminal integrado. Você não tem o npm install mas o Expo install, embora a única diferença seja

47
00:03:46,180 --> 00:03:52,210
que o Expo instalado nos bastidores executará o npm install, mas ele selecionará as versões específicas

48
00:03:52,300 --> 00:03:56,540
desses pacotes que funcionam com sua versão específica da Expo.

49
00:03:56,590 --> 00:04:01,750
Portanto, é uma versão mais segura do npm install que você poderia dizer e, portanto, é recomendável que você a

50
00:04:01,750 --> 00:04:02,370
use aqui.

51
00:04:02,380 --> 00:04:07,600
Agora, uma observação adicional sobre este comando e esta página em geral, no canto superior esquerdo desta página, você vê

52
00:04:07,600 --> 00:04:09,240
a versão do React navigation.

53
00:04:09,250 --> 00:04:16,670
Esses documentos estão relacionados agora neste curso à reutilização, enquanto em 3 ou 4 eles são praticamente os mesmos.

54
00:04:16,690 --> 00:04:22,570
No momento, não estamos usando o 5, porque a versão 5 usa uma sintaxe um pouco diferente que,

55
00:04:22,580 --> 00:04:24,280
no momento, não abordaremos.

56
00:04:24,280 --> 00:04:30,760
Portanto, verifique se você está retornando aos documentos e, na verdade, seleciona a Versão 4 ou livre da documentação

57
00:04:30,760 --> 00:04:32,500
aqui para acompanhar sem problemas.

58
00:04:32,530 --> 00:04:37,300
É claro que você sempre pode dar uma olhada na versão 5 e tentar ajustar manualmente o código, se

59
00:04:37,480 --> 00:04:42,720
desejar, mas para uma experiência tranquila, é claro que o foco está no React Native e não na navegação de reação.

60
00:04:42,820 --> 00:04:45,160
Certifique-se de escolher a versão 4 ou ano livre.

61
00:04:45,220 --> 00:04:50,560
Essa é apenas uma pequena observação, caso você esteja se perguntando sobre a diferença entre os

62
00:04:50,560 --> 00:04:56,720
documentos aqui e o que vê neste curso. Agora, uma observação importante é importante, enquanto nos apegamos à reação

63
00:04:56,720 --> 00:04:57,550
da navegação.

64
00:04:57,560 --> 00:05:05,540
Aqui mais adiante, no curso, terei um módulo inteiro sobre navegação de reação cinco e mais tarde, onde mostrarei

65
00:05:05,540 --> 00:05:10,100
como converter seu projeto para usar a versão mais recente.

66
00:05:10,100 --> 00:05:16,130
Então, você teve o melhor dos dois mundos e aprenderá os dois tipos de configuração da navegação e

67
00:05:16,130 --> 00:05:22,400
navegação e reação de aplicativos nativos, pois tanto quanto para qualquer futuro em que ela tenha cinco anos

68
00:05:22,760 --> 00:05:25,180
ou mais será super importante saber.

69
00:05:25,250 --> 00:05:30,890
Então, basta copiar este comando e também garantir que, além de instalar o react navigation, que

70
00:05:30,890 --> 00:05:36,830
é o pacote principal, é claro que também instalamos esses pacotes no projeto executando o Expo install

71
00:05:36,830 --> 00:05:43,570
aqui agora, com a instalação concluída aqui, posso reiniciar meu servidor Expo com o NPM start e agora podemos

72
00:05:43,570 --> 00:05:46,540
começar a usar a navegação de reação.

73
00:05:46,540 --> 00:05:51,550
Agora, para isso tudo, troque uma nova pasta no meu projeto e eu o nomeei de navegação.

74
00:05:51,550 --> 00:05:57,140
Isso não é algo que você precisa fazer, mas pode ajudá-lo a manter seu código limpo, porque está lá.

75
00:05:57,140 --> 00:06:03,600
Vou criar um novo arquivo, tudo criar minhas refeições navegador ponto J cair.

76
00:06:03,640 --> 00:06:05,590
Agora, esse nome de arquivo depende totalmente de você.

77
00:06:05,620 --> 00:06:12,970
Eu só quero indicar que lá vou definir a configuração da minha navegação para o meu aplicativo de refeições

78
00:06:12,970 --> 00:06:14,690
aqui, que estou construindo.

79
00:06:14,710 --> 00:06:16,630
É por isso que um nome é assim.

80
00:06:16,630 --> 00:06:22,420
E é no outono do jazz do navegador de refeições que eu quero definir minha configuração

81
00:06:22,420 --> 00:06:29,530
de navegação de poço. Quero dizer à navegação de reação que biblioteca instalamos quais telas diferentes temos como estão conectadas

82
00:06:29,830 --> 00:06:32,880
e como queremos nos mover entre elas.

83
00:06:33,190 --> 00:06:36,670
Agora é mais fácil simplesmente ver isso do que apenas falar sobre eles.

84
00:06:36,730 --> 00:06:41,350
Portanto, no navegador de refeições, vamos começar a configurar alguma navegação.