не может прокручивать панель PanGestureHandler вниз - PullRequest
1 голос
/ 17 июня 2020

Я использую собственный 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>
  );
};

enter image description here

Белый фон из модального окна. Greyi sh - это обработчик жестов панорамирования.

...