React Native 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))
});

需要注意的重要一点是您不能直接获取动画值的值，您可以将对象分配给动画组件并神奇地更新，或者设置一个侦听器并获取值因为它已传递给您。

React Native PanResponder 偏移量不起作用

React Native PanResponder Offset not working

react-native

panresponder