Animate.timing结合nativeEvent onLayout失效，获取内容高度异常

我来帮你搞定这个问题！你遇到的核心问题是onLayout触发时机和useState异步更新的冲突，还有Animated.Value的管理方式不对，导致高度来回跳或者始终为0。咱们一步步拆解修复：

问题根源 #

• useState异步更新导致取值错误：你在getContentHeight里刚调用setmaxContentHeight就立刻使用maxContentHeight，但useState的更新是异步的，此时拿到的还是旧值，逻辑判断自然出错。
• Animated.Value频繁重建：每次调用setdescriptionHeight都创建新的Animated.Value实例，这会打断动画的状态跟踪，导致动画异常。
• onLayout重复触发+目标错误：直接在被控制高度的Animated.View上绑定onLayout，拿到的是我们设置的固定高度而非内容真实高度，且布局变化时onLayout会多次触发，导致状态反复更新。

解决方案 #

1. 用useRef存储真实的最大高度 #

useRef的更新是同步的，能直接拿到最新的布局高度，避免异步问题。

2. 初始化一次Animated.Value #

只在组件挂载时创建一次Animated.Value，后续用setValue或动画更新它，保持实例稳定。

3. 调整onLayout绑定目标 #

把onLayout移到内部包裹内容的View上，这样才能获取到内容的真实高度。

4. 限制初始化逻辑 #

只在第一次onLayout触发时设置初始高度，避免重复执行导致状态波动。

5. 修正动画逻辑 #

明确动画的目标值：收起时到70，展开时到真实最大高度，基于当前展开状态切换。

修改后的完整代码 #

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

function Card() { 
  const [expandedDescription, setExpandedDescription] = useState(false); 
  // 仅初始化一次Animated.Value，保持实例稳定
  const descriptionHeight = useRef(new Animated.Value(0)).current; 
  // 用useRef同步存储内容真实最大高度
  const maxContentHeight = useRef(0);
  // 标记是否已完成初始高度设置，避免重复执行
  const isHeightInitialized = useRef(false);

  const getContentHeight = (event) => { 
    const realHeight = event.nativeEvent.layout.height;
    maxContentHeight.current = realHeight;

    // 仅在第一次布局时设置初始高度
    if (!isHeightInitialized.current) {
      isHeightInitialized.current = true;
      const initialHeight = realHeight < 70 ? realHeight : 70;
      descriptionHeight.setValue(initialHeight);
    }
  } 

  const toggle = () => { 
    // 内容高度小于等于70时，无需触发动画
    if (maxContentHeight.current <= 70) return;

    Animated.timing(descriptionHeight, { 
      toValue: expandedDescription ? 70 : maxContentHeight.current, 
      duration: 300,
      useNativeDriver: false, // 修改height样式不能使用原生驱动
    }).start(); 
    setExpandedDescription(!expandedDescription); 
  } 

  return ( 
    <View style={styles.cardContainer}> 
      <Animated.View style={[styles.descriptionContainer, {height: descriptionHeight}]}>
        {/* 内部View用来获取内容真实高度，不受外部Animated.View的高度限制 */}
        <View onLayout={getContentHeight} style={{width: '100%'}}>
          <Text style={styles.descriptionHeaderText}>Description</Text> 
          <TouchableOpacity onPress={toggle} activeOpacity={0.8}>
            <Text style={styles.descriptionText}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum tincidunt libero, nec luctus dolor consequat quis. Phasellus portalike elephants and had to work hard to earn their while chicken </Text> 
          </TouchableOpacity>
        </View>
      </Animated.View> 
    </View> 
  ) 
} 

const styles = StyleSheet.create({ 
  cardContainer: { 
    width: '95%', 
    marginBottom: 10, 
    backgroundColor: '#ffffff', 
    borderRadius:25, 
    height: 'auto', 
    alignItems:'center', 
    paddingLeft: 10, 
    paddingRight: 10, 
  }, 
  descriptionContainer:{ 
    width: '100%', 
    alignItems:'center', 
    marginTop: 10, 
    padding:5,
    overflow: 'hidden', // 确保超出高度的内容被裁剪
  }, 
  descriptionHeaderText:{ 
    fontSize: 15, 
    color:'#8E8E8E', 
  }, 
  descriptionText:{ 
    marginTop: 5, 
  }, 
}); 

export default Card;

关键修改点说明 #

• 内部View绑定onLayout：避开被我们控制高度的Animated.View，确保拿到的是内容的真实高度。
• useRef存储状态：同步获取最新高度，解决useState异步更新的问题，同时保持Animated.Value实例稳定。
• 单次初始化：用isHeightInitialized标记，防止onLayout多次触发导致初始高度反复重置。
• 动画逻辑明确：展开/收起的目标值清晰，同时加上useNativeDriver: false适配height样式的动画需求。

这样修改后，就能正确获取动态内容的真实高度，并且平滑执行展开/收起的动画了！

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