我是ReactNative的新手,我为我的项目做SwipeButton。但我对useAnimatedGestureHandler有如下问题:
TypeError: (0, _reactNativeReanimated.useAnimatedGestureHandler) is not a function. (In '(0, _reactNativeReanimated.useAnimatedGestureHandler)(0)', '(0, _reactNativeReanimated.useAnimatedGestureHandler)' is undefined)我想可能是因为它的版本是还原的-v2,而我使用的是reactivev1,这里有人能为我把这个代码转换为rev1吗,
我的代码如下所示:
import { View, Text, ViewBase } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, {
interpolate,
useAnimatedGestureHandler,
useSharedValue,
useAnimatedStyle
} from 'react-native-reanimated';
const SampleTest = (props) => {
const buttonVal = useSharedValue(0);
const handleGesture = useAnimatedGestureHandler({
onStart: (_, ctx) => {
ctx.x = buttonVal.value;
},
onActive: ({ translationX }, ctx) => {
buttonVal.value = translationX + ctx.x;
},
onEnd: ({ translationX }) => {
if (translationX > _WIDTH / 3) {
buttonVal.value = withTiming(_WIDTH * 0.85);
} else {
buttonVal.value = withTiming(0);
}
}
});
const pathAnimatedStyle = useAnimatedStyle(() => {
return {
width: interpolate(
buttonVal.value,
[0, _WIDTH * 0.85],
[50, _WIDTH * 0.85]
),
height: 50,
borderRadius: 25,
backgroundColor: 'gray',
position: 'absolute'
};
});
return (
<>
<PanGestureHandler onGestureEvent={handleGesture}>
<Animated.View
style={{
width: '85%',
height: 50,
borderRadius: 25,
backgroundColor: 'yellow',
shadowColor: 'gray',
justifyContent: 'center',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
}}
>
<Text
style={{
textAlign: 'center',
opacity: 0.9,
color: 'white',
fontWeight: 'bold'
}}
>
Swipe button
</Text>
<Animated.View style={pathAnimatedStyle}></Animated.View>
</Animated.View>
</PanGestureHandler>
</>
);
};谢谢各位。
发布于 2022-10-19 13:13:43
用<PanGestureHandler/>处理程序包装<GestureHandlerRootView/>
https://stackoverflow.com/questions/71851849
复制相似问题