Para que possamos adicionar nossos
elementos aqui, o que não podemos fazer é excluí-los e esse é o próximo passo
que quero dar, a próxima coisa que quero implementar aqui.
Obtivemos nosso FlatList com todos esses itens de meta e seria bom se pudéssemos tocar em um item
de meta, portanto, nesse
item de lista e quando tocamos nele, simplesmente o removemos da lista.
Agora, o bom é que podemos identificar todos os itens de maneira única, porque cada item aqui tem um
ID, para que possamos usá-lo e nos livrarmos do item,
o que falta é que podemos tocá-lo. Agora, em nosso
próprio componente, não podemos simplesmente adicionar o
onPress ou algo assim, isso não funcionará. Se o log do
console funcionar aqui, não o
veremos assim que pressionar o item.
Então, deixe-me mostrar isso para você, se você deixar isso recarregar aqui e depois aprendermos novamente o React Native e eu
adiciono isso e bato nisso várias vezes aqui, estou tocando aqui, você não vê a saída aqui e faz Nesse
sentido, este é um componente personalizado e o onPress agora seria simplesmente um suporte que passamos para esse componente,
esse suporte estaria conectado a essa função, mas nada está acionando esse suporte de dentro do componente.
Portanto, teremos que entrar nesse componente e garantir que essa visualização seja pressionável.
Agora, na verdade, uma exibição possui vários adereços que nos ajudam a ouvir eventos; se
você digitar aqui, seu IDE, se você estiver usando o Código do Visual Studio, deverá fornecer um preenchimento
automático e você verá que muitos eventos podem ser
realizados. ouça, por exemplo, onTouchEnd realmente nos ajuda a ouvir quando o usuário basicamente toca nisso e termina
de tocar nele.
O problema disso é que onTouchEnd e alguns outros ouvintes que chegamos aqui estão em um nível
muito baixo.
Podemos configurar ouvintes muito detalhados para vários eventos aqui, mas, por exemplo, onTouchEnd não nos diz quanto tempo o
usuário pressionou isso e
se você precisar descobrir se foi um toque longo ou um toque curto, você precisaria
manualmente defina um cronômetro quando o usuário começar a tocar nisto no onTouchStart, aguarde onTouchEnd e decida manualmente
se o tempo foi suficiente ou não.
No entanto, normalmente não é o que você deseja fazer, é claro que você tem
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
que fazer todo o trabalho pesado. levantando por conta
própria, você teria que escrever muito código para descobrir que tipo de toque era por conta própria.
O bom é que o React Native já cobriu você.
Há um componente palpável incorporado que você pode importar e palpável é um componente que você pode agrupar em
torno de qualquer outro componente
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
não renderiza nada que você pode ver na tela, mas isso envolverá e registrará o evento de toque no
filho em que você toca e pode ser tocado e, em seguida, fornece o evento de toque final, para eventos de
toque mais detalhados que foram pré-configurados para você. Agora, para ser exato, tocável como esse não pode ser
usado como um componente, ele atua mais como uma classe pai para o React Native porque existem
várias versões específicas
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,
porque agora esse é realmente
um componente que você pode usar. Agora, você verá que, se você digitar, recebe alguns eventos de toque de
alto nível que pode ouvir, como onPress ou onLongPress,
e é isso claro que muito mais útil.
Agora, aqui, eu posso ouvir onPress, o que significa que é um evento de imprensa normal, como poderíamos
ouvir no botão e, quando isso é acionado, o que podemos fazer, é claro, podemos executar qualquer código que quisermos
e, por exemplo, podemos encaminhar isso digamos adereços. onDelete.
Então, chamamos uma função que foi passada para esse componente no suporte onDelete, não
o estamos definindo agora, mas agora estamos chamando algo nesse suporte e
agora podemos ir ao local, ao aplicativo. js em que usamos o item de meta e adicionamos o
suporte onDelete em vez de onPress e onDelete agora devem apontar para uma função porque estamos esperando uma função aqui em nosso
item de meta porque o onPress espera uma função e estamos simplesmente encaminhando o que o onDelete aponta para o onPress.
Portanto, o onDelete deve apontar para uma função e ela é apenas uma função que imprime funciona. No entanto, isso é pelo menos bom
para testes,
então vamos ver se eu aprendo React Native e adiciono isso e bato aqui aqui várias vezes, você vê esse
feedback, esse leve efeito de opacidade aqui ao pressionar e, se eu fizer isso, você
veja isso aqui no log, então funcionou. E você também vê o efeito da opacidade
palpável. Isso realmente nos dá um feedback visual sobre o nosso toque, alterando a opacidade do elemento em
que tocamos.
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,
por exemplo, para. 8 e agora
isso será muito menos transparente, por exemplo, se você pressionar.
Então agora se eu aprendi React Native aqui e pressiono isso, o efeito da opacidade é
muito menos forte como você pode ver. Assim, você pode configurar isso de acordo com as suas necessidades e, com isso,
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
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
como isso se comporta e a ideia geral é a mesma com o palpável
palpável, você também pode ouvir para pressionar eventos, para esses eventos de alto nível, esses eventos pré-configurados, mas o
feedback visual será diferente.
Aqui, não mudaremos a opacidade do elemento empacotado, mas a cor do plano de fundo.
Então agora, se eu aprender React Native e tocar nele, agora
a cor de fundo muda para preto e, claro, isso aqui neste caso não
é o efeito visual que queremos. Agora você também pode configurar a opacidade ativa lá,
se quiser, pode configurar qual atraso é assumido para uma pressão prolongada. Você também pode ter feito
isso na opacidade sensível, para que você possa configurar esse efeito e simplesmente brincar com isso para tenha uma ideia
de como usá-lo.
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
roda no Android ou não, mostrarei como determinar qual plataforma você está executando mais
tarde, por enquanto, vamos usar isso e você não
poderá testá-lo no simulador do iPhone, mas aqui no Android, se eu adicionar agora, verá que
obtém esse efeito cascata agora se testar isso aqui e, é claro,
você também pode configurar esse efeito aqui com acessórios que você pode definir e, como sempre, os documentos oficiais também
são um ótimo lugar para se você quiser saber mais sobre como configurar isso, para
que
esse efeito cascata possa seja legal no Android também.
E por último, mas não menos importante, também é possível tocar sem feedback e isso faz o
que o nome sugere, ele permite que você registre esses eventos, mas não fornece feedback visual, porque às
vezes você só quer ter algo em que possa tocar, mas realmente não não quero dar nenhum feedback ao usuário.
Então, aqui, eu posso tocar isso
o quanto quiser, a torneira é registrada e, portanto,
vejo a saída aqui, mas não obtemos feedback visual. Portanto, esses componentes tocáveis são realmente importantes no React
Native porque permitem anexar ouvintes de toque normais de alto nível, como onPress, onLongPress e assim por diante, a qualquer
componente do React Native e com isso você pode criar seus próprios componentes tocáveis, seus próprios botões
, seus próprios links, o que você precisar.
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
esses diferentes efeitos palpáveis e brincar com as diferentes configurações que você pode aplicar lá,
obviamente nós ' O uso
do toque é intenso ao longo de todo o curso;
portanto, veremos eles muitas vezes, mas esse também é um ótimo local para você começar a usar
esses componentes. Como eu
disse, irei com opacidade palpável aqui e agora o próximo passo é garantir que não apenas registremos
algo no console, mas que realmente excluamos o item que foi pressionado.