水平scrollview捕捉反应原生 [英] Horizontal scrollview snapping react native

问题描述

您好我正在尝试实现 scrollview 按照以下 gif 链接中心>

检查此GIF
$ b

但无法这样做。以下是我的反应本机代码来实现这一点。

或者是否有任何方法可以滚动到像android这样的scrollview元素的特定索引？

任何帮助将不胜感激。
提前致谢

 < ScrollView 
 
 style = {[styles.imgContainer， {backgroundColor：colorBg，paddingLeft：20}]} 
 automaticAdjustInsets = {false} 
 
 horizo​​ntal = {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）; 
 
 //如果滚动停止到下一个单元格的一半，则转到下一个单元格。 
 if（（contentOffsetX-（Math.floor（contentOffsetX / cellWidth）* cellWidth））> cellWidth）{
 cellIndex ++; 
} 
 
 //将停止点调整到单元格的确切开头。 
 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> 
  

解决方案

您不需要其他库可以执行此操作使用ScrollView。您只需在组件中添加以下道具。

  horizo​​ntal = {true} 
 decelerationRate = {0 } 
 snapToInterval = {200} //你的元素宽度
 snapToAlignment = {center} 
  

查看这个零食，详细了解如何实施它
https://snack.expo .io / H1CnjIeDb

Hi I am trying to achieve scrollview snap to center like below gif link

Check This Gif

But unable to do so. Following is my react native code to achieve this.

or is there any method to scroll to particular index of scrollview elements like android ?

Any help would be appreciated. Thanks in advance

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

解决方案

You don't need other libraries you can do that with ScrollView. All you need is to add the following props in your component.

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

Check this snack for more details on how to implement it https://snack.expo.io/H1CnjIeDb

这篇关于水平scrollview捕捉反应原生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！