npm 包 react-native-doc-viewer2 使用教程

React Native 是一个跨平台开发框架,在移动端应用开发中非常普及。其中,使用到的第三方包也是相当丰富的,其中之一就是 react-native-doc-viewer2,它是一个帮助开发者在应用中集成文档阅读器的 npm 包。

什么是 react-native-doc-viewer2?

React Native Doc Viewer2 是一个基于 React Native 的 npm 包,旨在提供一个集成文档阅读器的解决方案。它提供了在移动端开发中常用的文档阅读器的功能,支持多种文档格式,并且可以进行自定义配置。

如何安装 react-native-doc-viewer2

React-Native-Doc-Viewer2 可以直接通过 npm 安装,使用前需要先安装 react-native-pdf。

--- ------- ---------------- ------
--- ------- ------------------------ ------

如何使用 react-native-doc-viewer2

1.引入 react-native-pdf 以及 react-native-doc-viewer2:

------ ------- ---- -------------------
------ - --------- - ---- ---------------------------

2.在需要使用的地方,调用 DocViewer.openDoc 方法:

----- -------- - ----- ----------------------------------------------------------
----- ---- - ----- ----------------
--------------------
    ---- ---------
    --------- ---------------
    ------ -----
--- ------- ---- -- -
    -- ------- -
        -- ----
    - ---- -
        -- -----------
    -
---

其中,DocViewer.openDoc 方法的第一个参数是 Array 类型的文件数组,文件路径可转换为 Blob 对象。

可用参数

  • url:<string> 文件源路径,必传
  • fileName:<string> 文件名称,必传
  • fileType:<string> 文件类型,默认值 'pdf'
  • cache:<boolean> 是否缓存文件,默认为 true

示例代码

------ ------ - --------- - ---- --------
------ - ----- ------ - ---- ---------------
------ - --------- - ---- ---------------------------

----- --- ------- --------- -

    ------- - ----- -- -- -
        ----- -------- - ----- ----------------------------------------------------------
        ----- ---- - ----- ----------------
        --------------------
            ---- ---------
            ----------------
            ------------
            --------------
        --- ------- ---- -- -   
        ---
    -

    -------- -
        ------ -
            ----- ------------------------
                ------- ---------------------- --------------- --
            -------
        --
    -
-

------ ------- ----

总结

通过以上介绍,我们对于 npm 包 react-native-doc-viewer2 的使用有了一个初步的认识。它能够帮助我们在 React Native 中嵌入文档阅读器,支持多种文件格式,是开发者实现类似于基于 webview 的预览的更为灵活的解决方案。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600556a481e8991b448d36e1


猜你喜欢

  • npm 包 word-salad 使用教程

    在前端开发中,我们经常会遇到需要生成一些随机的文本或字词的情况。在这种情况下,一个方便的工具就是使用 npm 包 word-salad。 word-salad 是一个 Node.js 模块,可以用来生...

    2 年前
  • npm 包 cfn-events-stream 使用教程

    简介 cfn-events-stream 是一个适用于 AWS CloudFormation(以下简称 CFN)的 Node.js 模块,可以将 CloudFormation 的事件流(event s...

    2 年前
  • npm 包 pivot-authentication-service 使用教程

    前言 在 Web 应用开发中,用户认证和授权是一个非常重要的环节。为了方便开发者进行用户认证和授权模块的开发工作,npm 社区提供了众多优秀的包。本文将介绍一个名为 pivot-authenticat...

    2 年前
  • npm包joi-html-input 使用教程

    前言:在前端开发中,表单数据的校验是一项非常重要的工作。为了提高开发效率和保证数据的准确性,很多前端工程师都会使用npm包来实现表单校验。joi-html-input就是一种非常受欢迎的npm包之一,...

    2 年前
  • NPM 包 madoos-array-iterator 使用教程

    在前端开发中,经常需要对数组进行遍历、操作,然而 JavaScript 的数组 API 中并没有提供一些常见的操作,如过滤、映射等高阶函数,为此我们需要借助一些工具来增强数组操作的能力。

    2 年前
  • npm 包 release-multiple-note-generators 使用教程

    在软件开发过程中,发布版本时写发布说明的重要性不言而喻。有时候,我们需要为不同的人群(例如用户、测试人员、开发人员)提供不同的发布说明。这时候,使用 npm 包 release-multiple-no...

    2 年前
  • npm 包 shuaibin 使用教程

    在前端开发中,使用 npm 包已经成为了我们日常工作的一部分。在众多的 npm 包中,shuaibin 可能不是那么为人所知,但是它却具有非常重要的作用和指导意义。

    2 年前
  • npm 包 datbeco 使用教程

    什么是 datbeco? datbeco 是一个开源的前端 UI 库,它提供了许多常用的 UI 组件和工具,帮助开发者轻松创建高质量的用户界面。 datbeco 支持 React 和 Vue,可根据自...

    2 年前
  • npm 包 hain-plugin-onlinesearch 使用教程

    前言 对于前端开发者来说,日常工作中会用到很多工具和库。其中,npm 是一个非常重要的工具,它能够帮助我们快速安装和管理依赖包,并且拥有庞大的社区和高质量的插件。 在本文中,我们将介绍一款名为 hai...

    2 年前
  • npm 包 1221 使用教程

    简介 npm(Node Package Manager)是一个命令行工具,用于安装、管理、升级和卸载 Node.js 的包。在开发前端应用程序时,npm 是一种极为有用的工具,它可以让开发者方便地使用...

    2 年前
  • npm 包 react-common-hocs 使用教程

    简介 在 React 中,HOC(Higher-order Component)是一个非常流行的编程模式,它可以让你在不改变组件的原有结构的情况下,给组件增加一些功能。

    2 年前
  • npm 包 filessert 使用教程

    简介 filessert 是一个基于 Node.js 的 npm 包,用于在 Node.js 中方便地比较文件内容。它可以比较两个文件是否相等,也可以比较两个目录中的所有文件是否相等。

    2 年前
  • npm 包 metalsmith-collections-offset 使用教程

    metalsmith-collections-offset 是 metalsmith 插件之一,它可以将 metalsmith 的 collections 集合进行偏移,以便在使用模板引擎时能够更好地...

    2 年前
  • npm 包 react-native-geopackage 使用教程

    介绍 Geopackage 是一种开放的空间数据格式,具有跨平台的特性且支持离线使用。React Native Geopackage 是一个用于 React Native 应用中使用 Geopacka...

    2 年前
  • npm 包 node-filed 使用教程

    在前端开发中,我们经常需要发送 HTTP 请求来获取数据或者上传文件。而 node-filed 就是一个可以让我们方便地上传文件的 npm 包。本文将详细介绍 node-filed 的使用方法,并通过...

    2 年前
  • npm 包 untitled14 使用教程

    前言 在前端开发中,使用许多第三方包和工具来提高开发效率和代码质量已经成为了常态。npm 是前端社区中最受欢迎的包管理工具之一,每个开发者都应该熟练掌握它的使用。在本文中,我们将介绍一个名为 unti...

    2 年前
  • npm 包 @cryptographix/se-core 使用教程

    介绍 @cryptographix/se-core 是一个面向前端并支持多个操作系统的加密库,提供了常用的加密算法实现、数字签名和密钥交换等功能。它基于 TypeScript 编写,并通过 npm 包...

    2 年前
  • npm 包 @cryptographix/sim-core 使用教程

    在现代 Web 开发中,前端技术作用越来越大。npm 是前端技术库的主流工具,其中 @cryptographix/sim-core 是一款非常有用的包,可帮助您在前端中安全地处理密码和加密技术。

    2 年前
  • npm 包 gulp-replace-plus 使用教程

    引言 在前端开发中,我们经常需要进行一些文本替换操作,如批量修改代码中的某个参数、替换文件中的特定字符等等。而使用手动查找和替换显然是非常耗时且容易出错的。为了提高工作效率,我们可以使用 gulp-r...

    2 年前
  • npm 包 @edgeguide/requestor 使用教程

    介绍 @edgeguide/requestor 是一个基于 axios 的前端请求库,提供了更加灵活、可扩展的请求配置。通过@edgeguide/requestor可以更加方便地实现前端请求功能。

    2 年前

相关推荐

    暂无文章