Получить высоту переменных дочерних элементов в функциональном компоненте в React Native - PullRequest
Новая
       26

Получить высоту переменных дочерних элементов в функциональном компоненте в React Native

2 голосов
/ 15 января 2020

Я пытаюсь получить рост дочерних элементов в моем компоненте для реализации анимации.

Это компонент карты Not expanded card component

Расширено с children enter image description here

Я хотел бы получить высоту дочерних компонентов, чтобы я мог анимировать значение высоты для достижения анимированного расширения. 

{expanded ? (
        <>
          <Animated.View style={{height: someAnimatedHeight}}>
            <View onLayout={handleLayout}>
              {children}
            </View>
          </Animated.View>
          <PromoCodeArea />
        </>
      ) : (
        <PromoCodeArea />
      )}

handleLayout 

const handleLayout = ({ nativeEvent }) => {
    setContainerHeight(nativeEvent.layout.height);
  };

Однако, handleLayout не предоставляет высоту, пока карта не будет расширена. Я могу заставить анимацию работать с жестко заданным размером.

Мне бы хотелось, чтобы анимация была гибкой и расширялась до высоты детей.

Когда не раскрыто handleLayout возвращает значение 0, поэтому я не могу установить toValue: 

const startAnimation = () => {
    Animated.spring(heightAnimation, {
      toValue: 125, <-- like this to be based on the height of children
    }).start();
  };

Я не смог найти примеры этого существа достигается с помощью функциональных компонентов и крючков.

...