React Native 文檔查看組件

leone 發布于2019-08-22 11:15 / 3536人閱讀

摘要：文檔查看組件，可以在手機上直接打開文檔，支持遠程和本地文檔。

本文原創首發于公眾號：ReactNative開發圈，轉載需注明出處。

React Native 文檔查看組件：react-native-doc-viewer，可以在手機上直接打開文檔，支持遠程和本地文檔。支持的文檔格式：xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf,mp4。支持iOS和Android。

安裝方法

npm install react-native-doc-viewer --save
react-native link react-native-doc-viewer

API說明

openDoc 打開遠程貨或本地文檔

openDocb64 打開Base64字符串格式文檔

openDocBinaryinUrl 打開二進制文件

playMovie 打開視頻文件

使用示例

import React, { Component } from "react";
import {
    AppRegistry,
    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.MainBundlePath : RNFS.DocumentDirectoryPath;
export default class Component02 extends Component {

    static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.name}`,
    });

    state = { animating: false }
    /*
    * Handle WWW File Method
    * 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.
    */
    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)
                }
            })
        }

    }


    /*
    * Handle Local File Method
    * 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.
    */
    handlePressLocal = () => {
        this.setState({ animating: true });
        if (Platform.OS === "ios") {
            OpenFile.openDoc([{
                url: SavePath + "demo.docx",
                fileNameOptional: "test filename"
            }], (error, url) => {
                if (error) {
                    this.setState({ animating: false });
                } else {
                    this.setState({ animating: false });
                    console.log(url)
                }
            })
        } else {
            OpenFile.openDoc([{
                url: SavePath + "demo.jpg",
                fileName: "sample",
                cache: false,
                fileType: "jpg"
            }], (error, url) => {
                if (error) {
                    this.setState({ animating: false });
                } else {
                    this.setState({ animating: false });
                    console.log(url)
                }
            })

        }

    }

    /*
    * Binary in URL
    * Binary String in Url
    * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions
    */
    handlePressBinaryinUrl = () => {
        this.setState({ animating: true });
        if (Platform.OS === "ios") {
            OpenFile.openDocBinaryinUrl([{
                url: "https://storage.googleapis.com/need-sure/example",
                fileName: "sample",
                fileType: "xml"
            }], (error, url) => {
                if (error) {
                    console.error(error);
                    this.setState({ animating: false });
                } else {
                    console.log(url)
                    this.setState({ animating: false });
                }
            })
        } else {
            OpenFile.openDocBinaryinUrl([{
                url: "https://storage.googleapis.com/need-sure/example",
                fileName: "sample",
                fileType: "xml",
                cache: true
            }], (error, url) => {
                if (error) {
                    console.error(error);
                    this.setState({ animating: false });
                } else {
                    console.log(url)
                    this.setState({ animating: false });
                }
            })
        }
    }
    /*
    * Base64String
    * put only the base64 String without data:application/octet-stream;base64
    * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions
    */
    handlePressb64 = () => {
        this.setState({ animating: true });
        if (Platform.OS === "ios") {
            OpenFile.openDocb64([{
                base64: "",
                fileName: "sample.png",
                fileType: "png"
            }], (error, url) => {
                if (error) {
                    console.error(error);
                    this.setState({ animating: false });
                } else {
                    console.log(url)
                    this.setState({ animating: false });
                }
            })
        } else {
            OpenFile.openDocb64([{
                base64: "",
                fileName: "sample",
                fileType: "png",
                cache: true
            }], (error, url) => {
                if (error) {
                    console.error(error);
                    this.setState({ animating: false });
                } else {
                    console.log(url)
                    this.setState({ animating: false });
                }
            })
        }
    }

    /*
    * mp4 Video
    */
    handlePressVideo(video) {
        this.setState({ animating: true });
        if (Platform.OS === "ios") {
            OpenFile.playMovie(video, (error, url) => {
                if (error) {
                    console.error(error);
                    this.setState({ animating: false });
                } else {
                    console.log(url)
                    this.setState({ animating: false });
                }
            })
        } else {
            this.setState({ animating: false });
            Alert.alert("Coming soon for Android")
        }
    }

    setToggleTimeout() {
        this.setTimeout(() => {
            this.setState({ animating: !this.state.animating });
            this.setToggleTimeout();
        }, 2000);
    }

    render() {
        return (

            
                
                
                    Doc Viewer React Native

Screenshots

示例源碼

GitHub - forrest23/ReactNativeComponents: React Native組件大全

組件地址

GitHub - philipphecht/react-native-doc-viewer: React Native Doc Viewer (Supports file formats: xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf)

舉手之勞關注我的微信公眾號：ReactNative開發圈

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92045.html

ReactNative開發常用的三方模塊

摘要：寫在前面一個好的缺不了好的三方支持，生活在這個活躍的開源社區，尋找合適的三方組件是一個開發者最基本的能力。下面分享幾個我收集的三方模塊，希望對大家有點幫助。寫在前面一個好的App缺不了好的三方支持，生活在ReactNative這個活躍的開源社區，尋找合適的三方組件是一個開發者最基本的能力。不過不積跬步，無以至千里，不積小流，無以成江海。下面分享幾個我收集的三方模塊，希望對大家有點幫...

frolc 2019-08-20 15:27 評論0 收藏0
小哥哥小姐姐看過來，這里有個組件庫需要您簽收一下

摘要：如果你想減少包大小，你可以這樣引入事實上，每個組件都是支持單獨安裝的，我們也推薦你使用這種方式引入組件。以下是運行示例后各界面的截圖組件圖標右上角的圓形徽標數字。 1. 前言一直以來都想做個組件庫，一方面是對工作中常遇問題的總結，另一方面也確實能夠提升工作效率（誰又不想造一個屬于自己的輪子呢~），于是乎就有了本文的主角兒rn-components-kit。市面上web的UI組件庫如...

Alan 2019-08-26 10:47 評論0 收藏0
前端進階（7） - react、vue 組件開發利器：storybook

摘要：組件開發利器對于前端開發來說，組件化技術已經是一門必修課了，這其中又主要以和為主。 react、vue 組件開發利器：storybook 對于前端開發來說，組件化技術已經是一門必修課了，這其中又主要以 react 和 vue 為主。但平時在開發組件，尤其是公共組件或者第三方組件庫的時候，往往會有一些困擾：不能很好的管理多個組件，尤其是在組件預覽的時候，不能一目了然在組件預覽的時候...

miya 2019-08-23 11:56 評論0 收藏0
11個React Native 組件庫和 Javascript 數據可視化庫

摘要：數據可視化庫超過的的可能是最流行和最廣泛的數據可視化庫。是一組組件，用于高效地渲染大型列表和表格數據。一種優雅而靈活的方式，可以利用組件來支持實際的數據可視化。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ React Native 組件庫 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 評論0 收藏0