web-dev-qa-db-fra.com

Pagination en vue de défilement horizontal React-Native: Aperçu page suivante/Carte

Je souhaite une ScrollView horizontale avec la pagination activée avec une exigence particulière: chaque page (ou carte) correspond à 90% de la largeur du conteneur. Les 10% restants devraient être un aperçu de la page suivante.

Il est possible de faire cela avec ScrollView? Puis-je en quelque sorte spécifier la largeur de la pagination au lieu de prendre la largeur du conteneur?

Carousel (image prise à partir de cette question similaire: React Native Card Carousel view? )

react-nativepaginationscrollviewcarouselhorizontalscrollview
8
Johannes Filter

Vous pouvez absolument le faire avec ScrollView ou, mieux encore, FlatList. Cependant, la partie vraiment délicate est l'effet de capture. Vous pouvez utiliser les accessoires snapToInterval et snapToAlignment pour y parvenir (voir réponse de Vasil Enchev ); Malheureusement, ceux-ci sont uniquement iOS.

Un collègue et moi avons créé un plugin qui répond à ce besoin particulier. Nous avons fini par l'ouvrir en sourcing, vous devez donc essayer: react-native-snap-carousel .

Le plugin est maintenant construit sur FlatList (versions> = 3.0.0), ce qui est très pratique pour gérer un grand nombre d’éléments. Il fournit previews (l'effet recherché), effet de capture pour iOS et Android, images de parallaxe, support RTL, etc.

Vous pouvez jeter un coup d'œil à la vitrine pour comprendre ce que l'on peut en faire. N'hésitez pas à partager votre expérience avec le plugin car nous essayons toujours de l'améliorer.

react-native-snap-carousel archriss showcasereact-native-snap-carousel archriss aix

Edit: deux nouvelles mises en page } _ ont été introduits dans la version 3.6.0 (l’un avec un effet de pile de cartes et l’autre avec un effet semblable à un tinder). Prendre plaisir!

react-native-snap-carousel stack layoutreact-native-snap-carousel tinder layout

13
bend

Je passe beaucoup de temps à me battre avec ça jusqu'à ce que je sache, alors voici ma solution si cela aide quelqu'un. 

https://snack.expo.io/H1CnjIeDb

Le problème était que tous ces éléments étaient nécessaires et que la pagination devait être désactivée.

horizontal={true}
decelerationRate={0}
snapToInterval={width - 60}
snapToAlignment={"center"}
7
Vasil Enchev

Vous pouvez passer un accessoire horizontal à votre vue de défilement:

https://facebook.github.io/react-native/docs/scrollview.html#horizontal

Et vous pouvez ensuite créer une vue à l'intérieur pour spécifier vos exigences de largeur.

<ScrollView 
  ref={(snapScroll) => { this.snapScroll = snapScroll; }}
  horizontal={true} 
  decelerationRate={0}
  onResponderRelease={()=>{

   var interval = 300; // WIDTH OF 1 CHILD COMPONENT 

   var snapTo = (this.scrollingRight)? Math.ceil(this.lastx / interval) : 
    Math.floor(this.lastx / interval);
   var scrollTo = snapTo * interval;
   this.snapScroll.scrollTo(0,scrollTo);
  }}
  scrollEventThrottle={32}
  onScroll={(event)=>{
    var nextx = event.nativeEvent.contentOffset.x;
    this.scrollingRight = (nextx > this.lastx);
    this.lastx = nextx;
  }}
  showsHorizontalScrollIndicator={false} 
  style={styles.listViewHorizontal}
  >

  {/* scroll-children here */}

</ScrollView>
1
Gabriel Mesquita

Vous pouvez consulter les propriétés contentOffset et scrollTo de ScrollView. Logiquement, ce que vous pouvez faire, c'est que chaque fois que la page change (principalement lorsqu'elle est déplacée vers la page suivante), vous pouvez fournir un décalage supplémentaire de 10% ou plus selon vos besoins afin que l'élément suivant de la vue à défilement devienne visible. 

J'espère que cela vous aidera, dites-moi si vous avez besoin de plus de détails. 

0
Abhinandan Sahgal