资讯专栏INFORMATION COLUMN

React Native 文档查看组件

leone / 3621人阅读

摘要:文档查看组件,可以在手机上直接打开文档,支持远程和本地文档。

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

</>复制代码

  1. React Native 文档查看组件:react-native-doc-viewer,可以在手机上直接打开文档,支持远程和本地文档。支持的文档格式:xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf,mp4。支持iOS和Android。

安装方法

</>复制代码

  1. npm install react-native-doc-viewer --save
  2. react-native link react-native-doc-viewer
API说明

openDoc 打开远程货或本地文档

openDocb64 打开Base64字符串格式文档

openDocBinaryinUrl 打开二进制文件

playMovie 打开视频文件

使用示例

</>复制代码

  1. import React, { Component } from "react";
  2. import {
  3. AppRegistry,
  4. StyleSheet,
  5. Text,
  6. View,
  7. Platform,
  8. Button,
  9. Alert,
  10. ActivityIndicator
  11. } from "react-native";
  12. import OpenFile from "react-native-doc-viewer";
  13. var RNFS = require("react-native-fs");
  14. var SavePath = Platform.OS === "ios" ? RNFS.MainBundlePath : RNFS.DocumentDirectoryPath;
  15. export default class Component02 extends Component {
  16. static navigationOptions = ({ navigation }) => ({
  17. title: `${navigation.state.params.name}`,
  18. });
  19. state = { animating: false }
  20. /*
  21. * Handle WWW File Method
  22. * 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.
  23. */
  24. handlePress = () => {
  25. this.setState({ animating: true });
  26. if (Platform.OS === "ios") {
  27. OpenFile.openDoc([{
  28. url: "https://calibre-ebook.com/downloads/demos/demo.docx",
  29. fileNameOptional: "test filename"
  30. }], (error, url) => {
  31. if (error) {
  32. this.setState({ animating: false });
  33. } else {
  34. this.setState({ animating: false });
  35. console.log(url)
  36. }
  37. })
  38. } else {
  39. //Android
  40. this.setState({ animating: true });
  41. OpenFile.openDoc([{
  42. url: "https://www.huf-haus.com/fileadmin/Bilder/Header/ART_3/Header_HUF_Haus_ART_3___1_.jpg", // Local "file://" + filepath
  43. fileName: "sample",
  44. cache: false,
  45. fileType: "jpg"
  46. }], (error, url) => {
  47. if (error) {
  48. this.setState({ animating: false });
  49. console.error(error);
  50. } else {
  51. this.setState({ animating: false });
  52. console.log(url)
  53. }
  54. })
  55. }
  56. }
  57. /*
  58. * Handle Local File Method
  59. * 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.
  60. */
  61. handlePressLocal = () => {
  62. this.setState({ animating: true });
  63. if (Platform.OS === "ios") {
  64. OpenFile.openDoc([{
  65. url: SavePath + "demo.docx",
  66. fileNameOptional: "test filename"
  67. }], (error, url) => {
  68. if (error) {
  69. this.setState({ animating: false });
  70. } else {
  71. this.setState({ animating: false });
  72. console.log(url)
  73. }
  74. })
  75. } else {
  76. OpenFile.openDoc([{
  77. url: SavePath + "demo.jpg",
  78. fileName: "sample",
  79. cache: false,
  80. fileType: "jpg"
  81. }], (error, url) => {
  82. if (error) {
  83. this.setState({ animating: false });
  84. } else {
  85. this.setState({ animating: false });
  86. console.log(url)
  87. }
  88. })
  89. }
  90. }
  91. /*
  92. * Binary in URL
  93. * Binary String in Url
  94. * 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
  95. */
  96. handlePressBinaryinUrl = () => {
  97. this.setState({ animating: true });
  98. if (Platform.OS === "ios") {
  99. OpenFile.openDocBinaryinUrl([{
  100. url: "https://storage.googleapis.com/need-sure/example",
  101. fileName: "sample",
  102. fileType: "xml"
  103. }], (error, url) => {
  104. if (error) {
  105. console.error(error);
  106. this.setState({ animating: false });
  107. } else {
  108. console.log(url)
  109. this.setState({ animating: false });
  110. }
  111. })
  112. } else {
  113. OpenFile.openDocBinaryinUrl([{
  114. url: "https://storage.googleapis.com/need-sure/example",
  115. fileName: "sample",
  116. fileType: "xml",
  117. cache: true
  118. }], (error, url) => {
  119. if (error) {
  120. console.error(error);
  121. this.setState({ animating: false });
  122. } else {
  123. console.log(url)
  124. this.setState({ animating: false });
  125. }
  126. })
  127. }
  128. }
  129. /*
  130. * Base64String
  131. * put only the base64 String without data:application/octet-stream;base64
  132. * 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
  133. */
  134. handlePressb64 = () => {
  135. this.setState({ animating: true });
  136. if (Platform.OS === "ios") {
  137. OpenFile.openDocb64([{
  138. base64: "",
  139. fileName: "sample.png",
  140. fileType: "png"
  141. }], (error, url) => {
  142. if (error) {
  143. console.error(error);
  144. this.setState({ animating: false });
  145. } else {
  146. console.log(url)
  147. this.setState({ animating: false });
  148. }
  149. })
  150. } else {
  151. OpenFile.openDocb64([{
  152. base64: "",
  153. fileName: "sample",
  154. fileType: "png",
  155. cache: true
  156. }], (error, url) => {
  157. if (error) {
  158. console.error(error);
  159. this.setState({ animating: false });
  160. } else {
  161. console.log(url)
  162. this.setState({ animating: false });
  163. }
  164. })
  165. }
  166. }
  167. /*
  168. * mp4 Video
  169. */
  170. handlePressVideo(video) {
  171. this.setState({ animating: true });
  172. if (Platform.OS === "ios") {
  173. OpenFile.playMovie(video, (error, url) => {
  174. if (error) {
  175. console.error(error);
  176. this.setState({ animating: false });
  177. } else {
  178. console.log(url)
  179. this.setState({ animating: false });
  180. }
  181. })
  182. } else {
  183. this.setState({ animating: false });
  184. Alert.alert("Coming soon for Android")
  185. }
  186. }
  187. setToggleTimeout() {
  188. this.setTimeout(() => {
  189. this.setState({ animating: !this.state.animating });
  190. this.setToggleTimeout();
  191. }, 2000);
  192. }
  193. render() {
  194. return (
  195. Doc Viewer React Native
  196. title="打开视频"
  197. accessibilityLabel="See a Document"
  198. />
  199. );
  200. }
  201. }
  202. const styles = StyleSheet.create({
  203. container: {
  204. flex: 1,
  205. justifyContent: "center",
  206. alignItems: "center",
  207. backgroundColor: "#F5FCFF",
  208. },
  209. welcome: {
  210. fontSize: 20,
  211. textAlign: "center",
  212. margin: 10,
  213. },
  214. instructions: {
  215. textAlign: "center",
  216. color: "#333333",
  217. marginBottom: 5,
  218. },
  219. });
Screenshots

示例源码

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

组件地址

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92045.html

相关文章

  • ReactNative开发常用的三方模块

    摘要:写在前面一个好的缺不了好的三方支持,生活在这个活跃的开源社区,寻找合适的三方组件是一个开发者最基本的能力。下面分享几个我收集的三方模块,希望对大家有点帮助。 写在前面 一个好的App缺不了好的三方支持,生活在ReactNative这个活跃的开源社区,寻找合适的三方组件是一个开发者最基本的能力。不过不积跬步,无以至千里,不积小流,无以成江海。下面分享几个我收集的三方模块,希望对大家有点帮...

    frolc 评论0 收藏0
  • 小哥哥小姐姐看过来,这里有个组件库需要您签收一下

    摘要:如果你想减少包大小,你可以这样引入事实上,每个组件都是支持单独安装的,我们也推荐你使用这种方式引入组件。以下是运行示例后各界面的截图组件图标右上角的圆形徽标数字。 1. 前言 一直以来都想做个组件库,一方面是对工作中常遇问题的总结,另一方面也确实能够提升工作效率(谁又不想造一个属于自己的轮子呢~),于是乎就有了本文的主角儿rn-components-kit。 市面上web的UI组件库如...

    Alan 评论0 收藏0
  • 前端进阶(7) - react、vue 组件开发利器:storybook

    摘要:组件开发利器对于前端开发来说,组件化技术已经是一门必修课了,这其中又主要以和为主。 react、vue 组件开发利器:storybook 对于前端开发来说,组件化技术已经是一门必修课了,这其中又主要以 react 和 vue 为主。但平时在开发组件,尤其是公共组件或者第三方组件库的时候,往往会有一些困扰: 不能很好的管理多个组件,尤其是在组件预览的时候,不能一目了然 在组件预览的时候...

    miya 评论0 收藏0
  • 11个React Native 组件库和 Javascript 数据可视化库

    摘要:数据可视化库超过的的可能是最流行和最广泛的数据可视化库。是一组组件,用于高效地渲染大型列表和表格数据。一种优雅而灵活的方式,可以利用组件来支持实际的数据可视化。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! React Native 组件库 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

    tangr206 评论0 收藏0

发表评论

0条评论

leone

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<