From 9d73d290f1975753f2923068cf153ee11cd6f712 Mon Sep 17 00:00:00 2001 From: luoeng225 Date: Wed, 29 Nov 2023 16:01:36 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I8GX7M]=20=E6=96=B0=E5=A2=9Eclipboa?= =?UTF-8?q?rd=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + _sidebar.md | 1 + zh-cn/clipboard.md | 224 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 226 insertions(+) create mode 100644 zh-cn/clipboard.md diff --git a/README.md b/README.md index fcd3285c..4a99e11a 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ | 7 | react-native-linear-gradient | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-library/react-native-linear-gradient@3.0.0-alpha.1-0.2.4](https://github.com/react-native-oh-library/react-native-linear-gradient/releases/tag/3.0.0-alpha.1-0.2.4) | [链接](zh-cn/react-native-linear-gradient.md) | | 8 | @react-native-community/progress-bar-android | 1.0.4 | 是 | 90% | [@react-native-community/progress-bar-android@1.0.4-0.0.3](https://github.com/react-native-oh-library/progress-bar-android/releases/tag/1.0.4-0.0.3) | [链接](zh-cn/progress-bar-android.md) | | 9 | react-native-fast-image | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image@8.6.3-0.0.2](https://github.com/react-native-oh-library/react-native-fast-image/releases/tag/8.6.3-0.0.2) | [链接](zh-cn/react-native-fast-image.md) | +| 10 | @react-native-clipboard/clipboard | 1.12.1 | 是 | 80% | [@react-native-clipboard/clipboard@1.12.1-0.0.1](https://github.com/react-native-oh-library/clipboard/releases/tag/1.12.1-0.0.1) | [链接](zh-cn/clipboard.md) | ## 社区 [react-native-oh-library](https://github.com/react-native-oh-library) \ No newline at end of file diff --git a/_sidebar.md b/_sidebar.md index 0e2579e8..386e360f 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -9,4 +9,5 @@ - [@react-native-picker/picker](zh-cn/picker.md) - [@react-native-community/progress-bar-android](zh-cn/progress-bar-android.md) - [react-native-fast-image](zh-cn/react-native-fast-image.md) + - [@react-native-clipboard/clipboard](zh-cn/clipboard.md) diff --git a/zh-cn/clipboard.md b/zh-cn/clipboard.md new file mode 100644 index 00000000..b7f8f88e --- /dev/null +++ b/zh-cn/clipboard.md @@ -0,0 +1,224 @@ +

+

@react-native-clipboard/clipboard

+

+

+ + Supported platforms + + + License + +

+ +## 安装与使用 + +> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 + +在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 + +```json +@react-native-oh-library:registry=https://npm.pkg.github.com +//npm.pkg.github.com/:_authToken=TOKEN +``` + +进入到工程目录并输入以下命令： + +```bash +yarn add @react-native-clipboard/clipboard@npm:@react-native-oh-library/clipboard +``` + +或者 + +```bash +npm install @react-native-clipboard/clipboard@npm:@react-native-oh-library/clipboard +``` + +快速使用： + +```js +import Clipboard from "@react-native-clipboard/clipboard"; + +const [copiedText, setCopiedText] = useState(""); + +const copyToClipboard = () => { + Clipboard.setString("hello world"); +}; + +const fetchCopiedText = async () => { + const text = await Clipboard.getString(); + setCopiedText(text); +}; + + + + Click here to copy to Clipboard + + + View copied text + + + {copiedText} +; +``` + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-clipboard": "file:../../node_modules/@react-native-clipboard/clipboard/harmony/clipboard.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-clipboard": "file:../../node_modules/@react-native-clipboard/clipboard/harmony/clipboard" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 ClipboardPackage + +打开 `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}/rnoh-clipboard/src/main/cpp" ./clipboard) +# 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_clipboard) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "ClipboardPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 Clipboard 组件 + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +import type {RNPackageContext, RNPackage} from 'rnoh/ts'; +import {SamplePackage} from 'rnoh-sample-package/ts'; ++ import {ClipboardPackage} from 'rnoh-clipboard/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new ClipboardPackage(ctx) + ]; +} + +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +| `@react-native-oh-library/clipboard` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | +| -------------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | +| 1.12.1-0.0.1 | `0.72.5` | `0.72.9` | `4.0.3.601` | `OpenHarmony 4.10.11` | + +## 属性 + +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | -------- | +| getString | Get content of string type, this method returns a Promise, so you can use following code to get clipboard content | function | NO | ios,android | yes | +| setString | Set content of string type. You can use following code to set clipboard content | function | NO | ios,android | yes | +| hasString | Returns whether the clipboard has content or is empty. | function | NO | ios,android | yes | +| getImage | Get content of image in base64 string type, this method returns a Promise, so you can use following code to get clipboard content (ANDROID only) | function | NO | android | no | +| getStrings | (iOS only) Get contents of string array type, this method returns a Promise, so you can use following code to get clipboard content | function | NO | ios | yes | +| setStrings | (iOS only) Set content of string array type. You can use following code to set clipboard content | function | NO | ios | yes | +| hasNumber | (iOS 14+ only) Returns whether the clipboard has a Number(UIPasteboardDetectionPatternNumber) content. Can check if there is a Number content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | ios | yes | +| hasImage | Returns whether the clipboard has a Image | function | NO | ios | no | +| hasUrl | (iOS only) Returns whether the clipboard has a URL content. Can check if there is a URL content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | ios | no | +| hasWebUrl | (iOS 14+ only) Returns whether the clipboard has a WebURL(UIPasteboardDetectionPatternProbableWebURL) content. Can check if there is a WebURL content in clipboard without triggering PasteBoard notification for iOS 14+ | function | NO | ios | yes | +| setImage | Set content of Image type.（base64 string） | function | NO | ios | no | +| getImageJPG | get base64 string of JPG Image | function | NO | ios | no | +| getImagePNG | get base64 string of PNG Image | function | NO | ios | no | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/clipboard/blob/harmony/LICENSE) ，请自由地享受和参与开源。 -- Gitee