React Native 文档查看组件

本文原创首发于公众号：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,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"
            }],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,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",url) => {
                if (error) {
                    this.setState({ animating: false });
                } else {
                    this.setState({ animating: false });
                    console.log(url)
                }
            })
        } else {
            OpenFile.openDoc([{
                url: SavePath + "demo.jpg",fileName: "sample",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,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",fileType: "xml"
            }],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",fileType: "xml",cache: true
            }],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,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"
            }],url) => {
                if (error) {
                    console.error(error);
                    this.setState({ animating: false });
                } else {
                    console.log(url)
                    this.setState({ animating: false });
                }
            })
        } else {
            OpenFile.openDocb64([{
                base64: "",fileType: "png",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,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 (

            <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"
                />
                <Button
                    onPress={this.handlePressBinaryinUrl.bind(this)}
                    title="打开远程二进制文档"
                    accessibilityLabel="See a Document"
                />
                <Button
                    onPress={this.handlePressb64.bind(this)}
                    title="打开Base64字符串"
                    accessibilityLabel="See a Document"
                />
                <Button
                    onPress={() => this.handlePressVideo("http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4")}
                    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,});

Screenshots

示例源码

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

组件地址

GitHub - philipphecht/react-native-doc-viewer: React Native Doc Viewer (Supports file formats: xls,pdf)

举手之劳关注我的微信公众号：ReactNative开发圈

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!