在 React Native 中，要实现文件预览功能，通常需要使用到 react-native-doc-viewer 组件。如果你是使用 TypeScript 编写项目，那么你需要使用到 @types/react-native-doc-viewer 这个 npm 包才能在 TypeScript 中正确地调用此组件。
本文将为大家详细介绍如何使用 npm 包 @types/react-native-doc-viewer。
安装
首先我们需要安装这个 npm 包，在终端输入以下命令即可：
npm install @types/react-native-doc-viewer
导入
安装完成后，在你需要使用该组件的地方，导入此包：
import DocViewer from 'react-native-doc-viewer';
打开文件
使用 react-native-doc-viewer 打开文件，需要传递两个参数：文件的本地路径 filePath 和文件 MIME 类型 mime.
下面是一个打开 PDF 文件的例子：
const filePath = 'file:///path/to/my/pdf.pdf'; const mime = 'application/pdf'; DocViewer.openDoc(filePath, mime);
回调函数
打开文件时还可以传递第三个参数 config，该参数为一个预览配置对象。其中有个属性 onClose 用于在文件预览结束后触发。下面是一个例子：
-- -------------------- ---- -------
----- ------ - -
-------- -- -- -
--------------- ------- -------
--
--
----- -------- - -----------------------------
----- ---- - ------------------
--------------------------- ----- --------打开 URL 链接
如果你需要打开 URL 链接，只需将 filePath 参数改为 URL 地址即可：
const filePath = 'https://example.com/my/example.pdf'; const mime = 'application/pdf'; DocViewer.openDoc(filePath, mime);
MIME 类型参考
下面是一些常见 MIME 类型的列表：
- PDF:
application/pdf - Word:
application/msword - Excel:
application/vnd.ms-excel - PowerPoint:
application/vnd.ms-powerpoint
总结
本文介绍了 npm 包 @types/react-native-doc-viewer 的使用方法，并提供了详细使用示例。希望本文对大家有所帮助，让大家更好地掌握这个组件的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc177b5cbfe1ea0611de9