在 React Native 开发中，我们经常需要实现图片、视频等多媒体文件的预览功能。而 react-native-viewer 就是一个可以实现这个功能的 npm 包。它可以让我们在 React Native 应用中轻松展示各种文件类型，包括 PDF、视频、音频、字体等。
安装
在项目目录下执行以下命令安装 react-native-viewer：
npm install react-native-viewer --save
使用
基础用法
下面是一个基本用法的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----------------- ---- - ---- ---------------
------ ------ ---- ----------------------
----- --- - -- -- -
----- ----------- ------------- - ----------------------
----- ----------- - -- -- -
-------------------------
--
------ -
----- -------- ----- - ---
----------------- ----------------------
-----------------
-------------------
-------
-------------------
----------- -- --------------------
--------- ---- ------------------------------- --
--
-------
--
--
------ ------- ----在这个示例中，我们使用了 Viewer 组件来展示 PDF 文件。其中 visible 属性指定了 Viewer 是否可见，onClose 属性指定了关闭 Viewer 时的回调函数，source 属性指定了要展示的文件地址。
文件类型
Viewer 组件支持展示多种文件类型，包括 PDF、视频、音频、字体等。在 source 属性中，我们需要使用不同的对象来指定不同的文件类型。
展示 PDF 文件时，source 属性应该是以下格式：
{
uri: 'https://www.test.com/test.pdf',
type: 'pdf',
cache: true
}其中 uri 指定了 PDF 文件的地址，type 指定了文件类型为 PDF，cache 指定了是否应该缓存文件。
视频
展示视频文件时，source 属性应该是以下格式：
{
uri: 'https://www.test.com/test.mp4',
type: 'mp4',
cache: true
}其中 uri 指定了视频文件的地址，type 指定了文件类型为 MP4，cache 指定了是否应该缓存文件。
音频
展示音频文件时，source 属性应该是以下格式：
{
uri: 'https://www.test.com/test.mp3',
type: 'mp3',
cache: true
}其中 uri 指定了音频文件的地址，type 指定了文件类型为 MP3，cache 指定了是否应该缓存文件。
字体
展示字体文件时，source 属性应该是以下格式：
{
uri: 'https://www.test.com/test.ttf',
type: 'ttf',
cache: true
}其中 uri 指定了字体文件的地址，type 指定了文件类型为 TTF，cache 指定了是否应该缓存文件。
自定义样式
Viewer 组件允许我们修改一些默认样式或添加自定义样式：
屏幕旋转
可以使用 orientation 属性来设定 Viewer 组件的屏幕旋转方式：
<Viewer orientation="portrait" />
其中 orientation 可以是以下值：
- portrait：纵向
- landscape：横向
- auto：自动旋转
背景颜色
可以使用 backgroundColor 属性来修改 Viewer 组件的背景颜色：
<Viewer backgroundColor="#000" />
其中 backgroundColor 是一个 CSS 颜色值。
按钮颜色
可以使用 btnColor 属性来修改 Viewer 组件中的按钮颜色：
<Viewer btnColor="#fff" />
其中 btnColor 是一个 CSS 颜色值。
自定义按钮
可以使用 renderIndicator 属性来添加自定义按钮：
<Viewer
renderIndicator={() => (
<TouchableOpacity onPress={handleCustomPress}>
<Text>自定义按钮</Text>
</TouchableOpacity>
)}
/>其中 renderIndicator 是一个函数，函数返回自定义的组件。
结语
react-native-viewer 是一个非常实用的 npm 包，它可以方便地实现多媒体文件的预览功能。通过这篇文章，我们了解了 react-native-viewer 的基础用法和文件类型，以及如何自定义样式和按钮。希望这篇文章对大家学习和使用 react-native-viewer 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a530d09270238224ae