限制 panResponder 走出手机屏幕答案

【问题标题】：Restrict panResponder from going outside the phone screen限制 panResponder 走出手机屏幕
【发布时间】：2021-08-19 08:14:21
【问题描述】：

我遇到了 panResponder 无法进入电话屏幕的问题。我从https://reactnative.dev/docs/panresponder#example 获得此代码。这是一些照片。

盒子可以拖到屏幕外，如何避免？感谢您的帮助。

【问题讨论】：

标签： react-native animation react-animated panresponder

【解决方案1】：

您可以使用 Animated.diffClamp 或 extrapolate

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

【讨论】：