Я использую собственный Modal реакции, чтобы открыть PanGestureHandler, который помещается внутри компонента (UserInfoContainer)
. Это для анимации. PanGestureHandler загружается, но начальная высота увеличивается почти до полной страницы, и я не могу прокрутить его вниз, используя небольшую белую полосу вверху.
Как я могу это исправить? Почему не работает прокрутка?
export const UserInfoContainer: React.FC<PanGestureProps> = ({ firstName, rating, numberOfFriends }) => {
const dragY = useRef(new Animated.Value(0));
const onGestureEvent = Animated.event(
[{ nativeEvent: { translationY: dragY.current } }],
{
useNativeDriver: true,
},
);
const onHandleStateChange = (event: any) => {
if (event.nativeEvent.oldState === State.ACTIVE) {
dragY.current.extractOffset();
}
};
const animateInterpolation = dragY.current.interpolate({
inputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 4 + SCREEN_HEIGHT / 10, 0],
outputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 4 + SCREEN_HEIGHT / 10, 0],
extrapolate: 'clamp',
});
const animatedStyles = {
transform: [
{
translateY: animateInterpolation,
},
],
};
const whitelistBarMarginInterpolation = dragY.current.interpolate({
inputRange: [-SCREEN_HEIGHT + SCREEN_HEIGHT / 3, 0],
outputRange: [0, moderateScale(150)],
extrapolate: 'clamp',
});
const whitelistBarStyles = {
transform: [
{
translateY: whitelistBarMarginInterpolation,
},
],
};
return (
<PanGestureHandler
onGestureEvent={onGestureEvent}
onHandlerStateChange={onHandleStateChange}>
<Animated.View
style={[
styles.container,
animatedStyles,
/* { transform: [{ translateY: dragY.current }] } */
]}>
<SwipeBar />
<View style={styles.introContainer}>
<Text style={styles.name}>
{firstName}
</Text>
<Animated.View style={[styles.whitelistBar, whitelistBarStyles]}>
</Animated.View>
</Animated.View>
</PanGestureHandler>
);
};
Белый фон из модального окна. Greyi sh - это обработчик жестов панорамирования.