RN查看文档组件react-native-doc-viewer踩坑

背景：我们的应用是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。

这里我是做安卓的，所以主要描写安卓相关的

插件安装我就不多写了，具体配置官网作者写的很清楚：

组件的Github地址

安装的时候需要注意的：

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