Horizontal scroll Schnappen reagieren nativer

Question

Hallo ich scrollview Snap zu erreichen versuchen, so zu zentrieren wie unten gif Link

Check This Gif

aber nicht in der Lage zu tun. Folgendes ist mein reaktiver nativer Code, um dies zu erreichen.

oder gibt es eine Methode zum Scrollen zu bestimmten Index von scrollview Elementen wie Android?

Jede Hilfe wäre willkommen. Vielen Dank im Voraus

  <ScrollView 

            style={[styles.imgContainer,{backgroundColor:colorBg,paddingLeft:20}]} 
            automaticallyAdjustInsets={false} 

            horizontal={true} 
            pagingEnabled={true} 
            scrollEnabled={true} 
            decelerationRate={0} 
            snapToAlignment='center' 
            snapToInterval={DEVICE_WIDTH-100} 
            scrollEventThrottle={16} 
            onScroll={(event) => { 
            var contentOffsetX=event.nativeEvent.contentOffset.x; 
            var contentOffsetY=event.nativeEvent.contentOffset.y; 

            var cellWidth = (DEVICE_WIDTH-100).toFixed(2); 
            var cellHeight=(DEVICE_HEIGHT-200).toFixed(2); 

            var cellIndex = Math.floor(contentOffsetX/ cellWidth); 

            // Round to the next cell if the scrolling will stop over halfway to the next cell. 
            if ((contentOffsetX- (Math.floor(contentOffsetX/cellWidth) * cellWidth)) > cellWidth) { 
            cellIndex++; 
            } 

            // Adjust stopping point to exact beginning of cell. 
            contentOffsetX = cellIndex * cellWidth; 
            contentOffsetY= cellIndex * cellHeight; 

            event.nativeEvent.contentOffsetX=contentOffsetX; 
            event.nativeEvent.contentOffsetY=contentOffsetY; 

            // this.setState({contentOffsetX:contentOffsetX,contentOffsetY:contentOffsetY}); 



            console.log('cellIndex:'+cellIndex); 

            console.log("contentOffsetX:"+contentOffsetX); 
             // contentOffset={{x:this.state.contentOffsetX,y:0}} 



            }} 
            > 
            {rows} 

           </ScrollView> 

Answer 1

Es gibt mehrere Optionen. Hier sind zwei, die ich versucht habe und gut funktionieren. Ich ziehe die zweite vor, weil das Dokument "wie ListView" Hunderte von Seiten ohne Leistungsproblem darstellen kann ".

1. react-native-page-swiper
2. react-native-viewpager

Answer 2

Sie brauchen keine anderen Bibliotheken Sie, dass mit Scroll tun können. Sie müssen lediglich die folgenden Requisiten in Ihrer Komponente hinzufügen.

horizontal= {true} 
    decelerationRate={0} 
    snapToInterval={200} //your element width 
    snapToAlignment={"center"} 

Überprüfen dieser Snack, um weitere Informationen darüber, wie es zu implementieren https://snack.expo.io/H1CnjIeDb