Question

我正在尝试在react-native中实现拖放解决方案，并且如果要在视图的顶部10％和底部10％中拖动某个项目，则希望使我的平面列表滚动。到目前为止，我实现它的唯一方法是调用一个递归调度this._flatList.scrollToOffset({ offset, animated: false });的函数。当满足特定条件但滚动效果不连贯时，递归调用将停止。有什么建议可以使它更流畅吗？

// on move pan responder
onPanResponderMove: Animated.event([null, { [props.horizontal ? 'moveX' : 'moveY']: this._moveAnim }], {
        listener: (evt, gestureState) => {
          const { moveX, moveY } = gestureState
          const { horizontal } = this.props
          this._move = horizontal ? moveX : moveY;
          const { pageY } = evt.nativeEvent;
          const tappedPixel = pageY;
          const topIndex = Math.floor(((tappedPixel - this._distanceFromTop + this._scrollOffset) - this._containerOffset) / 85);
          const bottomIndex = Math.floor(((tappedPixel + (85 - this._distanceFromTop) + this._scrollOffset) - this._containerOffset) / 85);
          this.setTopAndBottom(topIndex, bottomIndex);
          this.scrolling = true;
          this.scrollRec();
        }
      }),
      
// recursive scroll function 
scrollRec = () => {
    const { activeRow } = this.state;
    const { scrollPercent, data, } = this.props;
    const scrollRatio = scrollPercent / 100;
    const isLastItem = activeRow === data.length - 1;
    const fingerPosition = Math.max(0, this._move - this._containerOffset);

    const shouldScrollUp = fingerPosition < (this._containerSize * scrollRatio); // finger is in first 10 percent
    const shouldScrollDown = !isLastItem && fingerPosition > (this._containerSize * (1 - scrollRatio)) // finger is in last 10

    const nextSpacerIndex = this.getSpacerIndex(this._move, activeRow);

    if (nextSpacerIndex >= this.props.data.length) { this.scrolling = false; return this._flatList.scrollToEnd(); }
    if (nextSpacerIndex === -1) { this.scrolling = false; return; }
    if (shouldScrollUp) this.scroll(-20);
    else if (shouldScrollDown) this.scroll(20);
    else { this.scrolling = false; return; };

    setTimeout(this.scrollRec, 50);
  }
  
/

Answer 1

是的，将options设置为true的侦听器将Animated.event对象传递到您的useNativeDriver

Animated.event([
  null,
  { [props.horizontal ? "moveX" : "moveY"]: this._moveAnim },
  { 
    listener: ...,
    useNativeDriver: true
  }
]);

应该使事情变得更加顺畅。

编辑：我觉得我应该补充一点，可能有一种更明智的方法来完成此操作，因为它的“无限”尺寸，您是否仅使用FlatList？

React-native平面列表可在触摸视图时保持滚动

1 个答案: