[英]Restrict panResponder from going outside the phone screen
我在使用 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}]}]} />)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.