react-native - React Native View onLayout 在儿童高度动画时重新渲染每一帧

Question

要创建自定义View，translateY我必须使用onLayout. 这工作得很好，但今天我添加了一个Accordion也可以动画的组件。这恰好触发onLayout函数在每个计算帧上呈现，这使我的应用程序非常慢。我试过添加useCallback和LayoutAnimation来解决这个问题，但这似乎都不起作用。

有没有办法onLayout在动画之前和之后触发唯一的？我考虑过为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>
  );
});