Блог

У меня проблема с панреответчиком из-за выхода за пределы экрана телефона. Я получаю этот код от https://reactnative.dev/docs/panresponder#example. Вот несколько фотографий.

поле может перетаскиваться/выходить за пределы экрана, как этого избежать? Я ценю вашу помощь.

Вы можете использовать Animated.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}]}]} />)