Réagir Natif De Défilement Horizontale Vue Pagination: Aperçu De La Page Suivante/Carte
Je veux à l'horizontale de la ScrollView avec la pagination activé avec une exigence particulière: chaque page (ou de la carte) est de 90% du récipient large. Les 10% restants devraient être un aperçu de la page suivante.
Il est possible de le faire avec le ScrollView? Je peux en quelque sorte de spécifier la largeur de la pagination au lieu de prendre la largeur du conteneur?
(image prise à partir de cette question similaire: Réagir Carte Native vue Carrousel?)
OriginalL'auteur Johannes Filter | 2017-04-04
Vous devez vous connecter pour publier un commentaire.
Vous pouvez tout à fait le faire avec
ScrollView
ou, encore mieux,FlatList
. Toutefois, la partie vraiment difficile est l'alignement à effet. Vous pouvez utiliser des accessoiressnapToInterval
etsnapToAlignment
pour l'atteindre (voir Vasil Enchev de réponse); malheureusement, ce ne sont iOS seulement.Un co-travailleur et j'ai créé un plugin qui répond à ce besoin particulier. Nous avons fini par l'open-source, donc c'est à toi d'essayer:
réagissent-native-snap-carrousel
.Le plugin est maintenant construit sur le haut de
FlatList
(versions >= 3.0.0), ce qui est excellent pour gérer de grands nombres d'éléments. Il fournit aperçus (l'effet que vous êtes après), accrochage effet pour iOS et Android, parallaxe images, RTL soutien, et plus encore.Vous pouvez prendre un coup d'oeil à la vitrine pour obtenir une compréhension de ce qui peut être atteint avec elle. N'hésitez pas à partager votre expérience avec le plugin depuis que nous sommes toujours en train de l'améliorer.
Edit : deux nouvelles mises en page ont été introduites dans la version
3.6.0
(l'une avec une pile de cartes de l'effet et l'autre avec une matière-comme effet). Profitez-en!Bien sûr 😉 Ici un exemple simple.
OriginalL'auteur bend
Je passe beaucoup de temps à lutter contre avec jusqu'à ce que j'ai compris, voici donc ma solution si ça aide quelqu'un.
https://snack.expo.io/H1CnjIeDb
Problème a été tous ces services ont été requis et de la pagination doit être éteint
OriginalL'auteur Vasil Enchev
Vous pouvez passer une horizontale des accessoires afin votre de défilement de la vue:
https://facebook.github.io/react-native/docs/scrollview.html#horizontal
Et puis vous pouvez créer une vue de l'intérieur afin de spécifier la largeur de votre exigences.
horizontal={true} pagingEnabled={true}
que les accessoires dans la ScrollView. Mais le "faire défiler la vue s'arrête sur des multiples de défilement de la vue de la taille lors du défilement" facebook.github.io/réagir indigènes/docs/...J'éditerai avec quelque chose qui peut peut-être vous aider.
Voir aussi cette question de l'aide github.com/facebook/react-native/issues/1362
OriginalL'auteur Gabriel Mesquita
Vous pouvez regarder
contentOffset
etscrollTo
propriété de la ScrollView . Logiquement ce que vous pouvez faire est chaque fois que la page change(surtout quand déplacé à la prochaine page), vous pouvez offrir un décalage supplémentaire de 10% ou plus selon votre besoin, de sorte que l'élément suivant dans la scrollview devient visible .Espère que cette aide, laissez-moi savoir si vous avez besoin de détails supplémentaires .
OriginalL'auteur Abhinandan Sahgal