web-dev-qa-db-fra.com

Réagit de la vue de carte de carrousel de carte de membre autochtone?

 enter image description here

Est-ce que quelqu'un sait comment atteindre ce type de vue dans React Native, ou existe-t-il des composants disponibles pouvant aider à résoudre ce problème?

J'ai aussi vu dans l'application F8 2016 rechercher des solutions pour réaliser la transition et une vue en carrousel avec défilement horizontal.

javascriptiosfacebookreact-native
10
vizFlux

Vous pouvez y parvenir en utilisant ScrollView avec paging activé sur iOS et ViewPagerAndroid sur Android.

F8 étant une application open source, vous pouvez voir que c'est ce qu'il utilise: https://github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js

Ce composant rend toutes les pages.

Si vous souhaitez uniquement afficher les pages visibles et gauches et droites afin d'économiser de la mémoire, un autre composant construit au-dessus de ce composant le fait: https://github.com/fbsamples/f8app/blob/master /js/common/Carousel.js

Il existe diverses autres implémentations similaires disponibles:

Cependant, je ne recommande pas https://github.com/leecade/react-native-swiper car j'ai eu plusieurs problèmes avec cela.

15
Jean Regisser

Je sais que la question est ancienne, mais un collègue et moi-même avons récemment dû créer un élément qui réponde à 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 également previews (l’effet recherché), effet de capture, 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 amadou). Prendre plaisir!

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

14
bend

S'agissant du composant swiper réclamant le meilleur du monde, il ne fonctionne toujours pas immédiatement (à compter de novembre 2018), comme décrit dans la documentation officielle documentation de swiper-react-native . Le problème et une solution de contournement sont décrits dans le numéro de swiper 444 :

Le message d'erreur (sur Android) indique console.error: "fontFamily 'Arial' is not a system font and has not been loaded through Exponent.Font.loadAsync.

_ { Zach Dixon } _ fournit une solution rapide et élégante que je répète ici pour la commodité de tous. Utilisez simplement l'extrait JSX suivant dans votre fonction render()- pour éviter qu'une nouvelle police ne soit requise: 

<Swiper style={styles.wrapper} showsButtons={true} 
        nextButton={<Text>&gt;</Text>} prevButton={<Text>&lt;</Text>}>
  <View style={styles.slide1}><Text style>Slide 1</Text></View>
  <View style={styles.slide2}><Text style>Slide 2</Text></View>
  <View style={styles.slide3}><Text style>Slide 3</Text></View>
</Swiper>

Pour ceux qui sont intéressés par des explications sur la manière de mettre en œuvre un carrousel avec Scroll-View uniquement, je recommande un tutoriel sur un carrousel d'images simple avec ScrollView . Le didacticiel est simple et explique en détail les éléments à prendre en compte, mais vous ne pouvez pas l’utiliser hors de la boîte dans ou au-dessus d’autres éléments View. En particulier, la capture ne fonctionne pas trop bien (sur Android). 

0
B--rian