Crea un carosello a schede in React Native
Per capire cosa sto cercando di costruire, per prima cosa, vediamo la demo:
Come puoi vedere dalle gif, abbiamo due parti per costruire questo componente:
- Le schede (che puoi vedere in alto)
- Giostra
Per le schede in alto, sto solo usando FlatList orizzontale e per il carosello sto usando il pacchetto react-native-snap-carouse l. vediamo poi come sono riuscito a risolvere questo problema.
Quindi con questo init otteniamo le schede e il carosello senza alcuna sincronizzazione.
Se controlliamo la seguente gif, vedremo quando cambiamo l'indice del carosello e andiamo a una categoria diversa di prodotto rendiamo attiva anche la stessa scheda della categoria modificando l'opacità e, allo stesso tempo, noterai che le schede sono ottenere centrato all'interno della nostra lista orizzontale. Perché se non lo centramo, le schede che sono al di fuori della larghezza dello schermo non entreranno nel nostro schermo e l'utente non noterà la scheda attiva.
Sto incollando lo snippet che fa questo lavoro
Bene, finora abbiamo visto come cambiare le schede quando scorriamo i nostri elementi nel carosello. Ora vediamo come possiamo raggiungere gli elementi corretti quando l'utente preme sulle schede.
Quindi è tutto! Dobbiamo tenere traccia della nostra scheda attiva e sincronizzare le schede e il carosello insieme.
Suggested posts
Ricerca di informazioni sui nomi di dominio
Un estratto da Small, Sharp Software Tools di Brian P. Hogan
Quando fai una richiesta a facebook.com, il tuo computer cerca il nome di dominio per tradurre quel nome di dominio in un indirizzo IP in modo che il tuo computer possa effettuare quella connessione.
Evitare le conseguenze devastanti di un ictus: imparare dal viaggio di una famiglia.
Introduzione Un ictus è un'emergenza medica che può colpire chiunque in qualsiasi momento. Si verifica quando il flusso sanguigno verso una parte del cervello viene interrotto, portando a un'improvvisa perdita della funzione cerebrale.
Related posts
La rivoluzione sul posto di lavoro: i migliori esperti discutono di lavoro ibrido e remoto
Nel panorama aziendale in rapida evoluzione di oggi, il concetto di lavoro ibrido e remoto ha acquisito uno slancio senza precedenti. Mentre le aziende continuano ad adattarsi alle mutevoli esigenze e aspettative dei propri dipendenti, esperti di vari settori si sono riuniti per discutere i vantaggi, le sfide e il futuro di questo modo di lavorare trasformativo.
La bugia del cowboy
Come le megacorporazioni hanno venduto agli americani una grossa falsità
È una brillante mattina d'oro sulle dolci colline dell'ovest, mentre i primi raggi di sole illuminano l'erba ghiacciata sulle pianure. Una mandria di placidi bovini Angus, nerissimi e massicci, si staglia contro l'alba mentre percorrono un sentiero battuto verso un luogo che tutti conoscono bene; il bancone della colazione.
Finanziare la rimozione del carbonio nell'anno fiscale 24
La ripartizione delle richieste di stanziamenti di Carbon180 in tutti i percorsi
Di Alyson Lee, consulente per gli affari governativi Il processo di stanziamento annuale del governo federale è fondamentale per i nostri sforzi per finanziare la rimozione dell'anidride carbonica (CDR). Ogni anno, Carbon180 invia richieste a vari uffici congressuali per aiutare a guidare dove fluiranno i dollari del prossimo anno.
Ricerca di informazioni sui nomi di dominio
Un estratto da Small, Sharp Software Tools di Brian P. Hogan
Quando fai una richiesta a facebook.com, il tuo computer cerca il nome di dominio per tradurre quel nome di dominio in un indirizzo IP in modo che il tuo computer possa effettuare quella connessione.