Question

我有一个ScrollView组件（在React Native [iOS]中），它是垂直分页的，并填充了全高图像。

结果是一个垂直可移动的画廊＆＃39;我只希望用户能够滚动 一次的图像。

触发onMomentumScrollEnd时，我会删除最顶层的图像，并将滚动偏移重置为零。然而，由于图像内容的状态改变，scrollTo呼叫不同步并导致视觉故障（即，最顶部的图像在被删除时闪烁）。我在尝试改变状态后尝试拨打scrollTo电话，但无济于事。

我也在onContentSizeChange触发器中尝试过，例如：

//...<ScrollView> props:
onContentSizeChange={(contentWidth, contentHeight)=>{
  this.photoScroll.scrollTo({x: 0, y: 0, animated: false});
}}

有没有办法同步＆＃39;通过ScrollView电话进行scrollTo({x: 0, y: 0, animated: false})内容调整？

注意：我正在使用create-react-native-app并且真的不需要弹出 - 作为以前的iOS开发者，我知道有些库可以处理这种行为，但我希望以某种方式用vanilla-React实现这一点。

注2：目前主要对iOS实施感兴趣 - Android是一个奖励。

代码附录：

滚动查看组件：

  <ScrollView
    ref={(ref) => this.photoScroll = ref}
    pagingEnabled
    style={{
      flex: 1,
    }}
    onScroll={this.onScroll}
    scrollEventThrottle={16}
    scrollEnabled={this.scrollEnabled}
    pinchGestureEnabled={false}
    onMomentumScrollBegin={this.onMomentumScroll}
    onMomentumScrollEnd={this.offMomentumScroll}
    onContentSizeChange={(contentWidth, contentHeight)=>{
      this.photoScroll.scrollTo({x: 0, y: 0, animated: false});
    }}
  >
    {/* Array of image source-views, stored in State */}
    {demoImages}
  </ScrollView>

删除图像数据的类方法：

  offMomentumScroll = (event) => { // onMomentumScrollEnd
    this.isScrolling = false; 
    this.shouldCancelScroll = false; // used to block touches
    this.recalibratePhotos();
  }

  recalibratePhotos = () => {
    const { height, width } = Dimensions.get('window');
    const { scrollOffset } = this;
    const numberToDelete = scrollOffset / height;

    let photoData = this.state.photoData.slice();
    photoData.splice(0, numberToDelete);

    this.setState({
      photoData,
    }, () => {
      this.scrollEnabled = true; // used to block extra touches
      // onScroll has also appeared here — still glitches
    });

  }

将ScrollView滚动到内容更改的顶部，没有毛刺（React Native）

0 个答案: