Quindi possiamo aggiungere i nostri elementi
qui, ciò che non siamo in grado di fare è eliminarli e questo è il prossimo passo
che voglio fare, la prossima cosa che voglio implementare qui.
Abbiamo ottenuto la nostra FlatList con tutti questi elementi obiettivo e sarebbe bello poter toccare un
tale obiettivo, quindi un
tale elemento dell'elenco e quando lo tocchiamo, lo rimuoviamo semplicemente dall'elenco.
Ora la cosa buona è che possiamo identificare in modo univoco ogni articolo perché ogni articolo qui ha un
ID, quindi possiamo usare quell'ID per esso e liberarci dell'elemento,
la cosa mancante è che possiamo toccarlo. Ora sul nostro
componente, non possiamo semplicemente aggiungere onPress o
qualcosa del genere, questo non funzionerà, se il registro della
console funziona qui, non vedremo
quel registro non appena premo l'elemento.
Quindi lascia che te lo mostri, se lasci che questo ricarichi qui e poi impariamo di nuovo React Native e
aggiungo questo e lo tocco più volte qui, sto toccando questo, non vedi l'output qui e rende senso,
questo è un componente personalizzato e onPress ora sarebbe semplicemente un prop che passiamo a questo componente, questo
prop sarebbe collegato a questa funzione, ma nulla sta innescando quel prop dall'interno del componente.
Quindi dovremo andare in quel componente e assicurarci che questa vista sia stampabile.
Ora in realtà, una vista ha vari oggetti di scena che ci aiutano ad ascoltare
gli eventi, se digiti qui, il tuo IDE, se stai usando Visual Studio Code dovrebbe darti un
po 'di completamento automatico e vedi che ci sono
molti eventi che puoi ascolta, ad esempio onTouchEnd, in realtà ci aiuta con l'ascolto quando l'utente lo tocca
e lo tocca.
Il problema è che onTouchEnd e un paio di altri ascoltatori che abbiamo qui sono a un livello
troppo basso.
Qui possiamo impostare ascoltatori molto dettagliati di vari eventi, ma ad esempio onTouchEnd non ci dice per quanto tempo
l'utente ha premuto questo
e se hai mai bisogno di scoprire se è stata una pressione lunga o una pressione
breve, dovresti manualmente impostare un timer quando l'utente inizia a toccarlo con onTouchStart, attendere onTouchEnd e quindi decidere manualmente
se è stato abbastanza lungo o meno.
In genere non è quello che vuoi fare, è ovviamente fantastico avere la
piena flessibilità di farlo, ma se vuoi questi eventi touch standard come la pressione lunga, beh, allora non è l'ideale perché dovresti
fare tutto il necessario sollevando da solo, dovresti
scrivere un sacco di codice per scoprire che tipo di tocco era da solo.
Il bello è che React Native ti ha coperto.
C'è un componente toccabile incorporato che puoi importare e toccabile è un componente che puoi
avvolgere su qualsiasi altro
componente che hai, quindi intorno a qualsiasi vista o testo o qualunque cosa tu abbia e non
è visibile, non rende nulla può vedere sullo schermo ma lo avvolgerà e registrerà l'evento tattile
sul bambino che avvolgi, toccabile e toccabile, quindi ti dà l'evento tattile finito, quindi eventi tattili più
dettagliati che sono stati preconfigurati per te. Ora per essere esatti, toccabile come questo non può
essere usato come componente, agisce più come una classe genitore per React Native perché ci sono
più versioni specifiche
di touchable che dovresti effettivamente usare, ad esempio c'è un'opacità tangibile. Usiamo l'opacità toccabile invece di toccare perché ora
è davvero un componente
che puoi usare e ora qui, vedrai che se digiti, otterrai un paio di eventi touch di
alto livello che puoi ascoltare, come onPress o onLongPress
e questo è ovviamente molto più utile.
Ora qui, posso ascoltare onPress, il che significa che è un normale evento di stampa come potremmo ascoltare
sul pulsante e quando questo viene attivato, cosa possiamo fare ovviamente possiamo eseguire qualsiasi codice che vogliamo e, ad esempio,
potremmo inoltrarlo per dire oggetti di scena. onDelete.
Quindi chiamiamo una funzione che è stata passata in questo componente sul puntello onDelete, non
stiamo impostando questo prop in questo momento ma ora stiamo chiamando qualcosa su questo
prop e ora possiamo andare sul posto, all'app. js dove utilizziamo l'oggetto obiettivo e aggiungiamo il prop
onDelete invece di onPress e onDelete ora dovrebbero puntare a una funzione perché ci aspettiamo una funzione qui nel
nostro obiettivo perché onPress si aspetta una funzione e stiamo semplicemente inoltrando ciò che onDelete punta su onPress.
Quindi onDelete dovrebbe puntare a una funzione ed è solo una funzione che stampa funziona. Tuttavia, questo è almeno buono per i
test, quindi
vediamo se imparo React Native e lo aggiungo e lo tocco qui più volte, vedi ho ricevuto questo feedback,
questo leggero effetto di opacità qui alla pressione e se lo faccio, tu vedi
qui nel registro, quindi ha funzionato. E vedi anche l'effetto dell'opacità tangibile,
questo in realtà ci dà un feedback visivo sul nostro tocco cambiando l'opacità dell'elemento che
abbiamo toccato.
Puoi anche controllare questa opacità impostando qui il prop di opacità attiva, su un'opacità tangibile e impostandola su un numero,
ad esempio su. 8 e ora
questo sarà molto meno trasparente, ad esempio se lo premi.
Quindi ora se ho imparato React Native qui e premo questo, l'effetto di opacità
è molto meno forte come puoi vedere. Quindi puoi configurarlo in base alle tue esigenze e con ciò,
non solo puoi aggiungere un bell'effetto ma ovviamente anche ascoltare l'effetto stampa. Ora l'opacità tangibile non è l'unico componente
che puoi usare sebbene, oltre all'opacità tangibile, tu abbia anche evidenziazione tangibile, quindi usiamo l'evidenziazione toccabile ora invece di vedere
come si comporta e l'idea generale è la stessa con l'evidenziazione toccabile, puoi
anche ascoltare per premere eventi, quindi per questi eventi di alto livello, questi eventi preconfigurati ma il
feedback visivo sarà diverso.
Qui, non cambieremo l'opacità dell'elemento avvolto ma il colore di sfondo.
Quindi ora se imparo React Native e lo tocco, vedrai
ora il colore di sfondo diventa nero e, naturalmente, qui in questo caso
non è l'effetto visivo che vogliamo. Ora puoi anche configurare l'opacità attiva lì,
se lo desideri, puoi configurare quale ritardo viene assunto per una pressione prolungata, avresti
potuto farlo anche sull'opacità toccabile, quindi puoi configurare quell'effetto e puoi semplicemente giocare con quello per avere un'idea
di come usarlo.
Oltre all'opacità tangibile e all'evidenziazione tangibile, hai anche un feedback nativo tangibile e che funziona solo su Android e per ora, non sai come scoprire se questo funziona
su Android o no, ti mostrerò come determinare quale piattaforma lo farai più tardi,
per ora usiamolo e non sarai in grado di
testarlo sul simulatore di iPhone ma qui su Android, se ora aggiungo questo, vedrai che ottieni
questo effetto a catena ora se provi questo qui e, naturalmente,
puoi anche configurare questo effetto qui con oggetti di scena che puoi impostare e, come sempre, i documenti ufficiali sono
anche un ottimo posto dove andare se vuoi saperne di più su come configurarlo, quindi
avere
quell'effetto a catena può sii gentile anche su Android.
E, ultimo ma non meno importante, c'è anche qualcosa di tangibile senza feedback e questo fa
quello che suggerisce il nome, ti permette di registrare questi eventi ma non fornisce feedback visivi perché
a volte vuoi solo avere qualcosa che puoi toccare ma dove effettivamente don non voglio dare alcun feedback all'utente.
Quindi qui, posso toccare questo
quanto voglio, il rubinetto è registrato e quindi
vedo l'output qui ma non otteniamo feedback visivi. Quindi questi componenti toccabili sono davvero importanti in React
Native perché ti permettono di collegare i normali ascoltatori touch di alto livello, come onPress, onLongPress e così via a qualsiasi
componente in React Native e con ciò puoi costruire i tuoi componenti toccabili, i tuoi pulsanti ,
i tuoi link, qualunque cosa tu abbia bisogno.
Ora qui, tornerò all'opacità tangibile perché mi piace questo effetto di opacità ma davvero, sentiti libero di mettere in pausa il video qui
e giocare con questi diversi effetti toccabili e giocare con le diverse configurazioni che puoi
applicare lì, ovviamente noi '
Utilizzerò pesantemente il touchable durante l'intero corso, quindi li
vedremo un sacco di volte, ma questo è anche un ottimo posto per iniziare con questi
componenti. Come ho
detto, andrò con opacità tangibile qui e ora il passo successivo è assicurarci che non ci limitiamo a
registrare qualcosa sulla console ma che eliminiamo effettivamente l'elemento che è stato premuto.