Question

我正在制作React-Native应用，方案是这样的：我希望用户能够平移视图，但不是完全按照他想要的方式。我希望约束用户在拖动时视图可以移动多少。

我已经阅读了PanResponder和Animated API的文档（多次），但无法找到执行此操作的任何内容，我也无法找到其他任何人实现了类似的东西。

限制panresponder的事件？

onPanResponderMove: Animated.event([null,{
    dx: this.state.pan.x,  //Some function here to constrain the value?
    dy: this.state.pan.y
}]),

应用变换时的约束？

style = {
    transform: {
        transformX: ...,//Use interpolate to constrain the values somehow?
        transformY: ...
    }
}

Answer 1

@stinodes提供的解决方案会降低性能。为什么不以下列方式使用interpolate：

const maxX = 200;
const constrainedX = this.state.pan.x.interpolate({
  inputRange: [0, maxX, Infinity],
  outputRange: [0, maxX, maxX]
})

Answer 2

我提出的解决方案：由于Animated.event()返回一个函数，您只需将处理过的gestureState（带约束值）传递给该函数即可它看起来像这样：

onPanResponderMove: (evt, gestureState) => {
    let newdx = gestureState.dx, //DO SOMETHING WITH YOUR VALUES
        newdy = gestureState.dy;
    Animated.event([null,{
        dx: this.state.pan.x,
        dy: this.state.pan.y
    }])(evt, {dx: newdx, dy: newdy});
},

它是否应该完成是值得商榷的。

Answer 3

或者您可以使用extrapolate，extrapolateRight或extrapolateLeft属性：

const maxX = 200;
const constrainedX = this.state.pan.x.interpolate({
  inputRange: [0, maxX],
  outputRange: [0, maxX],
  extrapolateRight: 'clamp'
})

在我看来和@ mieszko4一样，我不知道为什么需要Infinity hack。

https://facebook.github.io/react-native/docs/animations.html#interpolation

Answer 4

const constrainedX = this.state.pan.x.interpolate({
      inputRange: [leftLimit, 0, rightLimit],
      outputRange: [leftLimit, 0, rightLimit],
      extrapolate: 'clamp'
})

extapolate：“钳位”将使其保持在边界。

Answer 5

虽然这个帖子很旧，但我仍然没有发现其他人提到使用插值和钳位方法的警告，组件可能看起来卡在那里。我已经在 ReactNative PanResponder limit X position 和 Lock movement with PanResponder in react native 发布了我的解决方案来限制平移偏移量，所以我不会在这里重复。

编辑：这里是基本代码和更多解释

      onPanResponderGrant: () => {
        console.log("pan responder was granted access!")
        pan.setOffset({
          x: (pan.x._value>xMax)? xMax : (pan.x._value<xMin)? xMin: pan.x._value,
          y: (pan.y._value>yMax)? yMax : (pan.y._value<yMin)? yMin: pan.y._value,
        });
      },

没有这个，即使使用夹具，在将视图移动到限制 b/c 附近时也可能会遇到问题，他不知道输入、dx、距原点的累积距离是多少。他只知道它会被封顶。如果他不小心移到了极限之外，然后又想将视图移回，他将不知道需要多少滑动。使用 pan.setOffset 可以限制输入 dx，因此当将视图移动到限制附近时不会有任何猜测。

React Native：约束Animated.Value

5 个答案: