web-dev-qa-db-ja.com

水平スクロールビューのスナップはネイティブに反応します

こんにちは私はscrollview以下のようにセンターにスナップしようとしていますgifリンク

このGifをチェック

しかし、そうすることはできません。以下は、これを実現するための私の反応するネイティブコードです。

またはAndroid？のようなscrollview要素の特定のインデックスにスクロールする方法がありますか？

任意の助けをいただければ幸いです。前もって感謝します

         <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>
iosreact-nativehorizontalscrollviewreact-native-scrollview
21
Srinivas Guni

あなたはScrollViewでそれを行うことができる他のライブラリを必要としません。必要なのは、コンポーネントに次の小道具を追加することです。

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

実装方法の詳細については、このスナックを確認してください https://snack.expo.io/H1CnjIeDb

38
Vasil Enchev

いくつかのオプションがあります。ここに、私が試したものの2つを示します。 docが「ListViewのように、これはパフォーマンスの問題なしに何百ものページをレンダリングできる」と言っているので、私は2番目のものを好みます。

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

pagingEnabledでScrollViewプロパティを使用します。

const screenHeight = Dimensions.get('window').height;

class Screen extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ScrollView pagingEnabled>
        <Page1 style={{height: screenHeight}} />
        <Page2 style={{height: screenHeight}} />
      </ScrollView>
    );
  }
}
1
phatmann