Riattivazione della vista del carosello di carte nativi?

Question

Qualcuno sa come possiamo ottenere questo tipo di visualizzazione in React Native o sono disponibili componenti disponibili che possono aiutare su questo problema?

Ho visto anche nell'app F8 2016, ho cercato su come ottenere la transizione e la vista del carosello con scorrimento orizzontale.

Answer 1

È possibile ottenere questo utilizzando ScrollView con paging enabled su iOS e ViewPagerAndroid su Android.

F8 di essere una fonte di applicazione aperta, si può vedere che è quello che è in realtà utilizzando: https://github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js

Questo componente rende tutte le pagine.

Se si vuole solo per avere le pagine visibili e destra e sinistra resi per risparmiare memoria, c'è un altro componente costruita su di esso che lo fa: https://github.com/fbsamples/f8app/blob/master/js/common/Carousel.js

Ci sono varie altre implementazioni simili disponibili:

• https://js.coach/react-native?search=carousel
• https://js.coach/react-native?search=swiper

Tuttavia non sto raccomandando https://github.com/leecade/react-native-swiper perché ho avuto diversi problemi con esso.

Answer 2

So che la domanda è vecchia, ma un collega e di recente ho dovuto creare un componente che risponda a questa particolare esigenza. Abbiamo finito con l'open source, quindi è tutto tuo provare: react-native-snap-carousel.

Il plug-in è ora integrato in cima a FlatList (versioni> = 3.0.0), che è ottimo per gestire un numero enorme di elementi. Fornisce inoltre anteprime (l'effetto che erano dopo), scattare effetto, immagini parallasse, RTL supporto, e altro ancora.

È possibile dare un'occhiata allo showcase per capire cosa si può ottenere con esso. Non esitare a condividere la tua esperienza con il plugin poiché cerchiamo sempre di migliorarlo.

---

Edit: two new layouts sono stati introdotti nella versione 3.6.0 (uno con una pila di carte effetto e l'altra con un effetto di stoppa-like). Godere!