水平滾動視圖捕捉反應本土

Question

您好我想實現scrollview捕捉到中心 像下面gif鏈接

Check This Gif

但未能如願。以下是我的反應原生代碼來實現這一點。

或者是否有任何方法滾動到滾動視圖元素的特定索引像android？

任何幫助，將不勝感激。 在此先感謝

  <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

有幾種選擇。這裏有兩個我已經嘗試過，工作正常。我更喜歡第二個，因爲它的文檔說「像ListView，這可以渲染數百頁沒有性能問題」。

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

Answer 2

你不需要，你可以做到這一點與滾動型其他庫。所有你需要的是在你的組件中添加以下道具。

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

檢查這個零食關於如何實現更多的細節它 https://snack.expo.io/H1CnjIeDb