it-swarm.com.de

Reagierende horizontale Bildlaufansicht Paginierung: Vorschau nächste Seite/Karte

Ich möchte ein horizontales ScrollView mit aktivierter Paginierung mit einer speziellen Anforderung: Jede Seite (oder Karte) ist 90% der Containerbreite. Die restlichen 10% sollten eine Vorschau der nächsten Seite sein.

Ist dies mit ScrollView möglich? Kann ich irgendwie die Breite der Paginierung angeben, anstatt die Breite des Containers zu nehmen?

Carousel (Bild aus dieser ähnlichen Frage: React Native Card Carousel view? )

8
Johannes Filter

Das kann man mit ScrollView oder noch besser FlatList tun. Der wirklich knifflige Teil ist jedoch der Schnappeffekt. Sie können Requisiten snapToInterval und snapToAlignment verwenden, um dies zu erreichen (siehe Vasil Enchevs Antwort ); Leider sind dies nur iOS.

Ein Mitarbeiter und ich haben ein Plugin erstellt, das diesem besonderen Bedarf entspricht. 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 Previews (den Effekt, den Sie suchen), Snapping-Effekt für iOS und Android, 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

13
bend

Ich verbringe viel Zeit damit, mich damit zu beschäftigen, bis ich es herausgefunden habe. 

https://snack.expo.io/H1CnjIeDb

Das Problem war, dass dies alles erforderlich war und die Paginierung sollte deaktiviert werden

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

Sie können eine horizontale Requisite an Ihre Bildlaufansicht übergeben:

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

Anschließend können Sie eine Ansicht erstellen, um Ihre Breitenanforderungen festzulegen.

<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

Sie können die Eigenschaften contentOffset und scrollTo von ScrollView betrachten. Logischerweise können Sie bei jeder Änderung der Seite (meistens beim Verschieben auf die nächste Seite) einen zusätzlichen Versatz von etwa 10% angeben, sodass das nächste Element in der Bildlaufansicht sichtbar wird. 

Hoffe das hilft, lass es mich wissen, wenn du zusätzliche Details brauchst. 

0