我正在创建一个React-Native应用程序,方案是这样的:我希望用户能够平移视图,但不是完全按照他想要的方式.我想限制视图在被用户拖动时可以移动多少.
我已经阅读了API PanResponder和AnimatedAPI 的文档(多次),但找不到任何可以做到这一点的东西,我也找不到任何其他类似的东西.
限制在响应者的事件中?
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) 我正在建立一个音乐播放器,我专注于进度条.我能够对滑动手势做出反应,但我无法限制手势的移动距离.
这就是我到目前为止所做的.我把所有东西都减少到了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)