From aa496b3ac6a91e1a80883f5a7155892b3fc4258a Mon Sep 17 00:00:00 2001 From: wangyizhou Date: Fri, 12 Jul 2024 15:56:25 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:IA8JXA]=20=E6=96=B0=E5=A2=9Erea?= =?UTF-8?q?ct-native-share=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 --- zh-cn/react-native-share.md | 207 ++++++++++++++++++++++++++++++++++++ 1 file changed, 207 insertions(+) create mode 100644 zh-cn/react-native-share.md diff --git a/zh-cn/react-native-share.md b/zh-cn/react-native-share.md new file mode 100644 index 00000000..750040d8 --- /dev/null +++ b/zh-cn/react-native-share.md @@ -0,0 +1,207 @@ + + + +> 模板版本：v0.2.2 + +

+

react-native-share

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-share) + + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-share Releases](https://github.com/react-native-oh-library/react-native-share/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-share@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-share@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js + +import RNShare from "react-native-share"; + + RNShare.open({ + url：'https://developer.huawei.com/consumer/cn/' + }).then((res) => { + + }).catch((err) => { + + }) + + RNShare.shareSingle({ + social：'testshare',//testshare为测试包名，需要分享的三方APP名，通过getConstants接口可以拿到所有可以分享的三方APP名称 + title：'分享标题', + subject：'分享摘要', + url：'https://developer.huawei.com/consumer/cn/' + }).then((res) => { + + }).catch((err) => { + + }) +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 在工程根目录的 `oh-package.json` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-share": "file:../../node_modules/@react-native-oh-tpl/react-native-share/harmony/react—_native_share.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 在 ArkTs 侧引入 RNSharePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... ++ import {RNSharePackage} from '@react-native-oh-tpl/react-native-share/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNSharePackage(ctx) + ]; +} +``` +打开 `entry/src/main/module.json5`，在module中添加：querySchemes字段，表示允许当前应用进行跳转查询的URI schemes，只允许entry类型模块配置，最多50个。例如如需要查询是否可以跳转微博，可以添加"querySchemes": [ + "sinaweibo" + ] + +```diff + + "querySchemes": [ + "test" //三方APP的所支持的scheme，test是测试hap的scheme + ] + +``` +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + + +### 兼容性 + + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-share Releases](https://github.com/react-native-oh-library/react-native-share/releases) + + +本文档内容基于以下版本验证通过： + + RNOH: 0.72.27; SDK: HarmonyOS NEXT(api12) 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 205.0.0.25; + + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| getConstants(): ()=> Object | 支持分享的三方APP名称 | fuction | yes | iOS,Android | yes | +| open: (options: Object) => Promise<{ success: boolean; message: string }> | 系统分享 | fuction | yes | iOS,Android | yes | +| shareSingle: (options: Object) => Promise<{ success: boolean; message: string }> | 三方分APP分享 | fuction | yes | iOS,Android | no | +| isPackageInstalled: (packagename: string) => Promise | 三方APP是否已在本机安装 | fuction | yes | iOS,Android | no | +| isBase64File: (url: string) => Promise | 分享的URL是否是base64编码格式 | fuction | yes | iOS,Android | yes | + +## 遗留问题 + +- [ 分享三方APP 问题]: react-native-share 原生三方库分享到国外主流三方APP（facebook，pagesmanager，twitter，whatsapp，whatsappbusiness，instagram，googleplus，pinterest，linkedin，telegram，snapchat，messenger，viber，discord，Sms，Email）功能在harmonyOS上暂时无法实现，需要三方APP技术支持可行再实现 + + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-share/react-native-share/blob/main/LICENSE) ，请自由地享受和参与开源。 + + -- Gitee