React Native网络加载内容组件高度变化的平滑动画优化问询

我之前做类似需求的时候也踩过scale动画的坑，确实会出现你说的先跳变再动画的问题——毕竟onLayout触发时组件已经完成尺寸更新了，这时候再补动画肯定会有突兀感。给你分享两个亲测有效的平滑过渡方案：

方案一：直接动画容器高度（推荐） #

核心思路是避免scale拉伸内容，转而直接对容器的height属性做动画。我们可以先给组件设置一个初始占位高度，等内容加载完成后测量真实高度，再通过Animated库平滑过渡到目标高度。

代码示例：

import React, { useState, useEffect, useRef } from 'react';
import { Animated, View, Text } from 'react-native';

const SmoothDynamicComponent = () => {
  const [loadedContent, setLoadedContent] = useState('');
  const animatedHeight = useRef(new Animated.Value(40)).current; // 初始占位高度（比如一行文字的高度）
  const contentRef = useRef(null);

  // 模拟网络加载内容
  useEffect(() => {
    setTimeout(() => {
      setLoadedContent('这里是从网络加载的较长内容，会让组件高度发生明显变化。比如可以是一段产品介绍、用户评论或者动态渲染的文本列表。');
    }, 1200);
  }, []);

  // 内容更新后测量真实高度并启动动画
  useEffect(() => {
    if (loadedContent && contentRef.current) {
      // 确保内容渲染完成后再测量
      requestAnimationFrame(() => {
        contentRef.current.measure((_x, _y, _width, newHeight) => {
          Animated.timing(animatedHeight, {
            toValue: newHeight,
            duration: 350, // 调整动画时长适配你的需求
            useNativeDriver: false, // height动画不支持原生驱动
          }).start();
        });
      });
    }
  }, [loadedContent]);

  return (
    <Animated.View
      style={{
        height: animatedHeight,
        overflow: 'hidden', // 防止内容过渡时出现溢出闪烁
        backgroundColor: '#f5f5f5',
        padding: 12,
      }}
    >
      <Text ref={contentRef}>
        {loadedContent || '加载中...'}
      </Text>
    </Animated.View>
  );
};

export default SmoothDynamicComponent;

方案二：用隐藏视图预测量高度（适合复杂内容） #

如果你的内容结构比较复杂（比如包含多行文本、图片混合），直接测量可能会有延迟，可以用一个绝对定位的隐藏视图先预加载内容并测量高度，再给可见容器做动画。这种方式能避免内容渲染时的闪烁问题。

代码示例：

import React, { useState, useEffect, useRef } from 'react';
import { Animated, View, Text, Image } from 'react-native';

const PreMeasureDynamicComponent = () => {
  const [loadedContent, setLoadedContent] = useState(null);
  const animatedHeight = useRef(new Animated.Value(60)).current; // 初始占位高度
  const [targetHeight, setTargetHeight] = useState(60);

  // 模拟加载包含图片的复杂内容
  useEffect(() => {
    setTimeout(() => {
      setLoadedContent({
        text: '这是一段搭配图片的动态内容，图片加载完成后整体高度会变化',
        imageUrl: 'https://picsum.photos/300/200',
      });
    }, 1500);
  }, []);

  // 隐藏视图测量真实高度
  const handleLayout = (e) => {
    const { height } = e.nativeEvent.layout;
    if (height !== targetHeight) {
      setTargetHeight(height);
      // 启动高度动画
      Animated.timing(animatedHeight, {
        toValue: height,
        duration: 400,
        useNativeDriver: false,
      }).start();
    }
  };

  return (
    <>
      {/* 隐藏的预测量视图：绝对定位到屏幕外，不影响布局 */}
      <View
        style={{
          position: 'absolute',
          left: -9999,
          right: 0,
          opacity: 0,
          padding: 12,
          backgroundColor: '#f5f5f5',
        }}
        onLayout={handleLayout}
      >
        {loadedContent ? (
          <>
            <Text>{loadedContent.text}</Text>
            <Image
              source={{ uri: loadedContent.imageUrl }}
              style={{ width: '100%', height: undefined, aspectRatio: 3/2, marginTop: 8 }}
            />
          </>
        ) : (
          <Text>加载中...</Text>
        )}
      </View>

      {/* 可见的动画容器 */}
      <Animated.View
        style={{
          height: animatedHeight,
          overflow: 'hidden',
          backgroundColor: '#f5f5f5',
          padding: 12,
        }}
      >
        {loadedContent ? (
          <>
            <Text>{loadedContent.text}</Text>
            <Image
              source={{ uri: loadedContent.imageUrl }}
              style={{ width: '100%', height: undefined, aspectRatio: 3/2, marginTop: 8 }}
            />
          </>
        ) : (
          <Text>加载中...</Text>
        )}
      </Animated.View>
    </>
  );
};

export default PreMeasureDynamicComponent;

为什么之前的scale方案不行？ #

你之前用scaleY的问题在于：onLayout是组件已经完成尺寸更新后才触发的回调，这时候组件已经是新尺寸了，你再把初始缩放比例设为旧高度/新高度，相当于先让组件跳到新尺寸，再缩回去做动画，视觉上自然会有跳变感。而直接动画height是从旧高度平滑过渡到新高度，完全不会有这种突兀的问题。

内容的提问来源于stack exchange，提问作者Gerharddc