React Native View onLayout перерисовывает каждый кадр, пока анимация высоты детей - PullRequest
Новая
       28

React Native View onLayout перерисовывает каждый кадр, пока анимация высоты детей

0 голосов
/ 06 ноября 2019

Чтобы создать пользовательский View с translateY, я должен вычислить высоту контейнера и содержимого с помощью onLayout. Это сработало отлично, но сегодня я добавил Accordion компонент, который также анимирует. Это происходит для запуска функций onLayout для каждого вычисленного кадра, что делает мое приложение очень медленным. Я попытался добавить useCallback и LayoutAnimation, чтобы исправить это, но это, похоже, не сработало.

Есть ли способ вызвать onLayout только до и после анимации? Я думал о добавлении debounce к onLayout, но, надеюсь, есть другое решение. 

export default memo(({ translateY }) => {
  const [containerHeight, setContainerHeight] = useState(0);
  const [contentHeight, setContentHeight] = useState(0);

  console.log('render', containerHeight, contentHeight);

  const onLayoutContainer = useCallback(event => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    const height = event.nativeEvent.layout.height;
    setContainerHeight(height);
  }, []);

  const onLayoutContent = useCallback(event => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    const height = event.nativeEvent.layout.height;
    setContentHeight(height);
  }, []);

  return (
    <View onLayout={onLayoutContainer}>
        <Animated.View
          onLayout={onLayoutContent}
          style={{ transform: [{ translateY }] }}
        >
            <Accordion />
            <Accordion />
            <Accordion />
            <Accordion />
            <Accordion />
            <Accordion />
        </Animated.View>
    </View>
  );
});
...