反应本机 PanResponder 偏移不起作用

Question

我试图在用户第一次释放时保持平底锅 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() 传递值以用作主要组件中的缩放状态。

干杯！

Answer 1

我不确定这是您的问题，但是您直接访问 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 组件并神奇地更新，要么设置一个侦听器，然后按原样获取值传给你。