扩展

ReactXP 库的设计旨在尽可能轻量化，仅包含几乎所有应用都需要的跨平台 API 和“原始”组件。不常用到的功能以可选扩展的形式提供。

扩展有两种不同的类型。

1. 不包含平台特定代码但基于底层原始组件构建以提供新（通常更复杂）功能的高级组件。
2. 具有针对每个支持平台单独实现的额外 API 或“原始”组件。

扩展作为独立的 npm 包发布。它们通常以“reactxp-”为前缀。

高级 ReactXP 组件

使用高级组件就像在 React 中使用任何其他组件一样。由于这些组件是基于跨平台 ReactXP 原始组件构建的，因此它们也以跨平台的方式工作。

原始 ReactXP 扩展

要在你的应用中使用原始扩展，请像使用任何其他 npm 模块一样将其添加到你的 package.json 中。然后在你想要使用它的代码模块顶部导入它。

这是一个如何使用一个假想扩展的示例，该扩展以跨平台的方式提供视频播放功能。

import RXVideoPlayer from 'reactxp-videoplayer';

class MyVideoPanel extends RX.Component<null, null> {
    render() {
        return (
            <RXVideoPlayer
                source={ this.props.source }
                showControls={ true }
                onProgress={ this._onVideoProgress }
                onEnded={ this._onVideoEnded }
            />
        );
    }
}

实现一个新的“原始”

一个新的“原始”扩展（无论是组件还是 API 命名空间）必须具有一个跨平台接口，并针对 ReactXP 支持的每个平台提供该接口的平台特定实现。在某些情况下，实现可能在平台之间共享。

应为每个支持的平台提供实现。Web、iOS 和 Android 是必需的。适用于 MacOS 和 Windows 的 React Native 仍在开发中，目前被认为是可选的，但将来可能会成为必需。每个平台的主实现文件名为 index.[platform].js。对于 Web，平台被省略（即，文件名为 index.js）。这些实现文件必须位于扩展的发布目录的顶层，但它们通常只是从 dist 目录导入代码。

许多 ReactXP 应用是用 TypeScript 编写的，因此强烈建议所有 ReactXP 扩展提供一个类型定义文件，该文件定义了扩展的跨平台接口。扩展的 package.json 应该引用这个类型文件。例如："types": "dist/MyExtension.d.ts"。如果你正在用 TypeScript 实现扩展，编译器可以用来确保每个平台的实现与公共接口匹配。

示例扩展

请参阅文档的“扩展”部分，以获取可用 ReactXP 扩展的完整列表。其中一些位于独立的 git 仓库中，另一些位于 reactxp 仓库的 extensions 目录中。reactxp-video 扩展是一个很好的完整扩展示例，它涉及为每个支持平台编写原生代码。要构建任何这些示例扩展：

1. 克隆仓库。
2. 切换到扩展的顶级目录（例如 reactxp/extensions/video）。
3. 安装依赖的 npm 包：npm install。
4. 构建代码：npm run build。

生成的代码将位于 dist 目录中。