ReactNative文檔查看組件：react-native-doc-viewer

事件背景：最近在寫一個項目，要求本地打開、查看和打開遠程的文檔。找到了一個組件，使用起來挺方便的。就分享一下。我是配合react-native-fs實用的，fs配置的一些東西看我另一篇隨筆。

react-native-doc-viewer，可以在手機上直接打開文檔，支持遠程和本地文檔。

支持的文檔格式：xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf,mp4。支持iOS和Android。

組件名稱：react-native-doc-viewer

首先安裝：npm install react-native-doc-viewer --save

其次自動鏈接：react-native link react-native-doc-viewer

????????按理說是自動連接是可以的。可是程序運行一下發現還是報錯。只能手動來了。

先附上npm網址：https://www.npmjs.com/package/react-native-doc-viewer

檢查并鏈接：

一、ios端：

1、在XCode中，在項目導航器中，右鍵單擊Libraries?Add Files to [你的項目名字]

2、轉到node_modules??react-native-doc-viewer并添加RNReactNativeDocViewer.xcodeproj

3、在XCode中，在項目導航器中，選擇您的項目。添加libRNReactNativeDocViewer.a到項目的Build Phases?Link Binary With Libraries

劃重點，我的以上三條都鏈接上了。只有下面的沒有鏈接上。

鏈接的框架和庫必須具有此2個庫（AssetsLibrary.framework和QuickLock.framework）

注意當顯示http鏈接時，不要忘記將APP傳輸安全設置 - >允許任意加載設置為YES

在info.plist里沒有的話添加上。

二、android配置

去看npm網址吧，我的是直接連接一下就自動配置上了，所以懶得整理了。

附上API：

openDoc 打開遠程貨或本地文檔

openDocb64 打開Base64字符串格式文檔

openDocBinaryinUrl 打開二進制文件

playMovie 打開視頻文件

制作這個組件的作者估計是沒時間寫很詳細，所以npm上也不是很詳細。下面附上我寫的一部分程序。

import React, { Component } from 'react';

import {

? ? StyleSheet,Text,View,

? ? Platform,Button,Alert,ActivityIndicator

} from 'react-native';

import OpenFile from 'react-native-doc-viewer';

var RNFS = require('react-native-fs');

//保存路徑可以跳進去看，具體自己選擇

var SavePath = Platform.OS === 'ios' ? RNFS.LibraryDirectoryPath : RNFS.ExternalDirectoryPath;

export default class Component extends Component {

? ? static navigationOptions = ({ navigation }) => ({

? ? ? ? title: `${navigation.state.params.name}`,

? ? });

? ? state = { animating: false }

//首先下載文件

? ? ?componentDidMount() {

? ? ? alert("開始")

? ? RNFS.exists(SavePath + "demo.docx").then(

? ? ? ? //判斷文件是否已存在，返回result為true說明存在，result為false說明不存在

? ? ? ? (result)=>{

? ? ? ? ? ? console.log(result);

? ? ? ? ? ? if(!result){

? ? ? ? ? ? ? ? var DownloadFileOptions = {

? ? ? ? ? ? ? ? ? ? fromUrl: "https://calibre-ebook.com/downloads/demos/demo.docx",// 下載文件的URL

? ? ? ? ? ? ? ? ? ? toFile: SavePath+"/demo.docx",? ? ? ? // 將文件保存到的本地文件系統路徑

? ? ? ? ? ? ? ? ? ? //進度條

? ? ? ? ? ? ? ? ? ? begin: (res) => {

? ? ? ? ? ? ? ? ? ? ? ? console.log('begin', res);

? ? ? ? ? ? ? ? ? ? ? ? console.log('contentLength:', res.contentLength / 1024 / 1024, 'M');

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? progress: (res) => {

? ? ? ? ? ? ? ? ? ? ? ? let pro = res.bytesWritten / res.contentLength;

? ? ? ? ? ? ? ? ? ? ? ? console.log(pro);

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? const ret = RNFS.downloadFile(DownloadFileOptions);

? ? ? ? ? ? ? ? ret.promise.then(res => {

? ? ? ? ? ? ? ? ? ? console.log('success', res);

? ? ? ? ? ? ? ? ? ? console.log('file://' + DownloadFileOptions.toFile)

? ? ? ? ? ? ? ? }).catch(err => {


? ? ? ? ? ? ? ? ? ? console.log('err', err);

? ? ? ? ? ? ? ? });

? ? ? ? ? ? }

? ? ? ? }

? ? ).catch(

? ? )

}

//打開本地文件

? ? handlePressLocal = () => {

? ? ? ? this.setState({ animating: true });

? ? ? ? if (Platform.OS === 'ios') {

? ? ? ? ? ? OpenFile.openDoc([{

? ? ? ? ? ? ? ? url: SavePath + "/demo.docx",

? ? ? ? ? ? ? ? fileNameOptional: "白皮書"

? ? ? ? ? ? }], (error, url) => {

? ? ? ? ? ? ? ? if (error) {

? ? ? ? ? ? ? ? ? ? this.setState({ animating: false });

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? this.setState({ animating: false });

? ? ? ? ? ? ? ? ? ? console.log(url)

? ? ? ? ? ? ? ? }

? ? ? ? ? ? })

? ? ? ? } else {

? ? ? ? ? ? OpenFile.openDoc([{

? ? ? ? ? ? ? ? url: "file://"+SavePath+"/demo.docx",//打開本地文件必須加上file://

? ? ? ? ? ? ? ? fileName: "白皮書",

? ? ? ? ? ? ? ? cache: true,

? ? ? ? ? ? ? ? fileType: "docx"

? ? ? ? ? ? }], (error, url) => {

? ? ? ? ? ? ? ? if (error) {

? ? ? ? ? ? ? ? ? ? console. log(error)

? ? ? ? ? ? ? ? ? ? this.setState({ animating: false });

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? this.setState({ animating: false });

? ? ? ? ? ? ? ? ? ? console.log(url)

? ? ? ? ? ? ? ? ? ? alert(url)

? ? ? ? ? ? ? ? }

? ? ? ? ? ? })

? ? ? ? }

? ? }

//打開遠程文件

handlePress = () => {

? ? ? ? this.setState({ animating: true });

? ? ? ? if (Platform.OS === 'ios') {

? ? ? ? ? ? OpenFile.openDoc([{

? ? ? ? ? ? ? ? url: "https://calibre-ebook.com/downloads/demos/demo.docx",

? ? ? ? ? ? ? ? fileNameOptional: "test filename"

? ? ? ? ? ? }], (error, url) => {

? ? ? ? ? ? ? ? if (error) {

? ? ? ? ? ? ? ? ? ? this.setState({ animating: false });

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? this.setState({ animating: false });

? ? ? ? ? ? ? ? ? ? console.log(url)

? ? ? ? ? ? ? ? }

? ? ? ? ? ? })

? ? ? ? } else {

? ? ? ? ? ? //Android

? ? ? ? ? ? this.setState({ animating: true });

? ? ? ? ? ? OpenFile.openDoc([{

? ? ? ? ? ? ? ? url: "https://www.huf-haus.com/fileadmin/Bilder/Header/ART_3/Header_HUF_Haus_ART_3___1_.jpg", // Local "file://" + filepath

? ? ? ? ? ? ? ? fileName: "sample",

? ? ? ? ? ? ? ? cache: false,

? ? ? ? ? ? ? ? fileType: "jpg"

? ? ? ? ? ? }], (error, url) => {

? ? ? ? ? ? ? ? if (error) {

? ? ? ? ? ? ? ? ? ? this.setState({ animating: false });

? ? ? ? ? ? ? ? ? ? console.error(error);

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? this.setState({ animating: false });

? ? ? ? ? ? ? ? ? ? console.log(url)

? ? ? ? ? ? ? ? }

? ? ? ? ? ? })

? ? ? ? }

? ? }

setToggleTimeout() {

? ? ? ? this.setTimeout(() => {

? ? ? ? ? ? this.setState({ animating: !this.state.animating });

? ? ? ? ? ? this.setToggleTimeout();

? ? ? ? }, 2000);

? ? }

render() {

? ? ? ? return (

? ? ? ? ? ? <View style={styles.container}>

? ? ? ? ? ? ? ? <ActivityIndicator

? ? ? ? ? ? ? ? ? ? animating={this.state.animating}

? ? ? ? ? ? ? ? ? ? style={[styles.centering, { height: 80 }]}

? ? ? ? ? ? ? ? ? ? size="large" />

? ? ? ? ? ? ? ? <Text style={styles.welcome}>

? ? ? ? ? ? ? ? ? ? Doc Viewer React Native

? ? ? ? ? ? ? ? </Text>

? ? ? ? ? ? ? ? <Button

? ? ? ? ? ? ? ? ? ? onPress={this.handlePress.bind(this)}

? ? ? ? ? ? ? ? ? ? title="打開遠程文檔"

? ? ? ? ? ? ? ? ? ? accessibilityLabel="See a Document"

? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? <Button

? ? ? ? ? ? ? ? ? ? onPress={this.handlePressLocal.bind(this)}

? ? ? ? ? ? ? ? ? ? title="打開本地文檔"

? ? ? ? ? ? ? ? ? ? accessibilityLabel="See a Document"

? ? ? ? ? ? ? ? />

? ? ? ? ? ? </View>

? ? ? ? );

? ? }

}

const styles = StyleSheet.create({

? ? container: {

? ? ? ? flex: 1,

? ? ? ? justifyContent: 'center',

? ? ? ? alignItems: 'center',

? ? ? ? backgroundColor: '#F5FCFF',

? ? },

? ? welcome: {

? ? ? ? fontSize: 20,

? ? ? ? textAlign: 'center',

? ? ? ? margin: 10,

? ? },

? ? instructions: {

? ? ? ? textAlign: 'center',

? ? ? ? color: '#333333',

? ? ? ? marginBottom: 5,

? ? },

});

上面我覺得重要的地方都有加注釋。有使用fs 有需要的可以點下FS，去我的另一篇文章?。

再次劃重點：打開本地文件失敗：打開本地文件的url：必須是file：//+路徑+文件名字。上面也有注釋。我是遇到這個問題了，所以就想嘮叨一下。

我只使用了打開遠程的和下載后打開本地的。其他的官方上npm上有例子。可以去查看。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、讀《奧巴馬回憶錄·我父親的夢想》有感 孫洋洋 生活是不公平的，你要去適應它。有的人逆風而行，也未必會失敗。奧...
    不如遇見閱讀 1,286評論 0贊 0
  • 保存圖片到系統相冊 first, 先要講的是如何將一張圖片保存到系統的相冊, 這里我們就不講保存到自定義的相冊什么...
    zhouyuhan閱讀 3,679評論 4贊 4
  • 落落大方，彬彬有禮，是我對星洲小學學生的印象。是的，一次班隊活動，展現了他們良好的精神風貌，出色的班級凝聚力...
    浙大學習班學霸組閱讀 161評論 0贊 0
  • 今天參加讀寫訓練營的讀書分享會，其實我參與的時候已經遲了，好多小伙伴已經分享過了。我本可以用語音分享，但是因為孩子...
    透明的橙閱讀 131評論 0贊 0
  • 只有復雜的環境，才會造成這般扭曲的人性！ 今天推薦的這部電影，真需要一下子切入正題！ 不是因為綿綿著急，只是對這部...
    Shawn必有人魚線閱讀 317評論 0贊 0