React Native：约束Animated.Value [英] React Native: Constraining Animated.Value

问题描述

我正在制作一个React-Native应用程序，情况是这样的：
我希望用户能够平移视图，但不能完全按照他想要的方式进行。
我想限制用户拖动视图时可以移动多少。

I'm making a React-Native app and the scenario is this: I want the user to be able to pan a view, but not wholly the way he wants. I'd like to constraint how much the view can move when being dragged by the user.

我已阅读 PanResponder 和 Animated API的文档（多次），但找不到能做到这一点的任何东西，我也找不到其他实现类似功能的人。

I've read through the documentation of both the PanResponder and Animated API (multiple times), but can't find anything that does this, neither can I find anyone else that implemented something alike.

限制了响应者的事件？

Constraining in the panresponder's event?

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

在应用变换时是否受约束？

Constraining while applying the transforms?

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

推荐答案

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

Or you could use the extrapolate, extrapolateRight or extrapolateLeft properties:

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

在我看来与@ mieszko4一样，其中我不知道为什么需要 Infinity 黑客。

seems to me to do the same as @mieszko4, of which I don't know why the Infinity hack was needed.

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

这篇关于React Native：约束Animated.Value的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！