React-native-reanimated 进入/退出在 Android 上不起作用

Question

描述

我正在尝试使用动画来进入和退出动画，在 ios 中它的工作正常，但在 android 上它的效果不佳，

这是代码：

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>
  );
}

有趣的是，动画是有效的，我尝试了你的第一个动画代码和

width.value = withSpring(width.value + 50)

真正为视图设置动画，所以动画有效，但我需要输入道具才能工作......有什么想法吗？

通知 在 iOS 上工作正常，但在 Android 上不行

复活版

3.10.0（我也尝试了3.6.1，同样的问题）

React Native 版本

0.73.6

平台

iOS（进入/退出作品） Android（无法进入/退出）

建筑

Fabric（新架构）

构建类型

eas构建开发

设备型号

一些 Android 设备和 Android 模拟器

致谢

是的

重现步骤

1.点击“onAdd”功能添加更多项目（希望有动画进入） 2.根本没有动画（只有进入和退出时）

Answer 1

尝试在进入或退出时添加一些持续时间，如下所示：

<Animated.View
              key={item.id}
              entering={SlideInRight.duration(500).easing()}
              exiting={SlideOutLeft.duration(500).easing()}
              onTouchEnd={() => onDelete(item.id)}
              style={styles.listItem}
            />

希望能帮到你