为什么 Animated.View 中的 ScrollView 不起作用？答案

【问题标题】：why ScrollView inside Animated.View not working?为什么 Animated.View 中的 ScrollView 不起作用？
【发布时间】：2019-06-29 07:39:54
【问题描述】：

我想在这里提问，我已经使用平移响应器制作了可拖动的视图。我设法让它只上下移动。这是我的泛响应器配置

this.panResponder = PanResponder.create({
  onStartShouldSetPanResponder: (event, gesture) => true,
  // THIS TRACK MOVEMENT OF OUR FINGER 
  onPanResponderMove: (event, gesture) => {
    if (gesture.dy > 0) {
      this.position.setValue({ y: gesture.dy });
    }
  },
  onPanResponderRelease: (event, gesture) => {
    if (gesture.dy > SWIPE_THRESHOLD) {
      this.forceSwipeDown();
    } else {
       this.resetPosition();
    }
  },
});

我在animated.view中使用它，这里是代码

<Animated.View
       style={[modalCard, this.position.getLayout()]}
       {...this.panResponder.panHandlers}
      >
        {
          // XButton
        }
        <TouchableOpacity style={button} onPress={() => this.props.closeModal()}>
          <Icon 
            name='times'
            size={wp(20)}
            color='#A9A9A9'
          />
        </TouchableOpacity>
        <View style={topBorders}>
          <View style={doubeLine} />
        </View>
        {this.props.children}
      </Animated.View>

我的问题是，当我将 ScrollView 作为该组件的子级时，scrollview 不会滚动。我不知道为什么会这样，谢谢。

【问题讨论】：

这可能是由于Animated.View 上的手势处理程序覆盖了ScrollView 上的手势处理程序。
@Andrew 我跟你一样。有什么可能的解决方法吗？

标签： javascript reactjs react-native

【解决方案1】：

在ScrollView 上，有一个默认的 JS pan 响应器。在这里，您在Animated.View 中创建PanResponder。在谈判过程中，Animated.View成为了触碰的响应者，而ScrollView则不是。

解决办法：

您可以捕获ScrollView 之外的触摸事件，而忽略ScrollView 内部的触摸事件。通过这样做，ScrollView 可以滚动。

代码可能是这样的：

    _ignoreRegion = {
      x: 0,
      y: 0,
      width: 0,
      height: 0
    }


    _onLayout = ({
      nativeEvent: {
        layout: {
          x,
          y,
          width,
          height
        }
      }
    }) => {
      this._ignoreRegion = nativeEvent.layout;
    };

    _isInsideRegion = (x, y, region) => {
       return x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height;
    }

    this._panResponder = PanResponder.create({
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
           if (this._isInsideRegion(evt.pageX, evt.pageY, this._ignoreRegion)) {
             return false; 
           } else {
             return true; 
           }
        },
        // .... 
    })

JSX

 <Animated.View {...this._panResponder.panHandlers}>            
    <ScrollView onLayout={this._onLayout}/>
</Animated.View>

【讨论】：

【解决方案2】：

我是这样使用的，它正在我的项目中工作：

<Animated.View>
    <ScrollView>
        { this.renderMultimpleItems() }
    </ScrollView>
</Animated.View>

【讨论】：