本文原创首发于公众号：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说明
使用示例
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
示例源码
@L_404_0@
组件地址
举手之劳关注我的微信公众号：ReactNative开发圈
