限制panResponder走出手机屏幕

Question

我在使用 panResponder 时遇到问题，无法走出手机屏幕。 我从https://reactnative.dev/docs/panresponder#example得到这段代码。 这是一些照片。

该框可以拖/移到屏幕外，如何避免这种情况？ 感谢您的帮助。

Answer 1

您可以使用Animated.diffClamp或外推

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}]}]} />)

推断逻辑-

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}]}]} />)