Fabric 组件
这个文档仍然是实验性的,随着我们的迭代,细节会有变化。欢迎在工作小组内的讨论中分享你的反馈。
此外,它还包含几个手动步骤。请注意新架构尚未稳定下来,最终的开发者体验会继续迭代改善。我们正在努力开发工具、模板和库,以帮助你在新架构上快速入门,而不需要经历整个设 置过程。
Fabric 组件是一种使用 Fabric 渲染器渲染并展示在屏幕上的 UI 组件。在新架构中,使用 Fabric 组件替代原生组件具有以下优势:
- 各个平台的强类型接口声明是一致的;
- 您可以使用 C++ 编写组件或迁移其它平台的原生代码,以此避免在跨平台重复实现组件;
- 通过替换 Bridge 为 JSI(使用原生代码编写的 JavaScript 接口),提升 JavaScript 与原生代码的通讯效率。
在开发 Fabric 组件前,您需要先创建一个 JavaScript 接口描述文件。之后 Codegen 会根据这个文件创建一些 C++ 脚手架代码,用于将部分组件逻辑(比如调用原生平台接口能力)与 React Native 结合起来。C++ 代码在各个平台都是一样的,只要组件能够与生成的 C++ 代码连接起来,就可以导入到 App 并运行。
接下来的内容将一步步指导您针对 React Native 0.70.0 创建一个 Fabric 组件。
Fabric 组件仅适用于新架构。若您想了解如何将 App 迁移到新架构,可前往迁移指南。
如何创建 Fabric 组件
若要创建一个 Fabric 组件,您需要遵循以下步骤:
- 声明 JavaScript 接口;
- 配置组件以用于 Codegen 生成统一代码,生成的代码可添加为 App 的依赖;
- 编写所需的原生代码。
完成这些步骤后,组件就可以在 App 里使用了。本指导将向您介绍如何将其添加到 App,并利用自动链接使其能在 JavaScript 代码引用。
1. 目录配置
为了使组件与 App 保持解耦,有个不错的方案是将组件从 App 抽离出来,并添加为 App 的一个依赖。如果您打算开发一个开源的 Fabric 组件,您同样也需要这么做。
在本指导中,您将开发一个用于在屏幕上将文本居中显示的 Fabric 组件。
在与 App 平级的目录,创建名为 RTNCenteredText
的目录。在这个目录中,创建三个子目录:js
、ios
和 android
。创建后的目录结构是这样的:
.
├── MyApp
└── RTNCenteredText
├── android
├── ios
└── js
2. 声明 JavaScript 接口
新架构要求必须使用强类型风格语言声明 JavaScript 接口(Flow 和 TypeScript 皆可)。Codegen
会根据这些接口声明来生成强类型的语言,其中包括 C++、Objective-C 和 Java。
对于声明类型的代码文件必须满足以下两点要求:
- 文件必须使用
<MODULE_NAME>NativeComponent
命名,在使用 Flow 时,以.js
或.jsx
为后缀名;在使用 Typescript 时,以.ts
或.tsx
为后缀名。Codegen 只会找到匹配这些命名规则的文件; - 代码中必须要输出
HostComponent
对象。
以下是使用 Flow 和 TypeScript 声明的 RTNCenteredText
组件。在 js
目录中,创建一个命名为 RTNCenteredText
并带有相应后缀名的文件。
- TypeScript
- Flow
// @flow strict-local
import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
import type {HostComponent} from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
type NativeProps = $ReadOnly<{|
...ViewProps,
text: ?string,
// add other props here
|}>;
export default (codegenNativeComponent<NativeProps>(
'RTNCenteredText',
): HostComponent<NativeProps>);
import type {ViewProps} from 'ViewPropTypes';
import type {HostComponent} from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
export interface NativeProps extends ViewProps {
text?: string;
// 添加其它 props
}
export default codegenNativeComponent<NativeProps>(
'RTNCenteredText',
) as HostComponent<NativeProps>;
在声明文件的顶部导入了一些内容。以下是开发 Fabric 组件必须要导入的内容:
HostComponent
类型: 导出的组件需要与这个类型保 持一致;codegenNativeComponent
函数:负责将组件注册到 JavaScript 运行时。
声明文件的中间部分包含了组件的 props。Props("properties" 的缩写)是用于自定义 React 组件的参数信息。在本例中,您将需要控制组件的 text
属性。
在声明文件的最后部分,导出了泛型函数 codegenNativeComponent
的返回值,此函数需要传递组件的名称。
当我们在编写 JavaScript 代码时,如果没有配置好对应的模块或依赖安装,就从第三方库导入类型,可能会使的您的 IDE 不能正确载入导入声明,从而显示错误或警告。这些问题会在 Fabric 添加为 App 的依赖后得到解决。
3. 组件配置
接下来,您需要为 Codegen 和自动链接添加一些配置。
有一些配置文件在 iOS 和 Android 平台是通用的,而有的仅能在某一平台使用。