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

[/code]

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 (

<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,

},

});

[/code]

截图

示例源码

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

微信不让跳转外链，可以点击查看原文来查看外链GitHub内容。

组件地址

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

转载http://mp.weixin.qq.com/s/K2AGelC_jOHeCkIDQa0gqw