[英]Restrict panResponder from going outside the phone screen
I'm having a problem with panResponder from going outside the phone screen.我在使用 panResponder 时遇到问题,无法走出手机屏幕。 I get this code from https://reactnative.dev/docs/panresponder#example .
我从https://reactnative.dev/docs/panresponder#example得到这段代码。 Here are some photos.
这是一些照片。
the box is able to drag/go outside the screen, how to avoid this?该框可以拖/移到屏幕外,如何避免这种情况? I appreciate the help.
感谢您的帮助。
You can to make use of Animated.diffClamp or extrapolate您可以使用Animated.diffClamp或外推
diffClamp logic - diffClamp 逻辑-
const animtion = new Animated.ValueXY(0); // you need to update this while dragging
const translateX = Animated.diffClamp(animtion.x, 0, screenWidth - boxWidth);
const translateY = Animated.diffClamp(animtion.y, 0, screenHeight - boxHeight);
return(<View style={[styles.box,{transform:[{translateX},{translateY}]}]} />)
extrapolate logic -推断逻辑-
const animtion = new Animated.ValueXY(0); // you need to update this while dragging
const translateX = animation.x.interpolate({inputRange:[0,screenWidth - boxWidth],outputRange:[0,screenWidth - boxWidth], extrapolate: 'clamp'})
const translateY = animation.y.interpolate({inputRange:[0,screenHeight - boxHeight],outputRange:[0,screenHeight - boxHeight], extrapolate: 'clamp'})
return(<View style={[styles.box,{transform:[{translateX},{translateY}]}]} />)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.