1. 前言
@atlaskit/media-viewer 是一个基于 React 的用于展示媒体文件（如图片、音频、视频等）的 UI 组件库。它可以让你快速实现一个媒体文件浏览器，同时提供了丰富的功能和灵活的配置选项。本文将介绍如何使用 @atlaskit/media-viewer 这个 npm 包。
2. 安装
使用 npm 或 yarn 可以很方便地安装 @atlaskit/media-viewer。
npm install @atlaskit/media-viewer --save
或者
yarn add @atlaskit/media-viewer
3. 示例
3.1 基本用法
@atlaskit/media-viewer 的基本用法非常简单，只需要引入组件并传入相应的参数即可展示媒体文件。下面是一个基本的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -------------------------
----- ---------- - --
----- --------
---- ----------------------------------------------------------
----- ------ ------
---
----- --- - -- -- -
------ -
------------ ------------------ --
--
--
------ ------- ----在这个示例中，我们定义了一个目录中的媒体文件 mediaFiles，然后将其传入到 MediaViewer 组件中即可。
3.2 改变媒体文件预览器的标题
通过设置 pageTitle 属性来改变媒体文件预览器的标题：
<MediaViewer
items={mediaFiles}
pageTitle="My Media Files"
/>3.3 自定义媒体文件
使用 customControls 属性可以自定义媒体文件的展示，例如添加自定义的控制按钮：
-- -------------------- ---- -------
----- -------------- - -
-----
------- ----------- -- ------------------- ------- -----------
------ -------
---------
------
--
------------
------------------
-------------------------------
--3.4 自定义媒体文件类型
默认情况下，@atlaskit/media-viewer 支持展示多种类型的媒体文件，包括图片、视频、音频、PDF 等。如果需要自定义媒体文件类型的展示，需要通过 MediaViewer.Item 组件来实现。下面是一个自定义展示 Markdown 文件的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ - -------- - ---- -------------------------
----- ------- - --
----- -----------
---- --------------------------------------------------------------------------
----- --------- ------
---
----- -------------- - ------- -- -
------ -
---- -------------------------- ------- ------------- -- --
--
-
----- --------------- - -
--------- -- ---- ---- -- -- -
---------
---------
-----------
-------------------------
--
--
--
----- --- - -- -- -
------ -
------------ --------------- ------------------- --------------- --------------- -- --
--
--
------ ------- ----在这个示例中，我们定义了一个自定义的媒体文件类型 markdown，并通过 customRenderer 属性传递到 MediaViewer 组件中。然后我们在自定义渲染器 customRenderers 中定义了如何展示 Markdown 文件。最终展示出来的效果就是将 Markdown 文件解析成 HTML 并进行展示。
4. 总结
通过本文的介绍，我们可以看到 @atlaskit/media-viewer 这个 npm 包的使用非常简单，同时又提供了很多丰富的配置选项，可以让我们方便地实现一个媒体文件浏览器。在实际的开发中，我们可以根据具体需求来进行相应的定制，例如自定义媒体文件类型、添加自定义的控制按钮等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f72ed09a9b7065299ccbbea