附录

提醒

本文档仍为 experimental，详细信息可能会随着我们的迭代而发生变化。欢迎在此页面分享你对工作组内部讨论的反馈。

英This documentation is still experimental and details are subject to changes as we iterate. Feel free to share your feedback on the discussion inside the working group for this page.

而且，它还包含几个 手动步骤。请注意，一旦新架构稳定，这将不代表最终的开发者体验。我们正在开发工具、模板和库，以帮助你快速开始使用新架构，而无需完成整个设置。

英Moreover, it contains several manual steps. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.

一、术语

整个新架构相关指南将遵循以下 terminology：

英The whole New Architecture related guides will stick to the following terminology:

旧版的原生组件 - 指在旧的 React Native 架构上运行的组件。
旧版原生模块 - 指在旧的 React Native 架构上运行的模块。
Fabric 原生组件 - 指已适应新架构（即新渲染器）的组件。为了简洁起见，你可能会发现它们被称为 Fabric 组件。
Turbo Native 模块 - 指已适应新架构的模块，即新的原生模块系统。为了简洁起见，你可能会发现它们被称为 涡轮增压模块

二. 流类型到原生类型的映射

你可以使用下表作为参考，了解支持哪些类型以及它们在每个平台中映射的内容：

英You may use the following table as a reference for which types are supported and what they map to in each platform:

`string`

Nullable Support?	`?string`
Android (Java)	`String`
iOS	`NSString`

`boolean`

Nullable Support?	`?boolean`
Android (Java)	`Boolean`
iOS	`NSNumber`

对象字面量

为了类型安全，建议使用普通 Object。

英This is recommended over using plain Object, for type safety.

例子： {| foo: string, ... |}

英Example: {| foo: string, ... |}

Nullable Support?	`?{\| foo: string, ...\|}`
Android (Java)	-
iOS	-

`Object`

注意

建议使用对象字面量代替。

Nullable Support?	`?Object`
Android (Java)	`ReadableMap`
iOS	`@` (untyped dictionary)

`Array<*>`

Nullable Support?	`?Array<*>`
Android (Java)	`ReadableArray`
iOS	`NSArray` (or `RCTConvertVecToArray` when used inside objects)

`Function`

Nullable Support?	`?Function`
Android (Java)	-
iOS	-

`Promise<*>`

Nullable Support?	`?Promise<*>`
Android (Java)	`com.facebook.react.bridge.Promise`
iOS	`RCTPromiseResolve` and `RCTPromiseRejectBlock`

类型联合

类型联合仅支持作为回调。

英Type unions are only supported as callbacks.

例子： 'SUCCESS' | 'FAIL'

英Example: 'SUCCESS' | 'FAIL'

Nullable Support?	Only as callbacks.
Android (Java)	-
iOS	-

回调

回调函数不进行类型检查，并泛化为 Object。

英Callback functions are not type checked, and are generalized as Objects.

例子： () =>

英Example: () =>

Nullable Support?	Yes
Android (Java)	`com.facebook.react.bridge.Callback`
iOS	`RCTResponseSenderBlock`

注意

你可能还会发现参考 React Native 中核心模块的 JavaScript 规范很有用。它们位于 React Native 存储库的 Libraries/ 目录内。

三． TypeScript 到原生类型的映射

你可以使用下表作为参考，了解支持哪些类型以及它们在每个平台中映射的内容：

英You may use the following table as a reference for which types are supported and what they map to in each platform:

`string`

Nullable Support?	`string \| null`
Android (Java)	`String`
iOS	`NSString`

`boolean`

Nullable Support?	`boolean \| null`
Android (Java)	`Boolean`
iOS	`NSNumber`

`number`

Nullable Support?	No
Android (Java)	`double`
iOS	`NSNumber`

对象字面量

为了类型安全，建议使用普通 Object。

英This is recommended over using plain Object, for type safety.

例子： {| foo: string, ... |}

英Example: {| foo: string, ... |}

Nullable Support?	`{\| foo: string, ...\|} \| null`
Android (Java)	-
iOS	-

`Object`

注意

建议使用对象字面量代替。

Nullable Support?	`Object \| null`
Android (Java)	`ReadableMap`
iOS	`@` (untyped dictionary)

`Array<*>`

Nullable Support?	`Array<*> \| null`
Android (Java)	`ReadableArray`
iOS	`NSArray` (or `RCTConvertVecToArray` when used inside objects)

`Function`

Nullable Support?	`?Function \| null`
Android (Java)	-
iOS	-

`Promise<*>`

Nullable Support?	`Promise<*> \| null`
Android (Java)	`com.facebook.react.bridge.Promise`
iOS	`RCTPromiseResolve` and `RCTPromiseRejectBlock`

类型联合

类型联合仅支持作为回调。

英Type unions are only supported as callbacks.

例子： 'SUCCESS' | 'FAIL'

英Example: 'SUCCESS' | 'FAIL'

Nullable Support?	Only as callbacks.
Android (Java)	-
iOS	-

回调

回调函数不进行类型检查，并泛化为 Object。

英Callback functions are not type checked, and are generalized as Objects.

例子： () =>

英Example: () =>

Nullable Support?	Yes
Android (Java)	`com.facebook.react.bridge.Callback`
iOS	`RCTResponseSenderBlock`

你可能还会发现参考 React Native 中核心模块的 JavaScript 规范很有用。它们位于 React Native 存储库的 Libraries/ 目录内。

英You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the Libraries/ directory in the React Native repository.

四．在开发过程中调用代码生成

本节包含特定于 React Native v0.66 的信息。

Codegen 通常在构建时调用，但你可能会发现按需生成原生接口代码以进行故障排除很有用。

英The Codegen is typically invoked at build time, but you may find it useful to generate your native interface code on demand for troubleshooting.

如果你希望手动调用代码生成器，你有两种选择：

英If you wish to invoke the codegen manually, you have two options:

直接调用 Gradle 任务 (Android)。
手动调用脚本。

Android - 直接调用 Gradle 任务

你可以通过调用以下任务来触发 Codegen：

英You can trigger the Codegen by invoking the following task:

./gradlew generateCodegenArtifactsFromSchema --rerun-tasks

添加额外的 --rerun-tasks 标志是为了确保 Gradle 忽略此任务的 UP-TO-DATE 检查。在正常开发过程中你不应该需要它。

英The extra --rerun-tasks flag is added to make sure Gradle is ignoring the UP-TO-DATE checks for this task. You should not need it during normal development.

generateCodegenArtifactsFromSchema 任务通常在 preBuild 任务之前运行，因此你不需要手动调用它，但它会在构建之前触发。

英The generateCodegenArtifactsFromSchema task normally runs before the preBuild task, so you should not need to invoke it manually, but it will be triggered before your builds.

手动调用脚本

或者，你可以直接调用 Codegen，绕过 Gradle 插件或 CocoaPods 基础设施。这可以通过以下命令来完成。

英Alternatively, you can invoke the Codegen directly, bypassing the Gradle Plugin or CocoaPods infrastructure. This can be done with the following commands.

既然你已经配置了 Gradle 插件或 CocoaPods 库，那么所提供的参数对你来说将会非常熟悉。

英The parameters to provide will look quite familiar to you now that you have already configured the Gradle plugin or CocoaPods library.

生成架构文件

首先，你需要从 JavaScript 源生成一个架构文件。只需在 JavaScript 规范发生变化时执行此操作。生成此模式的脚本作为 react-native-codegen 包的一部分提供。如果从 React Native 应用中运行它，你可以直接使用 node_modules 中的包：

英First, you’ll need to generate a schema file from your JavaScript sources. You only need to do this whenever your JavaScript specs change. The script to generate this schema is provided as part of the react-native-codegen package. If running this from within your React Native application, you can use the package from node_modules directly:

node node_modules/react-native-codegen/lib/cli/combine/combine-js-to-schema-cli.js \
  <output_file_schema_json> <javascript_sources_dir>

react-native-codegen 的源代码可在 React Native 存储库中的 packages/react-native-codegen 下找到。在该目录中运行 yarn install 和 yarn build 以从源代码构建你自己的 react-native-codegen 包。在大多数情况下，你不想这样做，因为本指南假定使用与相关 React Native nightly 版本关联的 react-native-codegen 软件包版本。

生成原生代码工件

一旦你拥有原生模块或组件的架构文件，你就可以使用第二个脚本为你的库生成实际的原生代码工件。你可以使用先前脚本生成的相同架构文件。

英Once you have a schema file for your native modules or components, you can use a second script to generate the actual native code artifacts for your library. You can use the same schema file generated by the previous script.

node node_modules/react-native/scripts/generate-specs-cli.js \
  --platform <ios|android> \
  --schemaPath <generated_schema_json_file> \
  --outputDir <output_dir> \
  [--libraryName library_name] \
  [--javaPackageName java_package_name] \
  [--libraryType all(default)|modules|components]

注意： Codegen 的输出工件位于构建文件夹内，不应提交。它们仅供参考。

例子

以下是调用 Codegen 脚本为提供原生模块的库生成原生 iOS 接口代码的基本示例。该库的 JavaScript 规范源位于 js/ 子目录中，并且该库的原生代码期望原生接口在 ios 子目录中可用。

英The following is a basic example of invoking the Codegen script to generate native iOS interface code for a library that provides native modules. The JavaScript spec sources for this library are located in a js/ subdirectory, and this library’s native code expects the native interfaces to be available in the ios subdirectory.

# Generate schema - only needs to be done whenever JS specs change
node node_modules/react-native-codegen/lib/cli/combine/combine-js-to-schema-cli.js /tmp/schema.json ./js

# Generate native code artifacts
node node_modules/react-native/scripts/generate-specs-cli.js \
  --platform ios \
  --schemaPath /tmp/schema.json \
  --outputDir ./ios \
  --libraryName MyLibSpecs \
  --libraryType modules

在上面的示例中，code-gen 脚本将生成几个文件： MyLibSpecs.h 和 MyLibSpecs-generated.mm，以及少数 .h 和 .cpp 文件，全部位于 ios 目录中。

英In the above example, the code-gen script will generate several files: MyLibSpecs.h and MyLibSpecs-generated.mm, as well as a handful of .h and .cpp files, all located in the ios directory.

五、现有应用注意事项

本指南提供了迁移基于 React Native 提供的默认应用模板的应用的说明。如果你的应用偏离了模板，或者你正在使用的应用从未基于模板，那么以下部分可能会有所帮助。

英This guide provides instructions for migrating an application that is based on the default app template that is provided by React Native. If your app has deviated from the template, or you are working with an application that was never based off the template, then the following sections might help.

寻找你的桥梁代表

本指南假设 AppDelegate 配置为网桥代理。如果你不确定哪个是你的桥委托，请在 RCTBridge 和 RCTCxxBridge 中放置一个断点，运行你的应用，然后检查 self.delegate。

英This guide assumes that the AppDelegate is configured as the bridge delegate. If you are not sure which is your bridge delegate, then place a breakpoint in RCTBridge and RCTCxxBridge, run your app, and inspect self.delegate.

一、术语​

二. 流类型到原生类型的映射​

string​

boolean​

对象字面量​

Object​

Array<*>​

Function​

Promise<*>​

类型联合​

回调​

三． TypeScript 到原生类型的映射​

string​

boolean​

number​

对象字面量​

Object​

Array<*>​

Function​

Promise<*>​

类型联合​

回调​

四． 在开发过程中调用代码生成​

Android - 直接调用 Gradle 任务​

手动调用脚本​

生成架构文件​

生成原生代码工件​

例子​

五、现有应用注意事项​

寻找你的桥梁代表​

一、术语

二. 流类型到原生类型的映射

`string`

`boolean`

对象字面量

`Object`

`Array<*>`

`Function`

`Promise<*>`

类型联合

回调

三． TypeScript 到原生类型的映射

`string`

`boolean`

`number`

对象字面量

`Object`

`Array<*>`

`Function`

`Promise<*>`

类型联合

回调

四．在开发过程中调用代码生成

Android - 直接调用 Gradle 任务

手动调用脚本

生成架构文件

生成原生代码工件

例子

五、现有应用注意事项

寻找你的桥梁代表