代码之家 › 专栏 › 技术社区 › principiorum

为什么在动画中滚动视图。视图不工作?

react-native reactjs javascript

1

principiorum · 技术社区 · 6 年前

我想在这里问个问题,我已经用pan responder制作了可拖动的视图。我设法使它只上下移动。这是我的pan响应程序配置

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
       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不会滚动。我不知道为什么会这样,谢谢。

1 回复 | 直到 6 年前

1

0

RY_ Zheng 5 年前

上 ScrollView ,有一个默认的JS pan响应程序。在这里,您创建 PanResponder 在 Animated.View 动画视图 成为触摸的回应者,而不是。

您可以在 卷轴视图 卷轴视图 . 通过这样做可以滚动。

代码可能如下:

    _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; 
           }
        },
        // .... 
    })

日本证券交易所

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

2

-1

oma 6 年前

我正在这样使用,它正在我的项目中工作:

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