React Native Reanimated的entering/exiting动画在Android上失效

为组件添加entering和exiting入场退场动画后，iOS端运行正常，但Android端完全无动画效果。其他Reanimated动画功能正常（比如官方示例中的width.value = withSpring(width.value + 50)可正常生效），仅entering/exiting属性失效。

环境信息 #

• Reanimated版本：3.10.0（曾尝试3.6.1，问题依旧）
• React Native版本：0.73.6
• 平台：iOS（正常）、Android（失效）
• 架构：Fabric（新架构）
• 构建类型：eas build dev
• 设备：多款Android设备及模拟器

复现步骤 #

1. 点击「+」按钮添加新条目，预期播放入场动画
2. 无任何动画效果（仅entering/exiting动画失效）

相关代码 #

import { COLORS } from '@/src/constants/theme';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Animated, {
  SlideInRight,
  SlideOutLeft,
} from 'react-native-reanimated';

const LIST_ITEM_COLOR = '#1798DE';

interface Item {
  id: number;
}

export default function App() {
  const initialMode = useRef<boolean>(true);

  useEffect(() => {
    initialMode.current = false;
  }, []);

  const [items, setItems] = useState<Item[]>(
    new Array(5).fill(0).map((_, index) => ({ id: index }))
  );

  const onAdd = useCallback(() => {
    setItems(currentItems => {
      const nextItemId = (currentItems[currentItems.length - 1]?.id ?? 0) + 1;
      return [...currentItems, { id: nextItemId }];
    });
  }, []);

  const onDelete = useCallback((itemId: number) => {
    setItems(currentItems => {
      return currentItems.filter(item => item.id !== itemId);
    });
  }, []);

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.floatingButton} onPress={onAdd}>
        <Text style={{ color: 'white', fontSize: 40 }}>+</Text>
      </TouchableOpacity>
      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{ paddingVertical: 50 }}
      >
        {items.map((item, index) => {
          return (
            <Animated.View
              key={item.id}
              entering={SlideInRight}
              exiting={SlideOutLeft}
              onTouchEnd={() => onDelete(item.id)}
              style={styles.listItem}
            />
          );
        })}
      </ScrollView>
    </View>
  );
}

解决思路 #

• 检查Fabric架构配置：确认Android端Reanimated的Fabric适配器已正确配置。需验证settings.gradle中是否包含Reanimated的Fabric依赖，app/build.gradle的dependencies里是否添加了implementation project(':react-native-reanimated')，且MainApplication文件中已初始化Reanimated的Fabric组件（如ReanimatedFabricSupport.initialize()）。
• 验证动画触发逻辑：确保动态添加/移除组件时，Animated.View的key属性唯一且变化正确（当前代码中用item.id作为key是正确的）。若初始渲染的组件需要触发entering，可尝试通过状态控制延迟渲染，避免初始渲染时动画被跳过。
• 版本兼容性排查：核对React Native 0.73.6与Reanimated的官方兼容版本，尝试切换到适配性更好的版本（如3.9.0），排除版本不匹配导致的API失效。
• 替换动画实现方式：暂时改用手动动画逻辑（如Animated.timing配合useAnimatedStyle）实现入场退场，验证是否是entering/exiting API在Android Fabric下的特定bug。
• 检查Hermes兼容性：临时禁用Hermes引擎，测试动画是否恢复，排查是否是Hermes与Reanimated在Android新架构下的冲突。

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