From f518c6fc00033da3114322382f865632bd427610 Mon Sep 17 00:00:00 2001 From: xlleng1 Date: Wed, 21 Feb 2024 15:11:46 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I92MUP]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-pdf=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-pdf.md | 298 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 298 insertions(+) create mode 100644 1224/react-native-pdf.md diff --git a/1224/react-native-pdf.md b/1224/react-native-pdf.md new file mode 100644 index 00000000..8be79da8 --- /dev/null +++ b/1224/react-native-pdf.md @@ -0,0 +1,298 @@ +> 模板版本：v0.1.2 + +

+

@react-native-oh-tpl/react-native-pdf

+

+

+ + Supported platforms + + + License + +

+ + +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-pdf) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-pdf +``` + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-pdf +``` + +下面的代码展示了这个库的基本使用场景： + +```js +import React from 'react'; +import { View, StyleSheet } from 'react-native'; +import Pdf from 'react-native-pdf'; + +export function PdfExample() { + // const source = { uri: 'https://www-file.huawei.com/minisite/media/annual_report/annual_report_2022_cn.pdf', cache: true }; + const source = require('../assets/test.pdf'); + + return ( + + { + console.log(`Number of pages: ${numberOfPages}`); + }} + onPageChanged={(page, numberOfPages) => { + console.log(`Current page: ${page}`); + }} + onError={(error) => { + console.log(error); + }} + onPressLink={(uri) => { + console.log(`Link pressed: ${uri}`); + }} + /> + + ); +} + +const styles = StyleSheet.create({ + sectionContainer: { + marginTop: 32, + paddingHorizontal: 24, + } +}); +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "pdf-view": "file:../../node_modules/react-native-pdf/harmony/pdfview.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "pdf-view": "file:../../node_modules/react-native-pdf/harmony/pdfview" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 PdfViewPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULE_DIR}/pdf-view/src/main/cpp" ./pdfview) +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: link_packages +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_pdf_view) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "PdfViewPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 RTNPdfView组件 + +找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： + +```diff +... ++ import { RTNPdfView, PDF_VIEW_TYPE } from 'pdf-view'; + + @Builder + function buildCustomComponent(ctx: ComponentBuilderContext) { + if (ctx.componentName === SAMPLE_VIEW_TYPE) { + SampleView({ + ctx: ctx.rnComponentContext, + tag: ctx.tag, + buildCustomComponent: buildCustomComponent + }) + } ++ else if (ctx.componentName === PDF_VIEW_TYPE) { ++ RTNPdfView({ ++ ctx: ctx.rnComponentContext, ++ tag: ctx.tag, ++ buildCustomComponent: buildCustomComponent ++ }) ++ } + ... + } + ... + +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-pdf Releases](https://github.com/react-native-oh-library/react-native-pdf/releases) + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| source | PDF source like {uri:xxx, cache:false}. see the following for detail. | object | YES | ios,android | yes | +| page | initial page index | number | NO | ios,android | no | +| scale | should minScale<=scale<=maxScale | number | NO | ios,android | no | +| minScale | min scale | number | NO | ios,android | no | +| maxScale | max scale | number | NO | ios,android | no | +| horizontal | draw page direction, if you want to listen the orientation change, you can use [[react-native-orientation-locker\]](https://github.com/wonday/react-native-orientation-locker) | bool | NO | ios,android | no | +| showsHorizontalScrollIndicator | shows or hides the horizontal scroll bar indicator on iOS | bool | NO | ios | no | +| showsVerticalScrollIndicator | shows or hides the vertical scroll bar indicator on iOS | bool | NO | ios | no | +| fitWidth | if true fit the width of view, can not use fitWidth=true together with scale | bool | NO | ios,android | no | +| fitPolicy | 0:fit width, 1:fit height, 2:fit both(default) | number | NO | ios,android | no | +| spacing | the breaker size between pages | number | NO | ios,android | no | +| password | pdf password, if password error, will call OnError() with message "Password required or incorrect password." | string | NO | ios,android | no | +| style | support normal view style, you can use this to set border/spacing color... | object | NO | ios,android | yes | +| renderActivityIndicator | when loading show it as an indicator, you can use your component | (progress) => Component | NO | ios,android | no | +| enableAntialiasing | improve rendering a little bit on low-res screens, but maybe course some problem on Android 4.4, so add a switch | bool | NO | ios,android | no | +| enablePaging | only show one page in screen | bool | NO | ios,android | no | +| enableRTL | scroll page as "page3, page2, page1" | bool | NO | ios,android | no | +| enableAnnotationRendering | enable rendering annotation, notice:iOS only support initial setting,not support realtime changing | bool | NO | ios | no | +| enableDoubleTapZoom | Enable double tap to zoom gesture | bool | NO | ios,android | no | +| trustAllCerts | Allow connections to servers with self-signed certification | bool | NO | ios,android | no | +| singlePage | Only show first page, useful for thumbnail views | bool | NO | ios,android | no | +| onLoadProgress | callback when loading, return loading progress (0-1) | function(percent) | NO | ios,android | no | +| onLoadComplete | callback when pdf load completed, return total page count, pdf local/cache path, {width,height} and table of contents | function(numberOfPages, path, {width, height}, tableContents) | NO | ios,android | no | +| onPageChanged | callback when page changed ,return current page and total page count | function(page,numberOfPages) | NO | ios,android | no | +| onError | callback when error happened | function(error) | NO | ios,android | no | +| onPageSingleTap | callback when page was single tapped | function(page) | NO | ios,android | no | +| onScaleChanged | callback when scale page | function(scale) | NO | ios,android | no | +| onPressLink | callback when link tapped | function(uri) | NO | ios,android | no | + +#### parameters of source + +| parameter | Description | Platform | HarmonyOS Support | +| ------------- | --------------------------------------------- | ----------- | ----------------- | +| uri | pdf source, see the forllowing for detail. | ios,android | yes | +| cache | use cache or not | ios,android | no | +| cacheFileName | specific file name for cached pdf file | ios,android | no | +| expiration | cache file expired seconds (0 is not expired) | ios,android | no | +| method | request method when uri is a url | ios,android | no | +| headers | request headers when uri is a url | ios,android | no | + +#### types of source.uri + +| Usage | Description | Platform | HarmonyOS Support | +| ------------------------------------------------------------ | ------------------------------------------------------------ | ----------- | ----------------- | +| {uri:"http://xxx/xxx.pdf"} | load pdf from a url | ios,android | yes | +| {require("./test.pdf")} | load pdf relate to js file (do not need add by xcode) | ios | yes | +| {uri:"bundle-assets://path/to/xxx.pdf"} | load pdf from assets, the file should be at android/app/src/main/assets/path/to/xxx.pdf | android | no | +| {uri:"bundle-assets://xxx.pdf"} | load pdf from assets, you must add pdf to project by xcode. this does not support folder. | ios | no | +| {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | load pdf from base64 string | ios,android | no | +| {uri:"file:///absolute/path/to/xxx.pdf"} | load pdf from local file system | ios,android | no | +| {uri:"ms-appx:///xxx.pdf"}} | load pdf bundled with UWP app | windows | no | +| {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | load pdf from content URI | ios | no | +| {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | load pdf from blob URL | android | no | + +## 方法 + +| Name | Description | Platform | HarmonyOS Support | +| ------- | ------------------------------------------------------------ | ----------- | ----------------- | +| setPage | Set the current page of the PDF component. pageNumber is a positive integer. If pageNumber > numberOfPages, current page is not changed. | ios,android | no | + + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-pdf/blob/sig/LICENSE) ，请自由地享受和参与开源。 -- Gitee From bbb7fbf7b7f611edc3108cc28e947d67643b854f Mon Sep 17 00:00:00 2001 From: xlleng1 Date: Thu, 22 Feb 2024 10:15:42 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I92MUP]=20react-native-pdf?= =?UTF-8?q?=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3=E6=8C=89=E7=85=A7=E6=96=B0?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-pdf.md | 37 +++++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/1224/react-native-pdf.md b/1224/react-native-pdf.md index 8be79da8..18119519 100644 --- a/1224/react-native-pdf.md +++ b/1224/react-native-pdf.md @@ -1,40 +1,45 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

-

@react-native-oh-tpl/react-native-pdf

+

react-native-pdf

- - Supported platforms + + Supported platforms - + License

- -> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-pdf) +> [!tip] [Github 地址](https://github.com/wonday/react-native-pdf) ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-pdf Releases](https://github.com/react-native-oh-library/react-native-pdf/releases)，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： -#### **yarn** +#### **npm** ```bash -yarn add @react-native-oh-tpl/react-native-pdf +npm install @react-native-oh-tpl/react-native-pdf@file:# ``` -#### **npm** +#### **yarn** ```bash -npm install @react-native-oh-tpl/react-native-pdf +yarn add @react-native-oh-tpl/react-native-pdf@file:# ``` + + 下面的代码展示了这个库的基本使用场景： +>[!WARNING] 使用时 import 的库名不变。 + ```js import React from 'react'; import { View, StyleSheet } from 'react-native'; @@ -87,6 +92,9 @@ const styles = StyleSheet.create({ 2. 直接链接源码。 方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json @@ -106,6 +114,9 @@ ohpm install ``` 方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + 打开 `entry/oh-package.json5`，添加以下依赖 ```json @@ -213,7 +224,9 @@ ohpm install 然后编译、运行即可。 -## 兼容性 +## 约束与限制 + +### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -- Gitee