使用React Native Reanimated 2实现下拉组件高度动画失效问题排查

你的代码里动画没运行的核心原因是没有触发共享值的更新逻辑，另外还有几个细节需要调整，具体修复方案如下：

1. 添加动画触发逻辑 #

你需要在合适的时机（比如点击下拉按钮时），调用Reanimated的动画函数（如withTiming/withSpring）修改dropDownOptionsHeight的值，示例：

import { withTiming } from 'react-native-reanimated';

// 下拉展开/收起触发函数
const toggleDropdown = () => {
  dropDownOptionsHeight.value = withTiming(
    dropDownOptionsHeight.value === 0 ? 200 : 0, // 替换为你需要的展开/收起高度差
    { duration: 300 } // 动画时长，可按需调整
  );
};

2. 修正组件渲染方式 #

dropDownOptionsContainer用useCallback返回组件的写法没必要，直接写成普通函数组件即可，避免不必要的缓存问题：

const DropDownOptionsContainer = () => {
  return (
    <Box
      style={[styles.dropDownOptionsContainer, animatedStyles]}
    >
      <Text variant='regular'>hello</Text>
    </Box>
  );
};

3. 确保基础样式配置正确 #

检查styles.dropDownOptionsContainer的基础样式，必须添加overflow: 'hidden'，否则动画过程中内容可能溢出，影响视觉效果：

const styles = StyleSheet.create({
  dropDownOptionsContainer: {
    overflow: 'hidden', // 关键：隐藏超出容器的内容
    // 其他样式：背景色、边框、内边距等
  },
});

完整修正后的示例代码 #

import { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { Box, Text } from 'your-ui-library'; // 替换为你实际使用的UI库
import { StyleSheet, TouchableOpacity } from 'react-native';

const YourDropdownComponent = () => {
  const dropDownOptionsHeight = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => {
    return {
      height: dropDownOptionsHeight.value + 120, // 保留你原有高度计算逻辑
    };
  });

  const toggleDropdown = () => {
    // 切换展开/收起状态，200为展开时额外增加的高度，可根据内容调整
    dropDownOptionsHeight.value = withTiming(
      dropDownOptionsHeight.value === 0 ? 200 : 0,
      { duration: 300 }
    );
  };

  return (
    <>
      {/* 下拉触发按钮 */}
      <TouchableOpacity onPress={toggleDropdown}>
        <Text>点击展开/收起</Text>
      </TouchableOpacity>

      {/* 下拉选项容器 */}
      <Box style={[styles.dropDownOptionsContainer, animatedStyles]}>
        <Text variant='regular'>hello</Text>
        {/* 可添加更多下拉选项内容 */}
      </Box>
    </>
  );
};

const styles = StyleSheet.create({
  dropDownOptionsContainer: {
    overflow: 'hidden',
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#eee',
  },
});

export default YourDropdownComponent;

额外注意事项 #

• 确保你的Box组件支持接收Reanimated生成的动画样式（大部分RN UI库都支持，若不兼容可改用原生View）；
• 如果下拉内容高度是动态的（比如选项数量不固定），可以先测量内容的实际高度，再将该值作为动画目标值，避免硬编码高度。

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