reactnative实现文件下载并弹出选择打开方式

 要实现上述效果需要两个插件
第一个插件式rn-fetch-blob，用这个插件实现文件下载的功能
第二个插件式react-native-file-viewer，用这个插件实现弹框的效果。

新建DownloadView.js

import Permissions from './Permissions';
import RNFetchBlob from 'rn-fetch-blob';
import FileViewer from "react-native-file-viewer";
import { EasyLoading } from './EasyLoading';

let DownloadView = {};
DownloadView.viewAttachments = async (fileId, fileName,fileType,fileUrl) => {

  try {
    if (fileId == '' || fileId == undefined) {
      Toast.show('未收录', ToastShowTime)
    } else {
      const hasPermission = await Permissions.requestAndroidWriteExternalStorage();
      if (!hasPermission) {
        Toast.fail('没有文件权限', 1);
        return;
      }
      EasyLoading.show('下载中')
      let date = new Date().getTime();
      let type = fileName.split(".")[fileName.split(".").length - 1];
      let extension = fileName.split('.').pop();
      RNFetchBlob.fs.exists(`${RNFetchBlob.fs.dirs.SDCardDir}/addfile/download/`)//判断目标文件夹是否存在
        ? console.log('存在')
        : RNFetchBlob.fs.mkdir(`${RNFetchBlob.fs.dirs.SDCardDir}/addfile/download/`)//不存在时创建
      let filePath = `${RNFetchBlob.fs.dirs.SDCardDir}/addfile/download/${date}.${type}`;
      console.log('=============请求体======================');
      console.log('=============请求体======================');
      getFile(filePath,fileType,fileUrl)
    }
  } catch (error) {
    EasyLoading.dismiss();
    Toast.show('文件加载失败', ToastShowTime)
    console.log(error);
  }
}


const getFile = async (filePath,fileType,fileUrl) => {
  console.log('getFile');
  RNFetchBlob
  
  console.log(1111111);
  
  try{
    await 
    RNFetchBlob.config({
      fileCache: true,
      appendExt: fileType
    }).fetch('GET', fileUrl, {})
      .then((response) => {

        console.log('文件下载成功，路径为：'+response.path())
        const path = FileViewer.open(`file://${response.data}`) // absolute-path-to-my-local-file.

      })
  }
  catch(error) {
    Toast.show('文件加载失败', ToastShowTime)
    EasyLoading.dismiss();
  }
}


export default DownloadView

Permissions.js

import { PermissionsAndroid, Platform, Alert } from "react-native";

let Permissions = {};

Permissions.requestAndroidCAMERA = async function (): Promise<boolean> {
    if (Platform.OS == 'ios') return true;
    const hasPermission = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA);
    if (!hasPermission) {
        const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
        return result === 'granted'
    }
    return true;
}

Permissions.requestAndroidWriteExternalStorage = async function (): Promise<boolean> {
    if (Platform.OS == 'ios') return true;
    const hasPermission = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
    if (!hasPermission) {
        const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
        if (result === 'never_ask_again') {
            Alert.alert('您已禁止SD卡读写权限', '请在设置中开启SD卡读写权限', [{
                text: '取消'
            }, {
                text: '设置',
            }]);
            return false;
        }
        return result === 'granted'
    }
    return true;
}



export default Permissionsd　

调用方法

getFilesDown = (key) => {
    const { navigation } = this.props
    let val = {
      fileId: key.fileId,
      fileName: key.fileName,
      fileType: key.fileType,
      url: key.url,
    }

    DownloadView.viewAttachments(val.fileId, val.fileName, val.fileType,val.url)
  }

fileType表示文件类型（jpg,png,xls,pdf,mp4）

　url格式为（http://******）