React Native 新架构库开发指南：准备工作详解

React Native 新架构库开发指南：准备工作详解

【免费下载链接】react-native-new-architecture Workgroup for the New React Native Architecture 项目地址: https://gitcode.com/gh_mirrors/re/react-native-new-architecture

前言

随着 React Native 新架构的逐步推进，开发者需要了解如何将现有库迁移到基于 TurboModules 和 Fabric 的新架构体系。本文将详细介绍在正式开始迁移前需要完成的准备工作，帮助开发者顺利过渡到新架构。

新架构与互操作层的关系

在深入准备工作之前，我们需要明确一个重要概念：互操作层（Interop Layer）。互操作层允许现有库在不完全重写的情况下与新架构兼容，但需要注意的是：

1. 互操作层不会带来明显的性能损耗
2. 它只是一个临时解决方案，未来会被移除
3. 建议先使用互操作层快速实现兼容，再逐步迁移到原生API

准备工作三大步骤

1. 定义 JavaScript 规范

JavaScript 规范是新架构中的"单一可信源"，它明确定义了原生模块提供的所有API及其类型。使用类型化的规范文件可以确保API的输入输出明确无误。

规范文件命名规则

• Turbo Native Modules：必须以 Native<模块名>.js 命名
• Fabric Native Components：必须以 <组件名>NativeComponent.js 命名

规范文件示例

Turbo Module 规范示例（Flow）：

import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
import { TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  +getConstants: () => {||};
  getString(id: string): Promise<string>;
}

export default (TurboModuleRegistry.get<Spec>("MyModule"): ?Spec);

Fabric 组件规范示例（TypeScript）：

import type { ViewProps } from "ViewPropTypes";
import type { HostComponent } from "react-native";
import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";

export interface NativeProps extends ViewProps {
  customProp: string;
}

export default codegenNativeComponent<NativeProps>(
  "MyFabricComponent"
) as HostComponent<NativeProps>;

支持的类型

新架构支持以下类型在规范中使用：

• 基本类型：字符串、数字、布尔值
• 函数类型
• 对象类型
• 数组类型

注意：联合类型不被支持，所有类型必须为只读。

2. 配置 Codegen

Codegen 是一个在构建时运行的代码生成工具，它能自动创建大量脚手架代码。配置 Codegen 需要在库的 package.json 中添加如下配置：

"codegenConfig": {
  "name": "MyLibrary",
  "type": "all",
  "jsSrcsDir": ".",
  "outputDir": {
    "ios": "ios/generated",
    "android": "android/generated"
  },
  "includesGeneratedCode": true,
  "android": {
    "javaPackageName": "com.example.mylibrary.specs"
  }
}

各字段含义：

• name: 库名称
• type: 模块类型，all表示同时支持TurboModule和Fabric组件
• jsSrcsDir: 查找JavaScript规范的起始目录
• outputDir: 生成的代码输出目录
• includesGeneratedCode: 是否包含生成的代码
• android.javaPackageName: Android生成的代码包名

3. 迁移 UIManager JavaScript API

新架构中，大部分 UIManager 方法将变为通过组件引用直接调用的实例方法。

迁移步骤

1. 分离 requireNativeComponent 调用 将组件定义移到单独文件中，为后续迁移做准备。

2. 使用 codegenNativeCommands 替代 dispatchViewManagerCommand 新架构推荐使用生成的命令来调用原生方法。

迁移示例：

// 定义命令
import codegenNativeCommands from "react-native/Libraries/Utilities/codegenNativeCommands";

interface NativeCommands {
  +moveToRegion: (
    viewRef: React.ElementRef<MyMapComponent>,
    region: MapRegion,
    duration: number
  ) => void;
}

export const Commands = codegenNativeCommands<NativeCommands>({
  supportedCommands: ["moveToRegion"],
});

// 使用命令
Commands.moveToRegion(this._ref, region, duration);

原生端适配

定义好JavaScript命令后，需要更新原生实现以匹配调用的方法签名。

iOS 示例：

RCT_EXPORT_METHOD(moveToRegion:(nonnull NSNumber *)reactTag
                        region:(NSDictionary *)region
                      duration:(double)duration
{
   // 实现逻辑
}

Android Kotlin 示例：

fun receiveCommand(
    view: MyMapView?, commandId: String?, args: ReadableArray?
) {
    when (commandId) {
        "moveToRegion" -> {
            val region = args?.getMap(0)
            val duration = args?.getInt(1)
            // 处理逻辑
        }
    }
}

总结

完成上述准备工作后，你的库就已经具备了迁移到新架构的基础条件。这些步骤确保了：

1. 类型安全的API定义
2. 自动化的代码生成配置
3. 现代的命令调用方式替代旧的UIManager API

准备好这些基础工作后，你就可以继续针对Android和iOS平台进行具体的迁移工作了。记住，采用分阶段迁移策略可以降低风险，先确保兼容性再逐步优化性能。

【免费下载链接】react-native-new-architecture Workgroup for the New React Native Architecture 项目地址: https://gitcode.com/gh_mirrors/re/react-native-new-architecture