diff --git a/zh-cn/react-native-doc-viewer.md b/zh-cn/react-native-doc-viewer.md new file mode 100644 index 0000000000000000000000000000000000000000..46d834289a8b834092244a0035284ac2b4ee063a --- /dev/null +++ b/zh-cn/react-native-doc-viewer.md @@ -0,0 +1,437 @@ + +> 模板版本:v0.2.2 + +

+

react-native-doc-viewer

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-doc-viewer) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-doc-viewer Releases](https://github.com/react-native-oh-library/react-native-doc-viewer/releases),并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令: + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-doc-viewer@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-doc-viewer@file:# +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { Component } from 'react'; +import { + AppRegistry, + StyleSheet, + Text, + View, + Platform, + Button, + Alert, + ActivityIndicator, + NativeAppEventEmitter, + DeviceEventEmitter, + NativeModules, + NativeEventEmitter, + TouchableHighlight +} 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 DocumentViewerExample extends Component { + constructor(props) { + super(props); + this.state = { + animating: false, + progress: "", + donebuttonclicked: false, + } + this.eventEmitter = new NativeEventEmitter(NativeModules.RNReactNativeDocViewer); + this.eventEmitter.addListener('DoneButtonEvent', (data) => { + /* + *Done Button Clicked + * return true + */ + console.log(data.close); + this.setState({donebuttonclicked: data.close}); + }) + this.didPressToObjcButton = this.didPressToObjcButton.bind(this); + } + + componentDidMount(){ + // download progress + this.eventEmitter.addListener( + 'RNDownloaderProgress', + (Event) => { + console.log("Progress - Download "+Event.progress + " %") + this.setState({progress: Event.progress + " %"}); + } + + ); + } + + componentWillUnmount (){ + this.eventEmitter.removeListener(); + } + /* + * 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{ + 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+"/react-native-logo.jpg", + 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) + } + }) + + } + } + + handlePressLocalXLS = () => { + this.setState({animating: true}); + if(Platform.OS === 'ios'){ + OpenFile.openDoc([{url:SavePath+"/SampleXLSFile_19kb.xls", + fileNameOptional:"Sample XLS 94-2003" + }], (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 = () => { + if(Platform.OS === 'ios'){ + OpenFile.openDocb64([{ + base64:"{BASE64String}" + fileName:"sample", + fileType:"png" + }], (error, url) => { + if (error) { + console.error(error); + } else { + console.log(url) + } + }) + }else{ + OpenFile.openDocb64([{ + base64:"{BASE64String}" + fileName:"sample", + fileType:"png", + cache:true + }], (error, url) => { + if (error) { + console.error(error); + } else { + console.log(url) + } + }) + } + + /* + * Video File + */ + handlePressVideo = () => { + if(Platform.OS === 'ios'){ + OpenFile.playMovie(video, (error, url) => { + if (error) { + console.error(error); + } else { + console.log(url) + } + }) + }else{ + Alert.alert("Android coming soon"); + } + } + + +