уменьшить начальную высоту анимации - PullRequest
Новая
       19

уменьшить начальную высоту анимации

0 голосов
/ 18 июня 2020

Используя собственный Modal реакции, я открываю PanGestureHandler, который присутствует в компоненте UserInfoContainer для анимации. Попрошайник открывается, когда начальная высота покрывает почти весь экран. Как уменьшить высоту всего обработчика? Этот код также используется на другом экране, но длина / высота автоматически отличаются. Как это исправить? 

export const UserInfoContainer: React.FC<PanGestureProps> = ({ firstName}) => {
  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,
        ]}>
        <SwipeBar />
        <View>
          <Text>
            {firstName}
          </Text>
        <Animated.View style={[styles.whitelistBar, whitelistBarStyles]}>
        </Animated.View>
      </Animated.View>
    </PanGestureHandler>
  );
};
...