react-native - 如何在复活 2 中使用 diffClamp？

Question

我正在尝试根据来自 reanimated 2 useAnimatedScrollHandler的滚动事件隐藏和显示标题，我需要使用diffClamp因此，每当用户向上滚动时，标题的显示时间应该比整个滚动事件contentOffset.y值短，但是问题是 diffClamp 是我认为从 reanimated v1开始的，我需要使用 useAnimatedStyle 钩子来为 reanimated v2中的样式设置动画，最后它给出了一个错误。

有人可以帮忙吗？

Answer 1

const clamp = (value, lowerBound, upperBound) => {
    "worklet";
    return Math.min(Math.max(lowerBound, value), upperBound);
};

const scrollClamp = useSharedValue(0);

const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event, ctx) => {

        const diff = event.contentOffset.y - ctx.prevY;

        scrollClamp.value = clamp(scrollClamp.value + diff, 0, 200);

    },
    onBeginDrag: (event, ctx) => {
        ctx.prevY = event.contentOffset.y;
    }
});

const RStyle = useAnimatedStyle(() => {

    const interpolateY = interpolate(
        scrollClamp.value,
        [0, 200],
        [0, -200],
        Extrapolate.CLAMP
    )

    return {
        transform: [
            { translateY: interpolateY }
        ]
    }
})