如何解决响应原生手势处理程序 - 多次调整拖动时元素跳转
我为我的项目构建滑块,滑块工作正常,但每次我调整拖动(使用 Circle 元素)时,圆圈都会跳转到他的初始状态 let translateX = sub(x,50 / 2);
请帮助我了解我需要添加什么,以便圆圈从他上次的位置继续。
我试图在 onDrop 函数中覆盖 translateX 但它不起作用 ->
() =>
cond(
eq(state,State.ACTIVE),call([translateX],([v]) => {
onDrop(v);
}),),[state,value],);
const onDrop = (e) => {
const diff = e - -firstNumber;
const lastOption = diff * offSet;
setTextValue((lastOption / 10).toFixed(2));
};
我的代码:
const width = Dimensions.get('window').width
const SLIDER_WIDTH = width - 200;
let offSet = 1000 / SLIDER_WIDTH;
let firstNumber = SLIDER_WIDTH - 25;
const [state,translationX] = useValues(
State.UNDETERMINED,(-SLIDER_WIDTH + 100) / 2,);
const gestureHandler = onGestureEvent({state,translationX});
const x = diffClamp(withOffset(translationX,state),-SLIDER_WIDTH + 50,50);
let translateX = sub(x,50 / 2);
const [textValue,setTextValue] = useState(50);
const value = round(multiply(divide(x,SLIDER_WIDTH),100));
useCode(
() =>
cond(
eq(state,([v]) => {
onDrop(v);
}),);
const onDrop = (e) => {
const diff = e - -firstNumber;
const lastOption = diff * offSet;
setTextValue((lastOption / 10).toFixed(2));
};
return (
<View>
<PanGestureHandler
minDist={0}
{...gestureHandler}
onHandlerStateChange={chosenValue}>
<Animated.View
style={{
position: 'absolute',top: 0,left: 0,width: CIRCLE_SIZE,height: CIRCLE_SIZE,transform: [{translateX}],}}>
<Animated.View
style={{
...StyleSheet.absoluteFillObject,}}>
<Circle {...{state}} />
</Animated.View>
</Animated.View>
</PanGestureHandler>
</View>
);
提前致谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。