Задержка нижнего колонтитула в пользовательском листе реагировать на собственном листе. ⇐ Javascript

[Anonymous]

Я создал пользовательский лист в React Native, следуя онлайн -учебному пособию. Помимо типичного нижнего листа прокрутки, я решил добавить компонент заголовка и нижнего колонтитула в нижний лист с видом на прокрутку между ними. Нижний лист функционирует как и должно, за исключением одной проблемы. При перетаскивании, чтобы закрыть нижний лист, нижний колонтитул остается фиксированным в нижней части листа, пока заголовок не сжатся на него. Я попытался обернуть компонент нижнего колонтитула в анимированном представлении или анимировать сам нижний колонтитул, но поведение не меняется.import { forwardRef, useCallback, useImperativeHandle, useState } from "react";
import { Dimensions, View } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
runOnJS,
useAnimatedScrollHandler,
useAnimatedStyle,
useSharedValue,
withSpring,
withTiming,
} from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import BackDrop from "../Backdrop/BackDrop";
import { styledContainer, styledContentContainer, styledIndicator, styledIndicatorContainer } from "./styles/BottomSheetStyles";

export const BottomSheet = forwardRef(
(
{
snapTo,
backgroundColor,
backdropColour,
type,
children,
headerComponent,
footerComponent,
...props
},
ref
) => {
const insets = useSafeAreaInsets();
const { height } = Dimensions.get("screen");
const percentage = parseFloat(snapTo) / 100;
const openHeight = height - height * percentage;
const closeHeight = height;
const topAnimation = useSharedValue(closeHeight);
const context = useSharedValue(0);
const scrollBegin = useSharedValue(0);
const scrollY = useSharedValue(0);
const [enabledScroll, setEnableScroll] = useState(true);

const expand = useCallback(() => {
"worklet";
topAnimation.value = withTiming(openHeight);
}, [openHeight, topAnimation]);

const close = useCallback(() => {
"worklet";
topAnimation.value = withTiming(closeHeight);
}, [closeHeight, topAnimation]);

useImperativeHandle(ref, () => ({ expand, close }), [expand, close]);

const animationStyle = useAnimatedStyle(() => {
const top = topAnimation.value;
return { top };
});

const pan = Gesture.Pan()
.onBegin(() => {
context.value = topAnimation.value;
})
.onUpdate((event) => {
if (event.translationY < 0) {
topAnimation.value = withSpring(openHeight, {
damping: 100,
stiffness: 400,
});
} else {
topAnimation.value = withSpring(event.translationY + context.value, {
damping: 100,
stiffness: 400,
});
}
})
.onEnd(() => {
if (topAnimation.value > openHeight + 50) {
topAnimation.value = withSpring(closeHeight, {
damping: 100,
stiffness: 400,
});
} else {
topAnimation.value = withSpring(openHeight, {
damping: 100,
stiffness: 400,
});
}
});

const onScroll = useAnimatedScrollHandler({
onBeginDrag: (event) => {
scrollBegin.value = event.contentOffset.y;
},
onScroll: (event) => {
scrollY.value = event.contentOffset.y;
},
});

const panScroll = Gesture.Pan()
.onBegin(() => {
context.value = topAnimation.value;
})
.onUpdate((event) => {
if (event.translationY < 0) {
runOnJS(setEnableScroll)(true);
topAnimation.value = withSpring(openHeight, {
damping: 100,
stiffness: 400,
});
} else if (event.translationY > 0 && scrollY.value === 0) {
runOnJS(setEnableScroll)(false);
topAnimation.value = withSpring(
Math.max(
context.value + event.translationY - scrollBegin.value,
openHeight
),
{
damping: 100,
stiffness: 400,
}
);
}
})
.onEnd(() => {
runOnJS(setEnableScroll)(true);
if (topAnimation.value > openHeight + 50) {
topAnimation.value = withSpring(closeHeight, {
damping: 100,
stiffness: 400,
});
} else {
topAnimation.value = withSpring(openHeight, {
damping: 100,
stiffness: 400,
});
}
});

const scrollViewGesture = Gesture.Native();

return (









{headerComponent}

{type === "scroll" ? (


{children}


) : (
children
)}

{footerComponent}




);
}
);


Подробнее здесь: https://stackoverflow.com/questions/796 ... ttom-sheet