20、React Native 动画与布局技术解析

React Native 动画与布局技术解析

1. 动画节点关系建立与更新标记

在 React Native 的动画系统中，首先要建立节点之间的父子关系，并为子节点设置更新标记。以下是相关代码：

[parentNode addChild:childNode]; // 建立与 JavaScript 层相同的父子关系
[childNode setNeedsUpdate]; // 为子节点设置 “needs update” 标记

这两步操作是动画节点处理的基础，前者确保了节点在结构上的一致性，后者为后续的更新操作提供了标记。

2. 绑定事件接收器

动画的起始点通常与 AnimatedProps 组件相关联。以下是 AnimatedProps 类的部分代码：

class AnimatedProps extends AnimatedNode {
  __makeNative(): void {
    if (!this.__isNative) {
      this.__isNative = true;
      for (const key in this._props) {
        const value = this._props[key];
        if (value instanceof AnimatedNode) {
          value.__makeNative();