react-native-doc-viewer实现文档预览-程序员宅基地

技术标签： react-native  react native  

react-native项目要求实现word,excel,pdf,mp4,png等格式附件图片的在线预览，最终选用react-native-doc-viewer实现，

具体步骤如下：

1、安装react-native-doc-viewer

      (1) npm install react-native-doc-viewer --save

      (2) react-native link react-native-doc-viewer

2、修改源代码

    （1） 因为react-native-doc-viewer已经很久没有更新了，所以SdkVersion是23，比较低，将它修改成如下图所示：

（2）找到下图中左侧的文件，将右侧红圈圈里面的代码注释掉

至此，所以安装和配置完成，下面是写代码步骤

3、代码实现

 

import OpenFile from 'react-native-doc-viewer';
//预览附件
viewAttachment(attachment) {
   let fileTypeArr = ['xls', 'ppt', 'doc', 'xlsx', 'pptx', 'docx', 'png', 'jpg', 'pdf', 'mp4', 'txt'];
   if (fileTypeArr.indexOf(attachment.fileSuffix) >= 0) {
      if (Platform.OS === 'ios') {
         OpenFile.openDoc([{
            url: attachment.filePath,
            fileNameOptional: attachment.fileName
         }], (error, url) => {
            if (error) {
               console.log(error);
            } else {
               console.log(url)
            }
         })
      } else {
         OpenFile.openDoc([{
            url: attachment.filePath, 
            fileName: attachment.fileName,
            cache: false,
            fileType: attachment.fileSuffix
         }], (error, url) => {
            if (error) {
               console.error(error);
            } else {
               console.log(url)
            }
         });
      }
   } else {
      Toast.show('app端暂不支持此种格式附件预览，请去pc端预览');
   }
}

应用会打开手机上对应的第三方软件，做预览。 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juxiaoyu/article/details/109068115

智能推荐

【蓝桥杯嵌入式学习笔记】（一）比赛及开发环境相关介绍_蓝桥杯嵌入式比赛时会提供什么-程序员宅基地

文章浏览阅读1.9k次，点赞3次，收藏33次。一、比赛相关介绍1、我刚开始学习32的时候是先学习的库函数，这种传统的库函数开发方式会花费很多时间在各种模块的初始化上面，而CubeMX+HAL库开发的方式，则是省去了初始化的部分，让我们能将更多的精力放在实现功能和逻辑设计方面。当然，库函数的开发方式也是有必要学习的，一些相关底层知识也需要一定的理解，因为 CubeMX也可能存在Bug，如果你对库函数不了解的话也会出现一些麻烦无法解决。2、蓝桥杯嵌入式比赛开发板主控芯片采用STM32G431RBT6，并预留扩展板接口。..._蓝桥杯嵌入式比赛时会提供什么

JS 离散点生成等高线图的几种方式_observable plot-程序员宅基地

文章浏览阅读1.7k次，点赞15次，收藏27次。JS 离散点生成等高线图的几种方式_observable plot

Java全栈课程之JavaSE——Java预科阶段_全栈javase项目-程序员宅基地

文章浏览阅读72次。① 系统软件：dos、windows、Linux、unix、Mac、Android、ios。5.广泛应用在：科学计算、数据处理、自动控制、计算机辅助设计、人工智能、网络等领域。2.计算机硬件组成：cpu、主板、内存、电源、主机箱、硬盘、显卡、键盘、鼠标等。2.能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。4.常见的形式有台式计算机、笔记本计算机、大型计算机等。运算器 控制器。② 应用软件：wps、QQ、微信。输入设备→存储器→输出设备。3.第三代语言：高级语言。_全栈javase项目

Anaconda conda常用命令：从入门到精通_conda命令-程序员宅基地

文章浏览阅读10w+次，点赞286次，收藏1.3k次。简要介绍Anaconda conda的常用命令的使用，掌握了这些基本命令应该足以应付日常的‘生活自理’吧_conda命令

thinkphp6/8 - 超详细使用阿里云短信服务发送验证码功能，TP框架调用对接阿里云短信发验证码（详细示例代码，一键复制开箱即用）_thinkphp6 extend扩展短信扩展类-程序员宅基地

文章浏览阅读2k次，点赞3次，收藏4次。php thinkphp 阿里云短信服务，阿里云短信，tp框架php对接短信服务，tp6对接阿里云短信，tp发送短信控制器，thinkphp6调用阿里云短信服务发送验证码功能实现，thinkphp怎么对接阿里云短信验证码，tp如何使用阿里云短信，tp5/6使用阿里云短信新手详细教程，TP实现生成和校验验证码功能，Thinkphp6对接阿里云短信验证码服务，TP6 对接阿里云短信接口，tp接入阿里云短信报错不生效，thinkPHP6验证码接口，用thinkphp调用阿里云生成验证码的接口，thinkphp6 _thinkphp6 extend扩展短信扩展类

Python ctx-程序员宅基地

文章浏览阅读2.9k次，点赞5次，收藏10次。ctx是context的缩写, 翻译成"上下文; 环境"ctx专门用在静态方法中我们知道python类函数都要带self参数，但是在静态方法中，带ctx参数而不是selfself指的是实例对象; 而ctx用在静态方法中, 调用的时候不需要实例化对象, 直接通过类名就可以调用, 所以self在静态方法中没有意义自定义的forward()方法和backward()方法的第一个参数必须是ctx; ctx可以保存forward()中的变量,以便在backward()中继续使用, 下一条是具体的._python ctx

随便推点

Literature Lesson_lietrature lesson程序-程序员宅基地

文章浏览阅读424次。A. Literature Lessontime limit per test2 secondsmemory limit per test256 megabytesinputstandard inputoutputstandard outputVera adores poems. All the poems Vera knows are_lietrature lesson程序

回调函数例子-程序员宅基地

文章浏览阅读1k次。回调函数_回调函数例子

能量俘获阅读【5】- 纳米摩擦发电机之精密传感 - TENG文献阅读- 摩擦电子晶体管传感器用于增强型氢气检测传感装置_纳米摩擦发电机 用于传感-程序员宅基地

文章浏览阅读197次。这篇是近期，国家纳米中心的庞耀坤、陈立波、胡国锋等学者在NANO RESEARCH期刊上发表在Nano Research 上的一篇关于先进氢气监测传感器的文章，英文名称是：Tribotronic transistor sensor for enhanced hydrogen detection 研究团队将ZnO场效应晶体管(FET)与摩擦电纳米发电机在独立模式下耦合，研制了一种新型ZnO摩擦电子晶体管，并将其用作室温下氢气检测传感器。_纳米摩擦发电机 用于传感

python爬虫之Scrapy介绍八——Scrapy-分布式（以爬取京东读书为示例）_京东读书校园版 python-程序员宅基地

文章浏览阅读781次。Scrapy-分布式（scrapy-redis）介绍1 Scrapy-分布式介绍1.1 Scrapy-redis工作原理1.2 Scrapy-redis 安装和基本使用1.2.1 安装1.2.2 基本使用2 Scrapy转为Scrapy-分布式2.1 scrapy爬取京东读书2.2 改为Scrapy-分布式1 Scrapy-分布式介绍1.1 Scrapy-redis工作原理首先回顾一下Scrapy的工作流程，然后进一步介绍Srapy-分布式的工作流程和原理。（1）Scrapy的工作流程详见：pyt_京东读书校园版 python

java后台怎么设置转盘抽奖_[Java教程]转盘抽奖-程序员宅基地

文章浏览阅读492次。[Java教程]转盘抽奖0 2015-09-09 12:00:06html部分 css部分，由于做的这个转盘是手机端的，采用的响应式布局.turntableWap{ padding:1rem; b...

CSP-J 初赛模拟卷4 题解_数组可能无法o(1)完成的操作-程序员宅基地

文章浏览阅读536次，点赞2次，收藏3次。题解：首先先让第一个人选择，第一个人可以选择三间教室中的任意一间，第二个人可以选择剩下三间中的其中一间，第三个人选择剩下两间中的其中一间，最后一个人可以选择任意一间，与第一、第二或第三个人配对。证明：既然有64个叶子，那么就证明最底层有64个结点，树的深度为7，又得深度为k的二叉树至多有2^k-1个结点，把7代入，得2^7-1=128-1=127个结点。题解：二叉树的其中一个性质——n个叶子的完全二叉树最少有2n-1个结点，把64代入公式，得64×2-1=128-1=127个结点。_数组可能无法o(1)完成的操作

推荐文章

热门文章

相关标签