Saltar al contenido

¿Vista del carrusel de tarjetas nativas de React?

Nuestro team redactor ha pasado mucho tiempo buscando la resolución a tus dudas, te dejamos la resolución por eso esperamos que sea de gran ayuda.

Solución:

Sé que la pregunta es antigua, pero hace poco un compañero de trabajo y yo tuvimos que crear un componente que respondiera a esta necesidad particular. Terminamos con el código abierto, por lo que es todo tuyo para probar: react-native-snap-carousel.

El complemento ahora está construido sobre FlatList (versiones >= 3.0.0), lo cual es excelente para manejar una gran cantidad de elementos. también proporciona vistas previas (el efecto que buscabas), efecto de chasquido, Imágenes de paralaje, Soporte RTLy más.

Puede echar un vistazo al escaparate para hacerse una idea de lo que se puede lograr con él. No dude en compartir su experiencia con el complemento, ya que siempre estamos tratando de mejorarlo.

escaparate de archriss de carrusel instantáneo de reacción nativa

archriss aix reaccionar-nativo-snap-carrusel


Editar: se han introducido dos nuevos diseños en la versión. 3.6.0 (uno con efecto pila de cartas y el otro con efecto tinder). ¡Disfrutar!

diseño de pila de react-native-snap-carouseldiseño de tinder de react-native-snap-carousel

Puede lograr esto usando ScrollView con paginación habilitada en iOS y ViewPagerAndroid en Android.

F8 es una aplicación de código abierto, puede ver que eso es lo que realmente está usando: https://github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js

Este componente representa todas las páginas.

Si solo desea que se representen las páginas visibles e izquierda y derecha para ahorrar memoria, hay otro componente integrado que lo hace: https://github.com/fbsamples/f8app/blob/master/js/common/ Carrusel.js

Hay varias otras implementaciones similares disponibles:

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

Sin embargo, no recomiendo https://github.com/leecade/react-native-swiper porque he tenido varios problemas con él.

Si haces scroll puedes encontrar las anotaciones de otros gestores de proyectos, tú además puedes mostrar el tuyo si te gusta.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *