1 00:00:02,330 --> 00:00:03,970 Quindi possiamo aggiungere i nostri elementi 2 00:00:03,970 --> 00:00:08,150 qui, ciò che non siamo in grado di fare è eliminarli e questo è il prossimo passo 3 00:00:08,190 --> 00:00:10,880 che voglio fare, la prossima cosa che voglio implementare qui. 4 00:00:10,960 --> 00:00:16,420 Abbiamo ottenuto la nostra FlatList con tutti questi elementi obiettivo e sarebbe bello poter toccare un 5 00:00:16,450 --> 00:00:18,010 tale obiettivo, quindi un 6 00:00:18,130 --> 00:00:21,960 tale elemento dell'elenco e quando lo tocchiamo, lo rimuoviamo semplicemente dall'elenco. 7 00:00:21,970 --> 00:00:27,550 Ora la cosa buona è che possiamo identificare in modo univoco ogni articolo perché ogni articolo qui ha un 8 00:00:27,550 --> 00:00:30,590 ID, quindi possiamo usare quell'ID per esso e liberarci dell'elemento, 9 00:00:30,760 --> 00:00:35,240 la cosa mancante è che possiamo toccarlo. Ora sul nostro 10 00:00:35,260 --> 00:00:38,730 componente, non possiamo semplicemente aggiungere onPress o 11 00:00:38,740 --> 00:00:44,040 qualcosa del genere, questo non funzionerà, se il registro della 12 00:00:44,050 --> 00:00:46,300 console funziona qui, non vedremo 13 00:00:46,300 --> 00:00:49,570 quel registro non appena premo l'elemento. 14 00:00:49,570 --> 00:00:55,990 Quindi lascia che te lo mostri, se lasci che questo ricarichi qui e poi impariamo di nuovo React Native e 15 00:00:55,990 --> 00:01:02,050 aggiungo questo e lo tocco più volte qui, sto toccando questo, non vedi l'output qui e rende senso, 16 00:01:02,050 --> 00:01:07,990 questo è un componente personalizzato e onPress ora sarebbe semplicemente un prop che passiamo a questo componente, questo 17 00:01:07,990 --> 00:01:13,420 prop sarebbe collegato a questa funzione, ma nulla sta innescando quel prop dall'interno del componente. 18 00:01:14,020 --> 00:01:18,850 Quindi dovremo andare in quel componente e assicurarci che questa vista sia stampabile. 19 00:01:19,030 --> 00:01:24,200 Ora in realtà, una vista ha vari oggetti di scena che ci aiutano ad ascoltare 20 00:01:24,280 --> 00:01:30,190 gli eventi, se digiti qui, il tuo IDE, se stai usando Visual Studio Code dovrebbe darti un 21 00:01:30,570 --> 00:01:33,830 po 'di completamento automatico e vedi che ci sono 22 00:01:33,940 --> 00:01:40,150 molti eventi che puoi ascolta, ad esempio onTouchEnd, in realtà ci aiuta con l'ascolto quando l'utente lo tocca 23 00:01:40,180 --> 00:01:41,450 e lo tocca. 24 00:01:41,620 --> 00:01:48,340 Il problema è che onTouchEnd e un paio di altri ascoltatori che abbiamo qui sono a un livello 25 00:01:48,430 --> 00:01:49,300 troppo basso. 26 00:01:49,480 --> 00:01:56,020 Qui possiamo impostare ascoltatori molto dettagliati di vari eventi, ma ad esempio onTouchEnd non ci dice per quanto tempo 27 00:01:56,020 --> 00:01:57,960 l'utente ha premuto questo 28 00:01:58,090 --> 00:02:03,640 e se hai mai bisogno di scoprire se è stata una pressione lunga o una pressione 29 00:02:03,640 --> 00:02:10,090 breve, dovresti manualmente impostare un timer quando l'utente inizia a toccarlo con onTouchStart, attendere onTouchEnd e quindi decidere manualmente 30 00:02:10,090 --> 00:02:12,480 se è stato abbastanza lungo o meno. 31 00:02:12,610 --> 00:02:16,870 In genere non è quello che vuoi fare, è ovviamente fantastico avere la 32 00:02:16,870 --> 00:02:24,100 piena flessibilità di farlo, ma se vuoi questi eventi touch standard come la pressione lunga, beh, allora non è l'ideale perché dovresti 33 00:02:24,100 --> 00:02:26,770 fare tutto il necessario sollevando da solo, dovresti 34 00:02:26,770 --> 00:02:31,390 scrivere un sacco di codice per scoprire che tipo di tocco era da solo. 35 00:02:31,390 --> 00:02:34,200 Il bello è che React Native ti ha coperto. 36 00:02:34,240 --> 00:02:40,660 C'è un componente toccabile incorporato che puoi importare e toccabile è un componente che puoi 37 00:02:40,660 --> 00:02:42,670 avvolgere su qualsiasi altro 38 00:02:42,760 --> 00:02:49,660 componente che hai, quindi intorno a qualsiasi vista o testo o qualunque cosa tu abbia e non 39 00:02:49,660 --> 00:02:56,200 è visibile, non rende nulla può vedere sullo schermo ma lo avvolgerà e registrerà l'evento tattile 40 00:02:56,200 --> 00:03:03,190 sul bambino che avvolgi, toccabile e toccabile, quindi ti dà l'evento tattile finito, quindi eventi tattili più 41 00:03:03,190 --> 00:03:09,070 dettagliati che sono stati preconfigurati per te. Ora per essere esatti, toccabile come questo non può 42 00:03:09,070 --> 00:03:13,900 essere usato come componente, agisce più come una classe genitore per React Native perché ci sono 43 00:03:13,900 --> 00:03:15,040 più versioni specifiche 44 00:03:15,160 --> 00:03:21,730 di touchable che dovresti effettivamente usare, ad esempio c'è un'opacità tangibile. Usiamo l'opacità toccabile invece di toccare perché ora 45 00:03:21,730 --> 00:03:23,980 è davvero un componente 46 00:03:23,980 --> 00:03:30,760 che puoi usare e ora qui, vedrai che se digiti, otterrai un paio di eventi touch di 47 00:03:30,760 --> 00:03:34,140 alto livello che puoi ascoltare, come onPress o onLongPress 48 00:03:34,210 --> 00:03:37,120 e questo è ovviamente molto più utile. 49 00:03:37,120 --> 00:03:42,910 Ora qui, posso ascoltare onPress, il che significa che è un normale evento di stampa come potremmo ascoltare 50 00:03:42,910 --> 00:03:49,290 sul pulsante e quando questo viene attivato, cosa possiamo fare ovviamente possiamo eseguire qualsiasi codice che vogliamo e, ad esempio, 51 00:03:49,360 --> 00:03:54,520 potremmo inoltrarlo per dire oggetti di scena. onDelete. 52 00:03:54,520 --> 00:04:00,400 Quindi chiamiamo una funzione che è stata passata in questo componente sul puntello onDelete, non 53 00:04:00,410 --> 00:04:05,980 stiamo impostando questo prop in questo momento ma ora stiamo chiamando qualcosa su questo 54 00:04:05,980 --> 00:04:12,610 prop e ora possiamo andare sul posto, all'app. js dove utilizziamo l'oggetto obiettivo e aggiungiamo il prop 55 00:04:12,610 --> 00:04:18,820 onDelete invece di onPress e onDelete ora dovrebbero puntare a una funzione perché ci aspettiamo una funzione qui nel 56 00:04:18,820 --> 00:04:25,030 nostro obiettivo perché onPress si aspetta una funzione e stiamo semplicemente inoltrando ciò che onDelete punta su onPress. 57 00:04:25,840 --> 00:04:32,750 Quindi onDelete dovrebbe puntare a una funzione ed è solo una funzione che stampa funziona. Tuttavia, questo è almeno buono per i 58 00:04:32,980 --> 00:04:34,480 test, quindi 59 00:04:34,480 --> 00:04:43,310 vediamo se imparo React Native e lo aggiungo e lo tocco qui più volte, vedi ho ricevuto questo feedback, 60 00:04:43,310 --> 00:04:49,940 questo leggero effetto di opacità qui alla pressione e se lo faccio, tu vedi 61 00:04:49,940 --> 00:04:56,070 qui nel registro, quindi ha funzionato. E vedi anche l'effetto dell'opacità tangibile, 62 00:04:56,110 --> 00:05:02,560 questo in realtà ci dà un feedback visivo sul nostro tocco cambiando l'opacità dell'elemento che 63 00:05:02,560 --> 00:05:03,600 abbiamo toccato. 64 00:05:03,610 --> 00:05:10,930 Puoi anche controllare questa opacità impostando qui il prop di opacità attiva, su un'opacità tangibile e impostandola su un numero, 65 00:05:10,930 --> 00:05:13,620 ad esempio su. 8 e ora 66 00:05:13,750 --> 00:05:18,120 questo sarà molto meno trasparente, ad esempio se lo premi. 67 00:05:18,130 --> 00:05:23,980 Quindi ora se ho imparato React Native qui e premo questo, l'effetto di opacità 68 00:05:23,980 --> 00:05:29,860 è molto meno forte come puoi vedere. Quindi puoi configurarlo in base alle tue esigenze e con ciò, 69 00:05:29,860 --> 00:05:35,980 non solo puoi aggiungere un bell'effetto ma ovviamente anche ascoltare l'effetto stampa. Ora l'opacità tangibile non è l'unico componente 70 00:05:35,980 --> 00:05:43,720 che puoi usare sebbene, oltre all'opacità tangibile, tu abbia anche evidenziazione tangibile, quindi usiamo l'evidenziazione toccabile ora invece di vedere 71 00:05:43,750 --> 00:05:48,850 come si comporta e l'idea generale è la stessa con l'evidenziazione toccabile, puoi 72 00:05:48,880 --> 00:05:55,570 anche ascoltare per premere eventi, quindi per questi eventi di alto livello, questi eventi preconfigurati ma il 73 00:05:55,570 --> 00:05:57,370 feedback visivo sarà diverso. 74 00:05:57,460 --> 00:06:01,980 Qui, non cambieremo l'opacità dell'elemento avvolto ma il colore di sfondo. 75 00:06:02,020 --> 00:06:06,520 Quindi ora se imparo React Native e lo tocco, vedrai 76 00:06:06,520 --> 00:06:11,830 ora il colore di sfondo diventa nero e, naturalmente, qui in questo caso 77 00:06:11,830 --> 00:06:17,260 non è l'effetto visivo che vogliamo. Ora puoi anche configurare l'opacità attiva lì, 78 00:06:17,260 --> 00:06:22,660 se lo desideri, puoi configurare quale ritardo viene assunto per una pressione prolungata, avresti 79 00:06:22,660 --> 00:06:29,080 potuto farlo anche sull'opacità toccabile, quindi puoi configurare quell'effetto e puoi semplicemente giocare con quello per avere un'idea 80 00:06:29,080 --> 00:06:30,360 di come usarlo. 81 00:06:30,700 --> 00:06:40,240 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 82 00:06:40,240 --> 00:06:45,150 su Android o no, ti mostrerò come determinare quale piattaforma lo farai più tardi, 83 00:06:45,190 --> 00:06:48,550 per ora usiamolo e non sarai in grado di 84 00:06:48,550 --> 00:06:53,980 testarlo sul simulatore di iPhone ma qui su Android, se ora aggiungo questo, vedrai che ottieni 85 00:06:53,980 --> 00:06:58,140 questo effetto a catena ora se provi questo qui e, naturalmente, 86 00:06:58,140 --> 00:07:04,930 puoi anche configurare questo effetto qui con oggetti di scena che puoi impostare e, come sempre, i documenti ufficiali sono 87 00:07:05,090 --> 00:07:10,400 anche un ottimo posto dove andare se vuoi saperne di più su come configurarlo, quindi 88 00:07:10,400 --> 00:07:11,080 avere 89 00:07:11,090 --> 00:07:14,360 quell'effetto a catena può sii gentile anche su Android. 90 00:07:14,420 --> 00:07:19,940 E, ultimo ma non meno importante, c'è anche qualcosa di tangibile senza feedback e questo fa 91 00:07:20,000 --> 00:07:25,700 quello che suggerisce il nome, ti permette di registrare questi eventi ma non fornisce feedback visivi perché 92 00:07:25,700 --> 00:07:31,970 a volte vuoi solo avere qualcosa che puoi toccare ma dove effettivamente don non voglio dare alcun feedback all'utente. 93 00:07:32,240 --> 00:07:34,740 Quindi qui, posso toccare questo 94 00:07:34,820 --> 00:07:37,760 quanto voglio, il rubinetto è registrato e quindi 95 00:07:37,760 --> 00:07:44,210 vedo l'output qui ma non otteniamo feedback visivi. Quindi questi componenti toccabili sono davvero importanti in React 96 00:07:44,240 --> 00:07:51,140 Native perché ti permettono di collegare i normali ascoltatori touch di alto livello, come onPress, onLongPress e così via a qualsiasi 97 00:07:51,230 --> 00:07:57,080 componente in React Native e con ciò puoi costruire i tuoi componenti toccabili, i tuoi pulsanti , 98 00:07:57,080 --> 00:07:59,980 i tuoi link, qualunque cosa tu abbia bisogno. 99 00:07:59,980 --> 00:08:08,800 Ora qui, tornerò all'opacità tangibile perché mi piace questo effetto di opacità ma davvero, sentiti libero di mettere in pausa il video qui 100 00:08:08,800 --> 00:08:14,410 e giocare con questi diversi effetti toccabili e giocare con le diverse configurazioni che puoi 101 00:08:14,410 --> 00:08:16,490 applicare lì, ovviamente noi ' 102 00:08:16,570 --> 00:08:19,990 Utilizzerò pesantemente il touchable durante l'intero corso, quindi li 103 00:08:19,990 --> 00:08:26,020 vedremo un sacco di volte, ma questo è anche un ottimo posto per iniziare con questi 104 00:08:26,140 --> 00:08:27,940 componenti. Come ho 105 00:08:27,940 --> 00:08:33,040 detto, andrò con opacità tangibile qui e ora il passo successivo è assicurarci che non ci limitiamo a 106 00:08:33,040 --> 00:08:36,700 registrare qualcosa sulla console ma che eliminiamo effettivamente l'elemento che è stato premuto.