当前位置：首页 > news >正文

一款基于 ReactNative 最新发布的`Android/iOS` 新架构文档预览开源库

news 2025/8/4 12:29:53

这是一款基于 ReactNative 发布的`Android/iOS` 新架构文档预览开源库三端统一使用点击这里

版本：latest

`rn-newarch-doc-viewer`

[!TIP] Github 地址

安装与使用

[!TIP] 注意 ⚠️ 本库 android/ios 仅给予 Fabric 新架构支持，旧架构不在跟进，若需旧架构支持请移步原作者https://github.com/philipphecht/react-native-doc-viewer

确保你的 Android/iOS 已经开启了新架构支持 https://reactnative.cn/docs/0.72/the-new-architecture/use-app-template

npm

npm install rn-newarch-doc-viewer

yarn

yarn add rn-newarch-doc-viewer

若想更改库的别名 react-native-doc-viewer 来导入。你则需要把 rn-newarch-doc-viewer 库修改下，重新 yarn 执行

+  "dependencies": {"@react-native-oh/react-native-harmony": "0.72.48","patch-package": "^8.0.0","postinstall-postinstall": "^2.1.0","react": "18.2.0","react-native": "0.72.5",
-    "rn-newarch-doc-viewer":"^0.0.17"
+   "react-native-doc-viewer":"npm:rn-newarch-doc-viewer@0.0.17","react-native-ohos-docviewer": "^0.0.3"},

ios 需要

 cd iosbundle install && bundle exec pod install

下面的代码展示了这个库的基本使用场景：

import React, { useEffect } from "react";
import {Button,DeviceEventEmitter,SafeAreaView,StatusBar,StyleSheet,
} from "react-native";
import OpenFile from "react-native-doc-viewer";
import { getBase64ImagePath } from "./imgbase64";
const App = () => {useEffect(() => {//监听文件预览下载进度const subscribtion = DeviceEventEmitter.addListener("RNDownloaderProgress", (event) => {// 添加事件处理console.log("Download progress:", event.progress);});return () => {// 清理事件监听器subscribtion&& subscribtion.remove();};}, []);const previewImage = () => {OpenFile.openDoc([{url: "https://i.gsxcdn.com/2015162519_i828z3ug.jpeg",//ios required fileNamefileName:'sample',//android required cachecache:false},],(error: any, url: string) => {if (error) {} else {console.log(url);}});};const previewWord = () => {OpenFile.openDoc([{url: "https://calibre-ebook.com/downloads/demos/demo.docx",//ios required fileNamefileName:'demo',//android required cachecache:false},],(error: any, url: string) => {if (error) {} else {console.log(url);}});};const previewBase64 = () => {OpenFile.openDocb64([{base64: getBase64ImagePath(),fileName: "example",fileType: "jpg",},],(error: any, url: string) => {if (error) {} else {console.log(url);}});};const previewXML = () => {OpenFile.openDocBinaryinUrl([{url: "https://storage.googleapis.com/need-sure/example",//ios required fileNamefileName:'example',//android required cachecache:falsefileType: "xml",},],(error: any, url: string) => {if (error) {console.log("Error opening XML file:", error);} else {console.log(url);}});};return (<SafeAreaView style={styles.container}><StatusBar barStyle={"dark-content"} /><Button onPress={previewImage} title="预览图片" /><Button onPress={previewWord} title="预览word文档" /><Button onPress={previewBase64} title="base64打开预览" /><Button onPress={previewXML} title="预览XML" /></SafeAreaView>);
};
export default App;
const styles = StyleSheet.create({container: {flex: 1,},
});