RN升级后,React本机Pan响应器和内部滚动视图不起作用

时间:2019-10-24 15:00:24

标签: javascript react-native animation

我升级到本机版本以反应到59.1,并且平移响应器将无法通过内部滚动视图运行android,向下滚动并停止滚动,其平移响应器可以使用rn版本54.2,但我不明白为什么要更改平移响应者将无法使用新版本rn版本感谢您的响应

  onPanResponderMove: (evt, gestureState) => {
    let touches = evt.nativeEvent.touches;

    if (touches.length == 2) { 
      let touch1 = touches[0];  
      let touch2 = touches[1];
      let distance = (touch1.pageX - touch2.pageX) * (touch1.pageX - touch2.pageX) + (touch1.pageY - touch2.pageY) * (touch1.pageY - touch2.pageY) // 2 parmak(nokta) arasındaki mesafenin karesi
      distance = (Math.sqrt(distance) / 100).toFixed(2);  
      var difference = Math.abs((distance - this.lastDistanceBetweenTwoFingers).toFixed(3))  

      if (this.lastDistanceBetweenTwoFingers == undefined) {
        this.lastDistanceBetweenTwoFingers = distance  
      } else {

        if (!this.state.zooming && difference > 0.05) { 
          if (this.lastDistanceBetweenTwoFingers > distance) { 
            if (this.state.fontSize > 6) { 
              this.setState({
                zooming: true,
                zoomValue: distance,
                fontSize: parseInt((this.state.fontSize - difference * 2).toFixed(0))
              })
              this.myScrollVertical.scrollTo({
                x: 0,
                y: 0,
                animated: true
              })
              this.lastDistanceBetweenTwoFingers = distance
            }
          } else {
            if (this.state.fontSize < 20) {
              this.setState({
                zooming: true,
                zoomValue: distance,
                fontSize: this.state.fontSize + difference * 2
              })
              this.myScroll.scrollTo({
                x: 0,
                y: 0,
                animated: true
              })
              this.lastDistanceBetweenTwoFingers = distance
            }
          }

        }
      }
    } else {
      if (this.posFingerx == undefined) {
        this.posFingerx = touches[0].pageX  
        this.posFingery = touches[0].pageY
      } else {
        let _valueX = this.posFingerx - touches[0].pageX  
        let _valueY = this.posFingery - touches[0].pageY
        this.posFingerx = touches[0].pageX  
        this.posFingery = touches[0].pageY
        var scrollValueX = this.scrollViewXpos + _valueX  
        var scrollValueY = this.scrollViewYpos + _valueY
        if (scrollValueX >= 0 || scrollValueX <= 200) {
          this.myScroll.scrollTo({
            x: scrollValueX,
            y: 0,
            animated: true
          })
          this.scrollViewXpos = scrollValueX

        }

        if (scrollValueY >= -200 && scrollValueY <= 700) {
          this.myScrollVertical.scrollTo({
            x: 0,
            y: scrollValueY,
            animated: true
          })
          this.scrollViewYpos = scrollValueY
        }
      }
    }
  },

  onPanResponderRelease: (e, {vx, vy}) => {
    this.posFingerx = undefined
    this.lastDistanceBetweenTwoFingers = undefined

    this.state.pan.flattenOffset();
    Animated.timing(
      this.state.scale,
      {
        toValue: 1,
      }
    ).start();
  }
});

我这样使用scrollview,而不是滚动所有页面并滚动并停止

    <ScrollView
    ref={(ref) => this.myScroll = ref}
    style={styles.containerScrollView}
    horizontal={true}
    scrollEnabled = {false}
    >
  <ScrollView
    ref={(ref) => this.myScrollVertical = ref}
    style={styles.containerScrollView}
    vertical={true}
    scrollEnabled = {false}

    contentContainerStyle={styles.contentScroll}
    >
 <Animated.View style={textContainerStyle}
    {...this._panResponder.panHandlers}>

  <Text style={{
      fontFamily: _fontFamily,
      fontWeight: 'bold',
      fontSize: this.state.fontSize
    }}>

        {content}
      </Text>
  </Animated.View>

      </ScrollView>
  </ScrollView>

0 个答案:

没有答案