横の「スティッキー」の中心要素は、ネイティブのListView反応し、この問題の

Question

私の完全なソースコードは、万博アプリとして掲載されます。https://exp.host/@kevinoldlifeway/swipe-scrollview-of-webviewsだけでなく、Githubの上https://github.com/kevinold/swipe-scrollview-of-webviews

私はネイティブに反応におけるブックビューを構築しています。 ScrollViewを使用して、左右にスワイプして、数百から数千のタイトルを持つページをナビゲートしたいと思います。

私の目標は、ユーザーがページ間でスワイプすることができるように最小限のデータ量にすることです。直前のページと次のページを見ています。

私はそうのような3要素の配列をロードしています：Reduxのことで状態に更新される

[Previous, Current, Next] 

は（簡単な維持するために、ここで使用されていない）と再レンダリングし、リストを再び焦点を合わせるでしょう。

私の目標は、私のScrollViewが常に「現在の」ページの中央にあることです。

ページが前のページと次のページにスクロールされるのは、現在のページがフォーカスされたままで、前と次のページ（オフスクリーン）が適切に更新されるように適切な事前計算配列をロードするhandleScrollメソッドによって処理されます。私も中scrollToに試してみたScrollView

そして

componentDidMount() { 
    // Attempt to keep "center" element in array as focused "screen" in the horizontal list view 
    this.scrollView.scrollTo({ x: width, y: 0, animated: false }); 
} 

に

contentOffset={{ x: width, y: 0 }}：

handleScroll (event) { 
    //const x = event.nativeEvent.contentOffset.x; 

    const { activeIndex, scrollTimes } = this.state; 

    const windowWidth = Dimensions.get('window').width; 
    const eventWidth = event.nativeEvent.contentSize.width; 
    const offset = event.nativeEvent.contentOffset.x; 
    console.log('event width: ', eventWidth); 
    console.log('event offset: ', offset); 

    console.log('scrollTimes: ', scrollTimes); 
    //if (scrollTimes <= 1) return; 

    if (windowWidth + offset >= eventWidth) { 
     //ScrollEnd, do sth... 
     console.log('scrollEnd right (nextPage)', offset); 
     const nextIndex = activeIndex + 1; 
     console.log('nextIndex: ', nextIndex); 

    // Load next page 
    this.loadMore() 

    } else if (windowWidth - offset <= eventWidth) { 
     //ScrollEnd, do sth... 
     console.log('scrollEnd left (prevPage)', offset); 

    // Load prev page 
    this.loadPrev() 
    } 

    this.setState({ scrollTimes: scrollTimes + 1 }); 
} 

私はの組み合わせを使用して、 "現在" のページを両立しようとしていますthis.setStateの後にコールバックが、運がなかった。

この「センタリング」がAnimatedを使用して達成できるかどうかは疑問です。

Answer 1

私はこのショットを出しましたが、私はこの問題を理解していないと私は完全には分かりません。これがどれほどうまくいくかはわかりません。

基本的には、handleScroll関数を大幅に簡略化しました。最初にスクロールが完了しているかどうかをチェックし、そのスクリーンに着いたときに「前の」スクリーンまたは「次の」スクリーンであるかどうかを判断します。すでに中間スクリーンであれば何もしません。

あなたのコードでは、最初のまたは最後の画面ではなく、中央の画面であれば、データが起動してデータが読み込まれるという問題があったと思います。したがって、各トランジションに対して2回発射されます。

ここでhandleScrollは私がだと思うとがうまくいくと思います。

handleScroll (event) { 
    const offset = event.nativeEvent.contentOffset.x; 
    const mod = offset % width; 

    if (mod === 0) { // only transition on scroll complete 
    if (offset === width * 2) { // last screen 
     console.log('load more') 
     this.loadMore(); 
     this.scrollView.scrollTo({ x: width, y: 0, animated: false }); 
    } else if (offset !== width) { // first screen 
     console.log('load prev') 
     this.loadPrev(); 
     this.scrollView.scrollTo({ x: width, y: 0, animated: false }); 
    } 
    } 
} 

そしてSnackをデモしています。