1 00:00:02,330 --> 00:00:03,970 Para que possamos adicionar nossos 2 00:00:03,970 --> 00:00:08,150 elementos aqui, o que não podemos fazer é excluí-los e esse é o próximo passo 3 00:00:08,190 --> 00:00:10,880 que quero dar, a próxima coisa que quero implementar aqui. 4 00:00:10,960 --> 00:00:16,420 Obtivemos nosso FlatList com todos esses itens de meta e seria bom se pudéssemos tocar em um item 5 00:00:16,450 --> 00:00:18,010 de meta, portanto, nesse 6 00:00:18,130 --> 00:00:21,960 item de lista e quando tocamos nele, simplesmente o removemos da lista. 7 00:00:21,970 --> 00:00:27,550 Agora, o bom é que podemos identificar todos os itens de maneira única, porque cada item aqui tem um 8 00:00:27,550 --> 00:00:30,590 ID, para que possamos usá-lo e nos livrarmos do item, 9 00:00:30,760 --> 00:00:35,240 o que falta é que podemos tocá-lo. Agora, em nosso 10 00:00:35,260 --> 00:00:38,730 próprio componente, não podemos simplesmente adicionar o 11 00:00:38,740 --> 00:00:44,040 onPress ou algo assim, isso não funcionará. Se o log do 12 00:00:44,050 --> 00:00:46,300 console funcionar aqui, não o 13 00:00:46,300 --> 00:00:49,570 veremos assim que pressionar o item. 14 00:00:49,570 --> 00:00:55,990 Então, deixe-me mostrar isso para você, se você deixar isso recarregar aqui e depois aprendermos novamente o React Native e eu 15 00:00:55,990 --> 00:01:02,050 adiciono isso e bato nisso várias vezes aqui, estou tocando aqui, você não vê a saída aqui e faz Nesse 16 00:01:02,050 --> 00:01:07,990 sentido, este é um componente personalizado e o onPress agora seria simplesmente um suporte que passamos para esse componente, 17 00:01:07,990 --> 00:01:13,420 esse suporte estaria conectado a essa função, mas nada está acionando esse suporte de dentro do componente. 18 00:01:14,020 --> 00:01:18,850 Portanto, teremos que entrar nesse componente e garantir que essa visualização seja pressionável. 19 00:01:19,030 --> 00:01:24,200 Agora, na verdade, uma exibição possui vários adereços que nos ajudam a ouvir eventos; se 20 00:01:24,280 --> 00:01:30,190 você digitar aqui, seu IDE, se você estiver usando o Código do Visual Studio, deverá fornecer um preenchimento 21 00:01:30,570 --> 00:01:33,830 automático e você verá que muitos eventos podem ser 22 00:01:33,940 --> 00:01:40,150 realizados. ouça, por exemplo, onTouchEnd realmente nos ajuda a ouvir quando o usuário basicamente toca nisso e termina 23 00:01:40,180 --> 00:01:41,450 de tocar nele. 24 00:01:41,620 --> 00:01:48,340 O problema disso é que onTouchEnd e alguns outros ouvintes que chegamos aqui estão em um nível 25 00:01:48,430 --> 00:01:49,300 muito baixo. 26 00:01:49,480 --> 00:01:56,020 Podemos configurar ouvintes muito detalhados para vários eventos aqui, mas, por exemplo, onTouchEnd não nos diz quanto tempo o 27 00:01:56,020 --> 00:01:57,960 usuário pressionou isso e 28 00:01:58,090 --> 00:02:03,640 se você precisar descobrir se foi um toque longo ou um toque curto, você precisaria 29 00:02:03,640 --> 00:02:10,090 manualmente defina um cronômetro quando o usuário começar a tocar nisto no onTouchStart, aguarde onTouchEnd e decida manualmente 30 00:02:10,090 --> 00:02:12,480 se o tempo foi suficiente ou não. 31 00:02:12,610 --> 00:02:16,870 No entanto, normalmente não é o que você deseja fazer, é claro que você tem 32 00:02:16,870 --> 00:02:24,100 toda a flexibilidade para fazer isso, mas se você deseja esses eventos de toque padrão como pressão longa, então isso não é ideal, porque você teria 33 00:02:24,100 --> 00:02:26,770 que fazer todo o trabalho pesado. levantando por conta 34 00:02:26,770 --> 00:02:31,390 própria, você teria que escrever muito código para descobrir que tipo de toque era por conta própria. 35 00:02:31,390 --> 00:02:34,200 O bom é que o React Native já cobriu você. 36 00:02:34,240 --> 00:02:40,660 Há um componente palpável incorporado que você pode importar e palpável é um componente que você pode agrupar em 37 00:02:40,660 --> 00:02:42,670 torno de qualquer outro componente 38 00:02:42,760 --> 00:02:49,660 que você possui, portanto, em qualquer visualização ou texto ou qualquer outro conteúdo que você tenha e não seja visível, ele 39 00:02:49,660 --> 00:02:56,200 não renderiza nada que você pode ver na tela, mas isso envolverá e registrará o evento de toque no 40 00:02:56,200 --> 00:03:03,190 filho em que você toca e pode ser tocado e, em seguida, fornece o evento de toque final, para eventos de 41 00:03:03,190 --> 00:03:09,070 toque mais detalhados que foram pré-configurados para você. Agora, para ser exato, tocável como esse não pode ser 42 00:03:09,070 --> 00:03:13,900 usado como um componente, ele atua mais como uma classe pai para o React Native porque existem 43 00:03:13,900 --> 00:03:15,040 várias versões específicas 44 00:03:15,160 --> 00:03:21,730 de tocável que você realmente deve usar, por exemplo, existe opacidade tocável. Vamos usar a opacidade palpável em vez de palpável, 45 00:03:21,730 --> 00:03:23,980 porque agora esse é realmente 46 00:03:23,980 --> 00:03:30,760 um componente que você pode usar. Agora, você verá que, se você digitar, recebe alguns eventos de toque de 47 00:03:30,760 --> 00:03:34,140 alto nível que pode ouvir, como onPress ou onLongPress, 48 00:03:34,210 --> 00:03:37,120 e é isso claro que muito mais útil. 49 00:03:37,120 --> 00:03:42,910 Agora, aqui, eu posso ouvir onPress, o que significa que é um evento de imprensa normal, como poderíamos 50 00:03:42,910 --> 00:03:49,290 ouvir no botão e, quando isso é acionado, o que podemos fazer, é claro, podemos executar qualquer código que quisermos 51 00:03:49,360 --> 00:03:54,520 e, por exemplo, podemos encaminhar isso digamos adereços. onDelete. 52 00:03:54,520 --> 00:04:00,400 Então, chamamos uma função que foi passada para esse componente no suporte onDelete, não 53 00:04:00,410 --> 00:04:05,980 o estamos definindo agora, mas agora estamos chamando algo nesse suporte e 54 00:04:05,980 --> 00:04:12,610 agora podemos ir ao local, ao aplicativo. js em que usamos o item de meta e adicionamos o 55 00:04:12,610 --> 00:04:18,820 suporte onDelete em vez de onPress e onDelete agora devem apontar para uma função porque estamos esperando uma função aqui em nosso 56 00:04:18,820 --> 00:04:25,030 item de meta porque o onPress espera uma função e estamos simplesmente encaminhando o que o onDelete aponta para o onPress. 57 00:04:25,840 --> 00:04:32,750 Portanto, o onDelete deve apontar para uma função e ela é apenas uma função que imprime funciona. No entanto, isso é pelo menos bom 58 00:04:32,980 --> 00:04:34,480 para testes, 59 00:04:34,480 --> 00:04:43,310 então vamos ver se eu aprendo React Native e adiciono isso e bato aqui aqui várias vezes, você vê esse 60 00:04:43,310 --> 00:04:49,940 feedback, esse leve efeito de opacidade aqui ao pressionar e, se eu fizer isso, você 61 00:04:49,940 --> 00:04:56,070 veja isso aqui no log, então funcionou. E você também vê o efeito da opacidade 62 00:04:56,110 --> 00:05:02,560 palpável. Isso realmente nos dá um feedback visual sobre o nosso toque, alterando a opacidade do elemento em 63 00:05:02,560 --> 00:05:03,600 que tocamos. 64 00:05:03,610 --> 00:05:10,930 Você também pode controlar essa opacidade configurando o suporte de opacidade ativo aqui, em opacidade selecionável e configurando-o como um número, 65 00:05:10,930 --> 00:05:13,620 por exemplo, para. 8 e agora 66 00:05:13,750 --> 00:05:18,120 isso será muito menos transparente, por exemplo, se você pressionar. 67 00:05:18,130 --> 00:05:23,980 Então agora se eu aprendi React Native aqui e pressiono isso, o efeito da opacidade é 68 00:05:23,980 --> 00:05:29,860 muito menos forte como você pode ver. Assim, você pode configurar isso de acordo com as suas necessidades e, com isso, 69 00:05:29,860 --> 00:05:35,980 pode não apenas adicionar um efeito agradável, mas, é claro, também ouvir o efeito da imprensa. Agora, a opacidade palpável não é o único 70 00:05:35,980 --> 00:05:43,720 componente que você pode usar; além da opacidade palpável, você também possui destaque palpável, então vamos usar o palpite agora para ver 71 00:05:43,750 --> 00:05:48,850 como isso se comporta e a ideia geral é a mesma com o palpável 72 00:05:48,880 --> 00:05:55,570 palpável, você também pode ouvir para pressionar eventos, para esses eventos de alto nível, esses eventos pré-configurados, mas o 73 00:05:55,570 --> 00:05:57,370 feedback visual será diferente. 74 00:05:57,460 --> 00:06:01,980 Aqui, não mudaremos a opacidade do elemento empacotado, mas a cor do plano de fundo. 75 00:06:02,020 --> 00:06:06,520 Então agora, se eu aprender React Native e tocar nele, agora 76 00:06:06,520 --> 00:06:11,830 a cor de fundo muda para preto e, claro, isso aqui neste caso não 77 00:06:11,830 --> 00:06:17,260 é o efeito visual que queremos. Agora você também pode configurar a opacidade ativa lá, 78 00:06:17,260 --> 00:06:22,660 se quiser, pode configurar qual atraso é assumido para uma pressão prolongada. Você também pode ter feito 79 00:06:22,660 --> 00:06:29,080 isso na opacidade sensível, para que você possa configurar esse efeito e simplesmente brincar com isso para tenha uma ideia 80 00:06:29,080 --> 00:06:30,360 de como usá-lo. 81 00:06:30,700 --> 00:06:40,240 Além da opacidade palpável e do realce palpável, você também possui feedback nativo palpável e que só funciona no Android. Por enquanto, você não sabe descobrir se isso 82 00:06:40,240 --> 00:06:45,150 roda no Android ou não, mostrarei como determinar qual plataforma você está executando mais 83 00:06:45,190 --> 00:06:48,550 tarde, por enquanto, vamos usar isso e você não 84 00:06:48,550 --> 00:06:53,980 poderá testá-lo no simulador do iPhone, mas aqui no Android, se eu adicionar agora, verá que 85 00:06:53,980 --> 00:06:58,140 obtém esse efeito cascata agora se testar isso aqui e, é claro, 86 00:06:58,140 --> 00:07:04,930 você também pode configurar esse efeito aqui com acessórios que você pode definir e, como sempre, os documentos oficiais também 87 00:07:05,090 --> 00:07:10,400 são um ótimo lugar para se você quiser saber mais sobre como configurar isso, para 88 00:07:10,400 --> 00:07:11,080 que 89 00:07:11,090 --> 00:07:14,360 esse efeito cascata possa seja legal no Android também. 90 00:07:14,420 --> 00:07:19,940 E por último, mas não menos importante, também é possível tocar sem feedback e isso faz o 91 00:07:20,000 --> 00:07:25,700 que o nome sugere, ele permite que você registre esses eventos, mas não fornece feedback visual, porque às 92 00:07:25,700 --> 00:07:31,970 vezes você só quer ter algo em que possa tocar, mas realmente não não quero dar nenhum feedback ao usuário. 93 00:07:32,240 --> 00:07:34,740 Então, aqui, eu posso tocar isso 94 00:07:34,820 --> 00:07:37,760 o quanto quiser, a torneira é registrada e, portanto, 95 00:07:37,760 --> 00:07:44,210 vejo a saída aqui, mas não obtemos feedback visual. Portanto, esses componentes tocáveis são realmente importantes no React 96 00:07:44,240 --> 00:07:51,140 Native porque permitem anexar ouvintes de toque normais de alto nível, como onPress, onLongPress e assim por diante, a qualquer 97 00:07:51,230 --> 00:07:57,080 componente do React Native e com isso você pode criar seus próprios componentes tocáveis, seus próprios botões 98 00:07:57,080 --> 00:07:59,980 , seus próprios links, o que você precisar. 99 00:07:59,980 --> 00:08:08,800 Agora, voltarei à opacidade palpável, porque eu gosto desse efeito de opacidade, mas realmente sinta-se à vontade para pausar o vídeo aqui e brincar com 100 00:08:08,800 --> 00:08:14,410 esses diferentes efeitos palpáveis e brincar com as diferentes configurações que você pode aplicar lá, 101 00:08:14,410 --> 00:08:16,490 obviamente nós ' O uso 102 00:08:16,570 --> 00:08:19,990 do toque é intenso ao longo de todo o curso; 103 00:08:19,990 --> 00:08:26,020 portanto, veremos eles muitas vezes, mas esse também é um ótimo local para você começar a usar 104 00:08:26,140 --> 00:08:27,940 esses componentes. Como eu 105 00:08:27,940 --> 00:08:33,040 disse, irei com opacidade palpável aqui e agora o próximo passo é garantir que não apenas registremos 106 00:08:33,040 --> 00:08:36,700 algo no console, mas que realmente excluamos o item que foi pressionado.