React Native 文档查看组件
时间:2022-06-05
本文章向大家介绍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,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,
},
});
截图
示例源码
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)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- WinXP的MS08-067漏洞利用复现和解决方案
- 实用FRIDA进阶:内存漫游、hook anywhere、抓包
- 聊聊claudb的server command
- BFE.dev前端刷题88 - 在JavaScript中实现负索引
- Springboot 原理
- Qt音视频开发17-海康sdk解码
- pytest文档47-allure报告添加用例失败截图
- [060]监听应用的前后台切换
- 借用 potplayer 播放器,在本地播放 b 站视频也能看弹幕了
- 非Spring项目管理Quartz
- ArrayList并发写出现Null值
- 那些有趣的网站系列(四)
- 纯CSS实现吸附效果
- Hexo-Matery主题性能优化
- 精选MAC应用推荐,让你搬砖效率翻倍!