React Native Reanimated：列表元素移除时动画异常问题求助

云上老周

2026-7-20

React Native Reanimated 列表移除动画错位问题排查

关键问题：列表元素key不稳定

用数组索引当key是导致动画错位的核心原因——移除元素后，后续元素的索引会自动前移，Reanimated会错误判定最后一个元素被移除，所以动画跑到列表末尾。这是React列表渲染的典型坑，和Reanimated的动画追踪逻辑直接相关。

解决步骤：

给元素分配唯一稳定的key
放弃用索引做key，改用每个元素自带的唯一标识（比如id）。示例：

{data.map(item => (
  <Animated.View key={item.id} style={styles.item}>
    {/* 元素内容 */}
  </Animated.View>
))}

初始数据要确保每个元素有唯一id：

const [data, setData] = useState([
  { id: 'item-1', text: 'Item 1' },
  { id: 'item-2', text: 'Item 2' },
  // ...其他元素
]);

检查Reanimated版本兼容性
Expo SDK对应的Reanimated版本确实可能存在Layout Animations的bug，比如旧版SDK（48及以下）对existing属性的处理有缺陷。可以这么操作：
- 查看当前版本：npm list react-native-reanimated
- 升级到对应SDK支持的最高稳定版（比如SDK 49对应Reanimated 3.3+），升级后重启Metro和Expo客户端。

确保动画配置和调用顺序正确
必须在状态更新前调用Layout.configureNext，绑定动画到数据变更：

import { Layout, Easing } from 'react-native-reanimated';

const removeAnimationConfig = {
  duration: 300,
  easing: Easing.inOut(Easing.ease),
  layout: {
    delete: {
      duration: 300,
      easing: Easing.inOut(Easing.ease),
      property: Layout.Properties.opacity | Layout.Properties.scaleY,
    },
    existing: Layout.springify(),
  },
};

const handleRemove = (targetId) => {
  Layout.configureNext(removeAnimationConfig);
  setData(prevData => prevData.filter(item => item.id !== targetId));
};