我遇到了 panResponder 无法走出电话屏幕的问题。我从https://reactnative.dev/docs/panresponder#example获得此代码。这里有一些照片。
该框能够拖动/移出屏幕,如何避免这种情况?我很感激帮助。
我遇到了 panResponder 无法走出电话屏幕的问题。我从https://reactnative.dev/docs/panresponder#example获得此代码。这里有一些照片。
该框能够拖动/移出屏幕,如何避免这种情况?我很感激帮助。
您可以使用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}]}]} />)