1 00:00:02,660 --> 00:00:08,660 Então, como podemos obter informações sobre a categoria em que clicamos, selecionamos dessa tela de 2 00:00:08,660 --> 00:00:15,240 categoria para a tela de refeições da categoria? Bem, na tela de categorias em que navegamos para as 3 00:00:15,440 --> 00:00:16,870 refeições da categoria, 4 00:00:16,880 --> 00:00:21,930 para esta ação de navegação além do nome da rota, também podemos passar os parâmetros. 5 00:00:21,950 --> 00:00:29,510 Essa é outra chave que este objeto que você transmitiu para navegar aceita e é um objeto de pares de 6 00:00:29,510 --> 00:00:35,060 valores-chave, de quaisquer pares de valores-chave e quantos pares de valores-chave você desejar. 7 00:00:35,060 --> 00:00:40,980 Portanto, esses são apenas parâmetros, dados extras que você está passando para a nova tela que está sendo carregada. 8 00:00:41,330 --> 00:00:46,760 Agora, você pode configurar um parâmetro chamado ID da categoria e o nome depende totalmente de 9 00:00:46,760 --> 00:00:47,880 você, que pode 10 00:00:47,930 --> 00:00:54,590 ser apenas o ID, cid ou meu hobby, o que você estiver construindo e os dados que precisar encaminhar, aqui estamos 11 00:00:54,590 --> 00:00:57,640 encaminhando uma identificação de categoria, portanto, vou chamá-lo assim. 12 00:00:57,650 --> 00:01:01,410 Isso agora deve estar em nosso cenário aqui, é claro, o 13 00:01:01,410 --> 00:01:03,980 ID da categoria em que tocamos. 14 00:01:03,980 --> 00:01:07,650 Agora, é claro, estamos obtendo nossos dados do item aqui para cada item da grade 15 00:01:07,670 --> 00:01:12,480 que é renderizado, ele contém o item e possui um título, uma cor e um bem, um ID, portanto o 16 00:01:12,650 --> 00:01:16,780 ID da categoria é itemData. item. Eu iria. 17 00:01:17,180 --> 00:01:23,430 Agora estamos encaminhando esse ID para a nova tela que está sendo carregada e, é claro, a 18 00:01:23,630 --> 00:01:26,210 coisa mais importante aqui, isso nos 19 00:01:26,210 --> 00:01:34,620 permite usar esses dados nessa nova tela. Quão? Bem, vamos lá, vamos para a 20 00:01:34,650 --> 00:01:39,550 tela de categoria de refeições e ver como podemos extrair esse parâmetro. 21 00:01:39,600 --> 00:01:41,400 Sabemos que conseguiremos um, 22 00:01:41,400 --> 00:01:43,990 como podemos ter acesso a ele agora? 23 00:01:44,250 --> 00:01:46,740 Para isso, podemos novamente usar a navegação 24 00:01:46,740 --> 00:01:52,350 de adereços, portanto, esse adereço especial que estamos recebendo, porque esse componente aqui está sendo carregado com 25 00:01:52,350 --> 00:01:58,860 a ajuda de um navegador de navegação React e na navegação, não precisamos apenas navegar e pressionar e assim por 26 00:01:58,860 --> 00:02:07,410 diante, também temos getParam, um método fornecido para extrair um parâmetro que recebemos. getParam usa uma string com o nome do parâmetro que queremos 27 00:02:07,410 --> 00:02:12,450 extrair e, é claro, esse deve ser o nome que você escolheu aqui 28 00:02:12,840 --> 00:02:15,590 como chave no objeto de parâmetros. 29 00:02:15,600 --> 00:02:21,330 Então, aqui, eu adicionei o ID da categoria, portanto, esse é o nome que eu quero usar aqui. 30 00:02:21,330 --> 00:02:29,160 Isso fornecerá o ID do gato, o ID da categoria. Isso fornecerá o valor que estamos armazenando aqui com o nome da chave; nesse caso, 31 00:02:29,160 --> 00:02:30,350 esse é o ID, 32 00:02:30,360 --> 00:02:30,960 portanto, 33 00:02:30,960 --> 00:02:32,700 esse é o valor que 34 00:02:32,700 --> 00:02:36,360 estamos extraindo para o ID da categoria na categoria tela de refeições. 35 00:02:36,360 --> 00:02:44,100 Portanto, agora temos o ID do gato e agora podemos usá-lo para obter acesso a todas as refeições que se encaixam nessa 36 00:02:44,100 --> 00:02:45,120 categoria. No 37 00:02:45,120 --> 00:02:51,360 momento, não temos refeições; portanto, precisamos adiar isso, mas pelo menos também podemos usá-lo. para obter nosso título 38 00:02:51,360 --> 00:02:58,920 de categoria e usá-lo aqui e por isso, tudo o que precisamos fazer, é claro, é que precisamos importar categorias; portanto, nossas 39 00:02:58,920 --> 00:03:08,220 categorias são agrupadas aqui a partir de dados / dados fictícios e temos o ID, temos um conjunto de categorias , é claro que podemos encontrar nossa 40 00:03:08,220 --> 00:03:15,600 categoria selecionada ou o que você quiser nomear, dando uma olhada nas categorias e, aí, podemos usar find, que executa uma 41 00:03:15,960 --> 00:03:21,950 função que é executada em todos os elementos da matriz, assim em todas as categorias e nos 42 00:03:21,950 --> 00:03:27,830 fornece o item em que essa função retorna true, que deve ser o caso se o ID 43 00:03:27,830 --> 00:03:33,700 da categoria que estamos vendo corresponder ao ID do gato que estamos recuperando de nossos parâmetros. 44 00:03:33,800 --> 00:03:35,740 Isso nos fornece a categoria selecionada e, para 45 00:03:35,750 --> 00:03:42,010 provar que isso funciona, mostrarei aqui em um componente de texto, mostrarei selectedCategory. 46 00:03:42,020 --> 00:03:53,370 título aqui. Agora, com isso, se voltarmos e navegarmos para essa categoria, veremos o italiano aqui logo 47 00:03:53,370 --> 00:03:56,280 acima dos meus botões, veremos rápido e fácil 48 00:03:56,430 --> 00:04:01,310 agora, de modo que está funcionando. É assim que transmitimos os 49 00:04:01,410 --> 00:04:07,710 dados e como os extraímos e, é claro, você pode passar vários parâmetros, quantos forem 50 00:04:08,010 --> 00:04:15,270 necessários e os parâmetros não precisam ser IDs, você pode passar objetos, texto, números e matrizes, quaisquer 51 00:04:15,270 --> 00:04:22,620 dados que você precise passar, você pode passar. Você pode perceber, no entanto, que é claro que com isso, podemos usar nossa categoria aqui 52 00:04:23,040 --> 00:04:25,420 em nossa tela, mas queremos usá-la aqui no cabeçalho. 53 00:04:25,420 --> 00:04:27,030 Bem, vamos abordar isso na próxima palestra.