相关疑难解决方法(0)

React Native:约束Animated.Value

我正在创建一个React-Native应用程序,方案是这样的:我希望用户能够平移视图,但不是完全按照他想要的方式.我想限制视图在被用户拖动时可以移动多少.

我已经阅读了API PanResponderAnimatedAPI 的文档(多次),但找不到任何可以做到这一点的东西,我也找不到任何其他类似的东西.

限制在响应者的事件中?

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

应用变换时的约束?

style = {
    transform: {
        transformX: ...,//Use interpolate to constrain the values somehow?
        transformY: ...
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript animation react-native

9
推荐指数
3
解决办法
2957
查看次数

ReactNative PanResponder限制X位置

我正在建立一个音乐播放器,我专注于进度条.我能够对滑动手势做出反应,但我无法限制手势的移动距离.

这就是我到目前为止所做的.我把所有东西都减少到了minumal:

constructor(props) {
    super(props);

    this.state = {
      pan: new Animated.ValueXY()
    };
}

componentWillMount() {
    this._panResponder = PanResponder.create({
        onMoveShouldSetResponderCapture: () => true,
        onMoveShouldSetPanResponderCapture: () => true,
        onPanResponderGrant: (e, gestureState) => {


            // Set the initial value to the current state
            let x = (this.state.pan.x._value < 0) ? 0 : this.state.pan.x._value;


            this.state.pan.setOffset({ x, y: 0 });
            this.state.pan.setValue({ x: 0, y: 0 });


        },
        onPanResponderMove: Animated.event([
            null, { dx: this.state.pan.x, dy: 0 },
        ]),
        onPanResponderRelease: (e, { vx, vy }) => { …
Run Code Online (Sandbox Code Playgroud)

android gestures react-native

7
推荐指数
2
解决办法
2932
查看次数

标签 统计

react-native ×2

android ×1

animation ×1

gestures ×1

javascript ×1