时间戳

首页 > 解决方案 > 反应本机 PanResponder 偏移不起作用

react-native - 反应本机 PanResponder 偏移不起作用

问题描述

我试图在用户第一次发布时保持平底锅 Y 偏移 - 我已经查看了如何使用以下方法完成此操作，但偏移被忽略：

constructor(props) {
super(props);

this._pan = new Animated.ValueXY();

this._pan.addListener(value => {
  this._value = value;
  const {height: windowHeight} = Dimensions.get('window');
  this.props.onZoomProgress(
    Math.min(Math.max((value.y * -1) / windowHeight, 0), 0.5),
  );
});

this._panResponder = PanResponder.create({
  onMoveShouldSetResponderCapture: () => true,
  onMoveShouldSetPanResponderCapture: () => true,

  onPanResponderGrant: (e, gestureState) => {
    this._pan.setOffset({x: 0, y: gestureState.dy});
    this._pan.setValue({x: 0, y: 0});
  },

  onPanResponderMove: (e, gestureState) => {
    this._pan.setValue({y: gestureState.dy, x: 0});
    console.log(this._pan.y);
  },

  onPanResponderRelease: (e, gestureState) => {
    this._pan.extractOffset();
  },
});
}

这是此功能的单独组件，因此我this.props.onZoomProgress()用于传递值以用作主要组件中的缩放状态。

干杯!

标签： react-nativepanresponder

解决方案

我不确定这是您的问题，但您直接访问您的Animated.ValueXY外观内部价值的部分对我来说是可疑的。通常，如果您想获得实际数字而不是让动画值完成工作，通常会添加一个侦听器。

像这样的东西：

this._pan.addListener(value => {
  this._value = value;
  const {height: windowHeight} = Dimensions.get('window');
  this.props.onZoomProgress(Math.min(Math.max((value.y * -1) / windowHeight, 0), 0.5))
});

需要注意的重要一点是，您不会直接获取 Animated Value 的值，您可以将对象分配给 Animated 组件并神奇地更新，或者您设置一个侦听器，并获取传入的值你。

推荐阅读