本项目基于 react-native-pdf-renderer开发。如果在使用过程中有任何问题，欢迎在AtomGit提交Issue，会及时跟进。

项目介绍

@hxa-rn/react-native-pdf-renderer 是 react-native-pdf-renderer 的鸿蒙（OpenHarmony）适配版本，当前规范版本号为 2.3.0-beta.1。

本库提供 PdfRendererView Fabric 组件，基于 PDF Kit 实现本地 PDF 渲染，支持连续滚动、单页模式、缩放与翻页事件。

| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | | ------------ | ---------- | ------------ | -------- | | 2.3.0-beta.1 | 2.3.0 | 0.72+ | 是 |

集成指南

npm install @hxa-rn/react-native-pdf-renderer

本模块支持 Autolink。import 时使用原库名 'react-native-pdf-renderer'（harmony.alias）。

peerDependencies：react-native（>=0.72）。

需在 Index.ets 注册 RNPdfRendererView 到 arkTsComponentNames，并在 buildCustomRNComponent 中挂载组件（Example 已预置）。

HAR 依赖路径：harmony/pdf_renderer.har，example 的 oh-package.json5 通过 file:../../node_modules/@hxa-rn/react-native-pdf-renderer/harmony/pdf_renderer.har 引用。

使用说明

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PdfRendererView from 'react-native-pdf-renderer';

function App() {
  const [page, setPage] = useState(0);
  const [total, setTotal] = useState(0);

  return (
    <View style={styles.container}>
      <PdfRendererView
        style={styles.pdf}
        source="/data/storage/el2/base/haps/entry/files/sample.pdf"
        singlePage={false}
        maxZoom={5}
        distanceBetweenPages={16}
        onPageChange={(current, totalPages) => {
          setPage(current);
          setTotal(totalPages);
        }}
        onError={() => console.warn('Error loading PDF')}
      />
      <Text style={styles.pageInfo}>{page + 1} / {total}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  pdf: { flex: 1 },
  pageInfo: { position: 'absolute', bottom: 16, alignSelf: 'center' },
});

• source 为本地 PDF 路径（file:// 或裸绝对路径）；在线 PDF 需先下载到本地。
• source 为空时不渲染，不触发 onError。
• 加载失败（文件不存在、损坏、无页面）触发 onError。
• borderRadius 样式不支持，需在外部 View 设置圆角。

接口文档

Props

| API | 描述 | 参数 | 默认值 | HarmonyOS 支持 | |-----|------|------|--------|----------------| | source | PDF 文件本地路径 | string \| undefined | undefined | ✅ | | singlePage | 仅渲染第一页并禁用滚动 | boolean | false | ✅ | | maxZoom | 最大缩放比例，范围 [1, maxZoom] | number | 5 | ✅ | | distanceBetweenPages | 相邻页面垂直间距（DPI） | number | 16 | ✅ | | maxPageResolution | 放大时位图分辨率上限 | number | 2048 | ✅ | | style | 容器样式；borderRadius 不支持 | StyleProp<ViewStyle> | flex:1 | ✅ | | testID | 测试标识 | string | undefined | ✅ |

Events

| API | 描述 | 参数 | HarmonyOS 支持 | |-----|------|------|----------------| | onPageChange | 滚动翻页回调（position 从 0 开始） | (page, totalPages) => void | ✅ | | onError | 加载/解析失败回调 | () => void | ✅ |

本库为 Fabric 组件（无 TurboModule 方法）。maxPageResolution 按 Android 语义实现位图分辨率封顶。

快速验证（运行 Example）

前置条件

| 依赖 | 版本要求 | |------|----------| | Node.js | >= 18 | | DevEco Studio | 5.0+ | | HarmonyOS SDK | API 13+ |

运行步骤

1. 克隆仓库

git clone https://gitcode.com/hxa-rn/react-native-pdf-renderer.git
cd react-native-pdf-renderer
git checkout br_rnoh0.72

2. 安装仓库开发依赖

npm install --legacy-peer-deps

Example 已改为从 npm 公仓安装 @hxa-rn/[email protected]，不再使用本地 file:../xxx.tgz，运行 Example 不必再执行 npm pack。

3. 进入 example 目录，安装依赖

cd example          # 或 example_auto
npm install --legacy-peer-deps

4. 生成 JS Bundle

npm run dev

产物：harmony/entry/src/main/resources/rawfile/bundle.harmony.js

5. 用 DevEco Studio 打开鸿蒙工程

• 打开 DevEco Studio
• 选择 example/harmony（或 example_auto/harmony）目录
• 等待 Sync 完成

6. 编译并运行 HAP

在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。

注意：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。

约束与限制

兼容性

• 鸿蒙 SDK：API 13+
• 上游 RN SDK：0.72+
• React Native / RNOH：0.72+
• DevEco Studio：5.0+

权限

• 无额外系统权限

已知限制

• PDF Kit 仅在中国境内（港澳台除外）提供。
• 缩放态滚动速度衰减与 Android 存在差异，鸿蒙降级为缩放态禁用滚动、拖拽手势接管。
• 鸿蒙用 PDF Kit 逐页转位图，非 iOS 矢量渲染。
• onPageChange 取首个可见页近似，与 Android 最后完整可见页语义存在差异。

开源license

本项目基于 MIT 协议，详见 LICENSE 文件。

问题反馈渠道

使用问题请在 AtomGit 提交 Issue。也可在 GitCode 仓库反馈：

https://gitcode.com/hxa-rn/react-native-pdf-renderer

https://gitcode.com/hxa-rn/react-native-pdf-renderer/issues