it-swarm.com.de

Native Card-Karussellansicht reagieren?

 enter image description here

Weiß jemand, wie wir diese Ansicht in React Native erreichen können, oder gibt es irgendwelche verfügbaren Komponenten, die bei diesem Problem helfen können?

Ich habe auch in der F8 2016-App gesehen, wie man den Übergang und die karussellartige Ansicht mit horizontalem Scrollen erreicht.

10
vizFlux

Sie können dies mit ScrollView mit aktiviertem Paging unter iOS und ViewPagerAndroid unter Android erreichen.

Da F8 eine Open-Source-App ist, können Sie sehen, dass es tatsächlich verwendet wird: https://github.com/fbsamples/f8app/blob/master/js/common/ViewPager.js

Diese Komponente stellt alle Seiten dar.

Wenn Sie nur die sichtbaren, linken und rechten Seiten anzeigen lassen möchten, um Speicherplatz zu sparen, ist eine weitere Komponente darauf aufgebaut: https://github.com/fbsamples/f8app/blob/master /js/common/Carousel.js

Es gibt verschiedene andere ähnliche Implementierungen:

Ich empfehle jedoch nicht https://github.com/leecade/react-native-swiper , da ich einige Probleme damit hatte.

15
Jean Regisser

Ich weiß, dass die Frage alt ist, aber ein Mitarbeiter und ich mussten vor kurzem eine Komponente erstellen, die diese besonderen Bedürfnisse erfüllt. Wir haben am Ende Open-Sourcing gemacht, also können Sie folgendes versuchen: react-native-snap-carousel .

Das Plugin ist jetzt auf FlatList (Versionen> = 3.0.0) aufgebaut, was großartig ist, um eine große Anzahl von Elementen zu verarbeiten. Es bietet auch Previews (der Effekt, nach dem Sie gesucht haben), Einrasteffekt, Parallax Images, RTL-Unterstützung und mehr.

Sie können sich das showcase anschauen, um zu verstehen, was damit erreicht werden kann. Zögern Sie nicht, Ihre Erfahrungen mit dem Plugin zu teilen, da wir immer versuchen, es zu verbessern.

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


Edit: zwei neue Layouts wurden in Version 3.6.0 eingeführt (eines mit einem Kartenstapeleffekt und das andere mit einem Zunderähnlichen Effekt). Genießen!

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

14
bend

Wenn man von der swiper -Komponente spricht, die das Beste der Welt behauptet, funktioniert es immer noch nicht (Stand November 2018), wie in der offiziellen swiper -rea-native-Dokumentation beschrieben. Das Problem und eine Problemumgehung wird in der swiper-Ausgabe 444 beschrieben:

In der Fehlermeldung (unter Android) wird console.error: "fontFamily 'Arial' is not a system font and has not been loaded through Exponent.Font.loadAsync. angezeigt.

Zach Dixon stellte eine elegante Schnelllösung bereit, die ich hier für alle Bequemlichkeit wiederhole. Verwenden Sie einfach das folgende JSX-Snippet in Ihrer render()- Funktion, um zu vermeiden, dass eine neue Schriftart benötigt wird: 

<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>

Für diejenigen, die nur an Erklärungen interessiert sind, wie ein Karussell nur mit Scroll-View implementiert werden kann, empfehle ich ein Tutorial zu einem einfachen Bildkarussell mit ScrollView . Das Tutorial ist unkompliziert und erläutert die Dinge, die zu erledigen sind, aber Sie können es nicht außerhalb der Box in oder über anderen View-Elementen verwenden. Insbesondere funktioniert das Schnappen nicht so gut (auf Android). 

0
B--rian