ReactNative | 通过文件下载 / 打开需求，聊聊使用三方库

// 文件系统访问react-native-fs  // 允许您使用默认应用程序在设备上打开文件（mp3，mp4，pdf，word，excel，dwg等）react-native-file-opener

npm install react-native-fs --savenpm install react-native-file-opener --save

1. in the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to2. Go to node_modules ➜ react-native-file-opener ➜ ios ➜ select RNFileOpener.xcodeproj3. Add libRNFileOpener.a to Build Phases -> Link Binary With Libraries4. Compile and have fun

// file: android/settings.gradle ...include ':react-native-file-opener'project(':react-native-file-opener').projectDir = new File(settingsDir, '../node_modules/react-native-file-opener/android')

// file: android/app/build.gradle ...dependencies {   ...   compile project(':react-native-file-opener')}

// file: MainActivity.java     ...import com.fileopener.FileOpenerPackage;//<- import package  public class MainActivity extends ReactActivity {    /**   * A list of packages used by the app. If the app uses additional views   * or modules besides the default ones, add more packages here.   */    @Override    protected List<ReactPackage> getPackages() {        return Arrays.<ReactPackage>asList(            new MainReactPackage(), //<- Add comma             new FileOpenerPackage() //<- Add package         );    }...}

import{  Alert}from "react-native"const RNFS = require("react-native-fs");const FileOpener = require("react-native-file-opener");
let savePath = Platform.OS === 'ios' ? RNFS.DocumentDirectoryPath : RNFS.ExternalDirectoryPath;let toFilePath = savePath + "/1.pdf" // 文件路径let url = "" // 文件下载地址let fileType = "application/pdf"
let begin = res => {  this.setState({    downloading: true  })}
let progress = data => {  var text = JSON.stringify(data)  if (this.state.progress < 100) {    if (text.contentLength > 0) {      var num = this.state.progress + 1      this.setState({        progress: num      })    } else {      var num = Math.round(data.bytesWritten / 10000)      if (num < 100) {        this.setState({          progress: num        })      }    }  }}
// 判断文件是否存在RNFS.exists(toFilePath).then(exists => {  if (exists) {    FileOpener.open(      toFilePath,      fileType    ).then(() => {      // console.log('success!!');    }, (e) => {      console.log(e)      Alert.alert('提示', '打开文件失败，请先安装对应文件阅读器')    })  } else {     // 下载文件    const downRet = RNFS.downloadFile({      fromUrl: url,      toFile: toFilePath,      progress: progress,      begin: begin    })    downRet.promise.then(res => {      this.setState({        downloading: false,        progress: 0      })      // 打开文件      FileOpener.open(        toFilePath,        fileType      ).then(() => {        console.log('打开成功')      }, (e) => {        Alert.alert('提示', '打开文件失败，请先安装PDF阅读器')      })    }).catch(err => {      this.setState({        downloading: false,        progress: 0      })      Alert.alert('提示', '下载文件失败,错误原因:' + err)    })  }})

// 修改：#import "RCTBridgeModule.h"
// 变更为：#if __has_include(<React/RCTAssert.h>)#import <React/RCTBridgeModule.h>#else#import "RCTBridgeModule.h"#endif