关于

官方文档
github
Reanimated是一个React Native库，允许创建运行在UI线程上的流畅动画和交互。

动机

在React Native中，默认情况下所有的更新都会延迟至少一帧，因为UI和JS线程之间的通信是异步的。Reanimated的目标是提供将动画和事件处理逻辑从JS线程转移到UI线程的方法。通过定义Reanimated worklets来实现。worklets是可以被移动到一个单独的JavaScript虚拟机并在UI线程上同步执行的一小段JavaScript代码。这使得它能够立即响应触摸事件，并在事件发生时同一帧内更新UI。

版本差异

• 交互和动画不再使用非直观的声明式API编写，可以用纯JS编写，以所谓的“worklets”的形式。
• Shared Values不仅可以携带基本数据类型，还可以携带数组、对象和函数。
• Shared Values不再直接关联到视图props，而是暴露一个useAnimatedStyle钩子，它返回一个可以作为视图样式参数来传递的样式对象。useAnimatedStyle钩子接受一个worklet，当它执行时，应该返回将被应用到关联视图的样式。样式worklet将在该worklet所使用的Shared Values发生变化时更新(库会自动检测对Shared Values的依赖)。
• 动画可以通过两种方式启动，在Shared Values发生变化时触发动画，或者从useAnimatedStyle钩子返回动画值。
• 事件worklet最常见的情况是修改一些Shared Values。因此，对这些值所做的修改将反映在被触发的动画样式worklet中，这反过来又会导致一些视图属性被更新。为了方便，Reanimated提供了一个事件钩子，专门与手势处理程序库一起工作，并允许你定义一个单独的worklet来处理不同的事件状态(例如，onStart，onActive等)。

问题和限制

• Android端，目前只支持Hermes JS VM
• 不支持远程调试，因为该库使用JSI来同步本地方法访问。可以使用Flipper来调试JS代码，然而目前不支持将调试器连接到运行在UI线程上的JS上下文。
• 从React Native传递给worklets的对象在JavaScript中没有正确的prototype。因此这样的对象不可枚举，也就是说，你不能使用for in遍历，扩展操作符(...)或像Object.assign这样的函数来处理对象。
• 使用Reanimated，你不能动画绘制布局的虚拟组件。例如，你不能动画绘制嵌套组件，因为React Native把

<Text>
    string1
    <Text>string2</Text>
</Text>

改为

<RCTTextView>
    string1
    <RCTVirtualText>string2</RCTVirtualText>
</RCTTextView>

RCTVirtualText是一个虚拟组件。

安装

React Native版本要求0.62及以上。

1. 安装依赖

yarn add react-native-reanimated

2. 在babel.config.js文件中添加Reanimated的babel插件

module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

注：Reanimated插件必须列在最后。

3. 原生配置
   Android端

• android/app/build.gradle

project.ext.react = [
  enableHermes: true  // <- here | clean and rebuild if changing
]

• MainApplication.java

  import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
    };
  ...

• proguard-rules.pro

-keep class com.facebook.react.turbomodule.** { *; }

iOS端

• 自动安装