0

我针对此问题的完整源代码发布为 Expo 应用程序： https : //exp.host/@kevinoldlifeway/swipe-scrollview-of-webviews 以及 Github https://github.com/kevinold/swipe-scrollview -of-webviews

我正在 React Native 中构建一个书本视图。使用 ScrollView，我想左右滑动以浏览可能有几百到几千个标题的页面。

既然是这种情况，我的目标是只使用最少量的数据，以便用户能够在页面之间滑动，查看前一页和下一页。

我正在加载一个 3 元素数组，如下所示：

[Previous, Current, Next]

这将由 Redux 在 state 中更新（为了简单起见，这里没有使用），并且会重新渲染和重新聚焦列表。

我的目标是我ScrollView总是在“当前”页面上“居中”。

页面滚动到上一页和下一页由handleScroll加载适当的预计算数组的方法处理，以便当前页面保持焦点，但上一页和下一页（屏幕外）会适当更新。

    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 });
}

我尝试使用以下组合来平衡“当前”页面：

contentOffset={{ x: width, y: 0 }}上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 });
}

我也试过scrollTo在回调之后this.setState，但没有任何运气。

我想知道这种“居中”是否可以通过使用Animated.

4

1 回答 1

1

我试了一下，但我不完全确定我理解了这个问题，而且我不确定这会持续多久。

基本上我只是显着简化了 handleScroll 函数。首先检查我们是否处于滚动完成状态，如果是，则确定我们到达该屏幕时是“上一个”屏幕还是“下一个”屏幕 - 如果它已经是中间屏幕，则什么也不做。

我认为在您的代码中，问题在于如果它是中间屏幕，而不仅仅是第一个或最后一个屏幕，它会触发并加载数据。因此，每次转换都会触发两次。

这是我认为适合您的 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演示它。

于 2017-04-25T20:39:27.673 回答