admin管理员组文章数量:1318155
import React, { useRef, useState, useCallback } from 'react';
import { View, Animated } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
const InfoBox = ({ info }: Props) => {
const [currenPos, setCurrentPos] = useState<number>(0);
const translateY = useRef(new Animated.Value(0)).current;
const onGestureEvent = useCallback(
Animated.event(
[
{
nativeEvent: {
translationY: translateY,
},
},
],
{
useNativeDriver: true,
},
),
[],
);
const handleTransformStyle = {
transform: [
{
translateY,
},
{
translateX: -55,
},
],
};
return (
<View style={styles.container}>
<PanGestureHandler
onGestureEvent={onGestureEvent}
>
<Animated.View style={[styles.handleBar, handleTransformStyle]}>
<View style={styles.separator} />
</Animated.View>
</PanGestureHandler>
</View>
);
};
export default InfoBox;
I have provided a very simple example of PanGestureHandler
. On moving the box for the first time, it moves to a position and stays at that position. But, if I try to move it again, it starts from position zero instead of starting from the same position where I had left it.
Any help would be much appreciated.
EDIT
I have realized this occurs due to the offset getting reset.
import React, { useRef, useState, useCallback } from 'react';
import { View, Animated } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
const InfoBox = ({ info }: Props) => {
const [currenPos, setCurrentPos] = useState<number>(0);
const translateY = useRef(new Animated.Value(0)).current;
const onGestureEvent = useCallback(
Animated.event(
[
{
nativeEvent: {
translationY: translateY,
},
},
],
{
useNativeDriver: true,
},
),
[],
);
const handleTransformStyle = {
transform: [
{
translateY,
},
{
translateX: -55,
},
],
};
return (
<View style={styles.container}>
<PanGestureHandler
onGestureEvent={onGestureEvent}
>
<Animated.View style={[styles.handleBar, handleTransformStyle]}>
<View style={styles.separator} />
</Animated.View>
</PanGestureHandler>
</View>
);
};
export default InfoBox;
I have provided a very simple example of PanGestureHandler
. On moving the box for the first time, it moves to a position and stays at that position. But, if I try to move it again, it starts from position zero instead of starting from the same position where I had left it.
Any help would be much appreciated.
EDIT
I have realized this occurs due to the offset getting reset.
Share Improve this question edited Jul 17, 2020 at 20:46 shet_tayyy asked Jul 16, 2020 at 22:24 shet_tayyyshet_tayyy 5,75512 gold badges53 silver badges93 bronze badges1 Answer
Reset to default 10I have found a solution to this problem.
Add onHandlerStateChange
to PanGestureHandler
:
<PanGestureHandler
onGestureEvent={onPanGestureEvent}
onHandlerStateChange={onHandlerStateChange}
>
...
</PanGestureHandler>
Then, create a onHandlerStateChange
function like so:
const onHandlerStateChange = useCallback(() => {
translateY.extractOffset();
}, []);
translateY.extractOffset();
performed the magic. It sets the offset value. Phew!
版权声明:本文标题:javascript - Position resets to 0 while using PanGestureHandler from react-native-gesture-handler - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742042637a2417618.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论