React Native Reanimated

React Native Reanimated 是 React Native 提供的 LayoutAnimation API 的替代动画库。

我们支持视图动画和大部分 布局动画。

布局动画

对于布局动画，类似于 React Native API，你需要先调用 prepareLayoutAnimationRender()，然后再删除或插入想要进行动画的元素。请注意，我们目前仅支持进入和 退出动画。目前不支持 布局过渡。

Hook

用法

你可以像在普通视图中一样使用诸如 useSharedValue 的 Hook。不同之处在于，由于视图会被回收，一个值可能会转移到不相关的组件。当视图被回收时，你需要重置这些值 - 为此，你可以传递一个唯一标识单元格的 prop (例如项目的 id )，并通过 useEffect 运行回调。你可以从以下示例中获得灵感

import React, { useEffect } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { FlashList } from "@shopify/flash-list";

const MyList = () => {
  const Item = ({ item }: { item: { id: string } }) => {
    const myValue = useSharedValue(0);
    useEffect(() => {
      // Reset value when id changes (view was recycled for another item)
      myValue.value = 0;
    }, [item.id, myValue]);
    return <Animated.View />;
  };

  return <FlashList renderItem={Item} estimatedItemSize={100} />;
};

性能

如果你使用接受依赖项数组的 Hook，请确保利用它并仅包含最少的依赖项集。