背景：我们的应用是RN实现的，这次需要增加一个上传下载并打开查看本地文档的功能，于是就用到了这个查看文档这个组件，不过这次遇到一个蛮大的坑就是在安卓上使用出现如下的错误，这个错误耽搁了我1、2天时间，所以有必要记录一下
我结合了上传组件：react-native-file-selector 以及下载组件：react-native-fs一起实现的这个功能，具体的使用可以查看我的其他博文
react-native-doc-viewer，可以在手机上直接打开文档，支持远程和本地文档。
支持的文档格式：xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf,mp4。支持iOS和Android。
这里我是做安卓的，所以主要描写安卓相关的
插件安装我就不多写了，具体配置官网作者写的很清楚：
安装的时候需要注意的：
link完了手动检查一下安卓的各个目录下的配置
下面附上我的一部分程序实现：
这里需要注意的是：
1，OpenFile.openDoc这个方法里，对于安卓的url需要加"file://"，而ios不需要加
2，downloadDest就是你下载的文档地址，这里我的地址用的是 ：
let dirs =Platform.OS ==='ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalStorageDirectoryPath;
let downloadDest =`${dirs}/fileloca/`;
2，里面的安卓的fileName和ios的fileNameOptional可以任意取，这里我放的是我的文件名
3，安卓的fileType是没有“.”的
/**
* 查看本地文档
* fileType Default == "" you can use it, to set the File Extension
* (pdf,doc,xls,ppt etc) when in the Url the File Extension is missing.
*/
onPressLocalFile(downloadDest, fileName) {
this.mkDir();
console.log('onPressLocalFile: ', downloadDest, fileName)
let fileType = fileName.substring(fileName.lastIndexOf('.') +1)
let iosUrl = downloadDest +'/' + fileName
let androidUrl ="file://" + downloadDest + fileName
let filename = fileName.substring(0,fileName.lastIndexOf('.'))
this.setState({animating:true});
if (Platform.OS ==='ios') {
OpenFile.openDoc([{
url: iosUrl,
fileNameOptional: filename
}], (error, url) => {
if (error) {
this.setState({animating:false});
}else {
this.setState({animating:false});
console.log(url)
}
})
}else {
OpenFile.openDoc([{
url: androidUrl,
fileName: filename,
cache:false,
fileType: fileType
}], (error, url) => {
if (error) {
this.setState({animating:false});
}else {
this.setState({animating:false});
console.log(url)
}
})
}
}
就这样写完后我跑了下程序，然后就报下面这种错，让我头疼了1、2天，心累
Failed to find configured root that contains
简直太难受了，试了很多种网上的方法都没能访问到这个根目录
最后在主app的path目录下再加了一个和他组件下的path名称一样的才解决了这个问题
1，组件自己目录结构
2，主APP下添加的文件：
简直了，改完直接想骂人了都，之前写原生的时候文件名一样的多写一个都怕引用会错啥的，这RN的组件也是让我服了，必须记录，以后引用RN组件的时候要多考虑下这些东西，至于这个filePath呢是安卓原生的东西，就是系统存储name和路径，不知道的百度一下就懂了
想看下载文档程序的看下一篇文档：RN下载组件react-native-fs
网友评论