React Native中Animated.Value动画执行正常但View高度无变化的问题排查

看起来你踩了React Native Animated的一个常见坑——动画值没有和目标视图的属性绑定！虽然动画逻辑本身能正常执行（所以加载指示器能正确显示/隐藏），但因为你每次都新建了独立的Animated.Value实例，完全没关联到<View>的高度上，自然看不到视图变化。

核心问题分析 #

你在Animated.timing里创建的new Animated.Value(fromValue)是临时变量，它的变化不会同步到任何视图的样式属性。React Native的动画系统需要一个持久化的动画值，这个值要和你想动画的视图属性（比如height）绑定，这样动画运行时才能驱动视图更新。

具体修复步骤 #

1. 在组件中声明持久化的动画状态
   首先，用useState（类组件用this.state）创建一个持续存在的Animated.Value，初始值设为你的默认高度：

   // 函数组件示例
   const [animatedHeight] = useState(new Animated.Value(305));
   

2. 复用动画值，不要每次新建
   修改你的动画逻辑，直接使用上面声明的animatedHeight，而不是每次创建新实例：

   setShowSpinner(true);
   if (toggled) {
     console.log('fromValue', fromValue);
     console.log('toValue', toValue);
     // 直接复用animatedHeight，不用new
     Animated.timing(animatedHeight, {
       toValue: toValue,
       useNativeDriver: false,
       easing: Easing.exp
     }).start(() => setShowSpinner(false));
   } else {
     console.log('fromValue', fromValue);
     console.log('toValue', toValue);
     Animated.timing(animatedHeight, {
       toValue: toValue,
       useNativeDriver: false,
       easing: Easing.exp
     }).start(() => setShowSpinner(false));
   }
   

   如果你的fromValue是动态获取的（比如从视图当前高度读取），可以在动画开始前先设置动画值的起点：animatedHeight.setValue(fromValue)，确保动画从正确位置开始。

3. 将动画值绑定到视图的高度属性
   最后，把animatedHeight绑定到目标<View>的style中：

   <View style={{ height: animatedHeight }}>
     {/* 你的视图内容 */}
   </View>
   

这样修改后，动画运行时animatedHeight的变化会直接同步到<View>的高度上，你就能看到预期的高度动画效果了！

内容的提问来源于stack exchange，提问作者four-eyes