From 095e680ba9872056fc09eeec498b55b4b8250dbb Mon Sep 17 00:00:00 2001 From: Louis-C7 <972339262@qq.com> Date: Thu, 30 Nov 2023 18:50:09 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I8KR8J]=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=89=80=E6=9C=89=E5=B7=B2=E6=9C=89=E5=BA=93=E5=88=B0=E6=A8=A1?= =?UTF-8?q?=E6=9D=BFv0.0.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/README.md | 22 +++-- zh-cn/async-storage.md | 18 ++-- zh-cn/clipboard.md | 22 +++-- zh-cn/picker.md | 22 +++-- zh-cn/progress-bar-android.md | 16 ++-- zh-cn/react-native-SmartRefreshLayout.md | 16 ++-- zh-cn/react-native-checkbox.md | 105 ++++++++++++----------- zh-cn/react-native-fast-image.md | 39 ++++++--- zh-cn/react-native-linear-gradient.md | 85 +++++++++++------- zh-cn/react-native-masked-view.md | 88 +++++++++---------- zh-cn/react-native-slider.md | 14 ++- 11 files changed, 266 insertions(+), 181 deletions(-) diff --git a/zh-cn/README.md b/zh-cn/README.md index 3384dea4..6bdb0094 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -8,12 +8,22 @@ ## RNOH 三方库总览 -| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | 已发布的最新版本 | 文档链接 -| :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | -| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage@1.19.5-0.0.3](https://github.com/react-native-oh-library/async-storage/releases/tag/1.19.5-0.0.3) | [链接](zh-cn/async-storage.md) | -| 2 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) | -| 3 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox@0.5.16-0.0.1](https://github.com/react-native-oh-library/react-native-checkbox/releases/tag/0.5.16-0.0.1) | [链接](zh-cn/react-native-checkbox.md) | -| 4 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) | +>[!tip] NPM 公仓坐标：@react-native-oh-tpl + +>[!tip] NPM Github Packages 私仓坐标：@react-native-oh-library + +| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | Releases | 文档链接 +|:---:| :----------: |:-------------:| :----------: | :----------: | :----------: | :----------: | +| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](zh-cn/async-storage.md) | +| 2 | @react-native-clipboard/clipboard | 1.12.1 | 是 | 80% | [@react-native-oh-library/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](zh-cn/clipboard.md) | +| 3 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](zh-cn/picker.md) | +| 4 | @react-native-community/progress-bar-android | 1.0.4 | 是 | 90% | [@react-native-oh-library/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](zh-cn/progress-bar-android.md) | +| 5 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](zh-cn/react-native-checkbox.md) | +| 6 | react-native-fast-image | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](zh-cn/react-native-fast-image.md) | +| 7 | react-native-linear-gradient | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](zh-cn/react-native-linear-gradient.md) | +| 8 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](zh-cn/react-native-masked-view.md) | +| 9 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](zh-cn/react-native-slider.md) | +| 10 | react-native-SmartRefreshLayout | 0.6.7 | 否 | 70% | [@react-native-oh-library/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | ## 社区 diff --git a/zh-cn/async-storage.md b/zh-cn/async-storage.md index ea2ff31a..f2f7cabf 100644 --- a/zh-cn/async-storage.md +++ b/zh-cn/async-storage.md @@ -1,3 +1,5 @@ +> 模板版本：v0.0.1 +

@react-native-async-storage/async-storage

@@ -12,7 +14,7 @@ ## 安装与使用 -> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 +> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 @@ -23,16 +25,22 @@ 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash yarn add @react-native-async-storage/async-storage@npm:@react-native-oh-library/async-storage ``` -或者 +#### **npm** ```bash npm install @react-native-async-storage/async-storage@npm:@react-native-oh-library/async-storage ``` + + 下面的代码展示了这个库的基本使用场景： ```js @@ -157,7 +165,7 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 在 ArkTs 侧引入 AsynStorage 组件 +### 在 ArkTs 侧引入 AsynStorage Package 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： @@ -192,9 +200,7 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -| `@react-native-oh-library/async-storage` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | -| ------------------------------------------------ | ----------------------------- | --------------------- | ------------------------------ | --------------------- | -| `1.19.5-0.0.3` | `0.72.5` | `0.72.10` | `4.0.3.601` | `OpenHarmony 4.10.10` | +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/async-storage Releases](https://github.com/react-native-oh-library/async-storage/releases) ## API diff --git a/zh-cn/clipboard.md b/zh-cn/clipboard.md index b7f8f88e..a2e44d89 100644 --- a/zh-cn/clipboard.md +++ b/zh-cn/clipboard.md @@ -1,3 +1,5 @@ +> 模板版本：v0.0.1 +

@react-native-clipboard/clipboard

@@ -12,28 +14,34 @@ ## 安装与使用 -> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 +> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 -```json +```bash @react-native-oh-library:registry=https://npm.pkg.github.com //npm.pkg.github.com/:_authToken=TOKEN ``` 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash yarn add @react-native-clipboard/clipboard@npm:@react-native-oh-library/clipboard ``` -或者 +#### **npm** ```bash npm install @react-native-clipboard/clipboard@npm:@react-native-oh-library/clipboard ``` -快速使用： + + +下面的代码展示了这个库的基本使用场景： ```js import Clipboard from "@react-native-clipboard/clipboard"; @@ -158,7 +166,7 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` -### 在 ArkTs 侧引入 Clipboard 组件 +### 在 ArkTs 侧引入 Clipboard Package 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： @@ -193,9 +201,7 @@ 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` | +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/clipboard Releases](https://github.com/react-native-oh-library/clipboard/releases) ## 属性 diff --git a/zh-cn/picker.md b/zh-cn/picker.md index 7e222d94..165d0b28 100644 --- a/zh-cn/picker.md +++ b/zh-cn/picker.md @@ -1,3 +1,5 @@ +> 模板版本：v0.0.1 +

@react-native-picker/picker

@@ -12,7 +14,7 @@ ## 安装与使用 -> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 +> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 @@ -23,16 +25,22 @@ 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash yarn add @react-native-picker/picker@npm:@react-native-oh-library/picker ``` -或者 +#### **npm** ```bash npm install @react-native-picker/picker@npm:@react-native-oh-library/picker ``` + + 下面的代码展示了这个库的基本使用场景： ```js @@ -68,7 +76,7 @@ const [selectedLanguage, setSelectedLanguage] = useState(); ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-slider": "file:../../node_modules/'@react-native-picker/picker/harmony/picker.har" + "rnoh-slider": "file:../../node_modules/@react-native-picker/picker/harmony/picker.har" } ``` @@ -87,7 +95,7 @@ ohpm install ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-slider": "file:../../node_modules/'@react-native-picker/picker/harmony/picker" + "rnoh-slider": "file:../../node_modules/@react-native-picker/picker/harmony/picker" } ``` @@ -192,9 +200,7 @@ import { createRNPackages } from '../RNPackagesFactory' 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -| `@react-native-oh-library/picker` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | -| ----------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | -| `2.5.1-0.0.1` | `0.72.5` | `0.72.10` | `4.0.3.601` | `OpenHarmony 4.10.10` | +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-picker/picker Releases](https://github.com/react-native-oh-library/picker/releases) ## 属性 @@ -231,7 +237,7 @@ import { createRNPackages } from '../RNPackagesFactory' | `enabled` | If set to false, the specific item will be disabled, i.e. the user will not be able to make a selection. | boolean | no | Android | no | | `contentDescription` | Sets the content description to the Picker Item. | string | no | Android | no | -## 方法 +## 静态方法 | 名称 | 说明 | 平台 | 鸿蒙支持 | | ------- | ------------------------------- | ------- | -------- | diff --git a/zh-cn/progress-bar-android.md b/zh-cn/progress-bar-android.md index dfa31d54..f68b1765 100644 --- a/zh-cn/progress-bar-android.md +++ b/zh-cn/progress-bar-android.md @@ -1,3 +1,5 @@ +> 模板版本：v0.0.1 +

@react-native-community/progress-bar-android

@@ -12,7 +14,7 @@ ## 安装与使用 -> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 +> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 @@ -23,16 +25,22 @@ 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash yarn add @react-native-community/progress-bar-android@npm:@react-native-oh-library/progress-bar-android ``` -或者 +#### **npm** ```bash npm install @react-native-community/progress-bar-android@npm:@react-native-oh-library/progress-bar-android ``` + + 下面的代码展示了这个库的基本使用场景： ```js @@ -193,9 +201,7 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -| ` @react-native-oh-library/progress-bar-android` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | Required SDK Version | -| -------------------------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | ----------------------- | -| `1.0.4-0.0.3` | `0.72.5` | `0.72.10` | `4.0.3.700` | `OpenHarmony 4.10.10` | `OpenHarmony 4.0.10.15` | +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/progress-bar-android Releases](https://github.com/react-native-oh-library/progress-bar-android/releases) ## 属性 diff --git a/zh-cn/react-native-SmartRefreshLayout.md b/zh-cn/react-native-SmartRefreshLayout.md index 0bdf6f95..32c38f34 100644 --- a/zh-cn/react-native-SmartRefreshLayout.md +++ b/zh-cn/react-native-SmartRefreshLayout.md @@ -1,31 +1,37 @@ +> 模板版本：v0.0.1 +

react-native-SmartRefreshLayout

- Supported platforms License -

## 安装与使用 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash yarn add xxx ``` -或者 +#### **npm** ```bash npm install xxx ``` + + 下面的代码展示了这个库的基本使用场景： ```js @@ -226,9 +232,7 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -| ` react-native-SmartRefreshLayout` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | Required SDK Version | -| ------------------------------------------ | ----------------------------- | --------------------- | ------------------------------ | --------------------- | ----------------------- | -| `0.6.7-0.0.8` | `0.72.5` | `0.72.10` | `4.0.3.700` | `OpenHarmony 4.10.10` | `OpenHarmony 4.0.10.15` | +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-smartrefreshlayout Releases](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) ## 属性 diff --git a/zh-cn/react-native-checkbox.md b/zh-cn/react-native-checkbox.md index 78661a78..0102deca 100644 --- a/zh-cn/react-native-checkbox.md +++ b/zh-cn/react-native-checkbox.md @@ -1,3 +1,5 @@ +> 模板版本：v0.0.1 +

@react-native-community/checkbox

@@ -12,57 +14,64 @@ ## 安装与使用 -目前 React-Native-OpenHarmony(RNOH) 三方库的npm包部署在私仓，需要通过github token来获取访问权限。 +> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 -在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将TOKEN替换为RNOH三方库指定的token。 -```json +在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 + +```bash @react-native-oh-library:registry=https://npm.pkg.github.com //npm.pkg.github.com/:_authToken=TOKEN ``` 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash yarn add @react-native-community/checkbox@npm:@react-native-oh-library/checkbox ``` -或者 +#### **npm** ```bash npm install @react-native-community/checkbox@npm:@react-native-oh-library/checkbox ``` + + 下面的代码展示了这个库的基本使用场景： ```js -import CheckBox from '@react-native-community/checkbox'; +import CheckBox from "@react-native-community/checkbox"; { - console.log("" + event.nativeEvent.value) - setMsg2("onChange" + event.nativeEvent.target) - setValue(event.nativeEvent.value) - }} - markSize={70} - strokeColor={'yellow'} - strokeWidth={5} - onValueChange={(newValue) => { - setToggleCheckBox(newValue) - setMsg("onValueChange----") - }} - /> + disabled={false} + value={toggleCheckBox} + style={{ width: 70, height: 70 }} + tintColor={"red"} + onCheckColor={"green"} + onChange={(event) => { + console.log("" + event.nativeEvent.value); + setMsg2("onChange" + event.nativeEvent.target); + setValue(event.nativeEvent.value); + }} + markSize={70} + strokeColor={"yellow"} + strokeWidth={5} + onValueChange={(newValue) => { + setToggleCheckBox(newValue); + setMsg("onValueChange----"); + }} +/>; ``` ## Link -目前鸿蒙暂不支持 AutoLink，所以Link步骤需要手动配置。 +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 -首先需要使用DevEco Studio打开项目里的鸿蒙工程 `harmony` +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` ### 引入原生端代码 @@ -107,7 +116,7 @@ cd entry ohpm install --no-link ``` -### 配置CMakeLists和引入CheckboxPackge +### 配置 CMakeLists 和引入 CheckboxPackge 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -155,8 +164,7 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` - -### 在ArkTs侧引入 Checkbox 组件 +### 在 ArkTs 侧引入 Checkbox 组件 打开 `entry/src/main/ets/pages/index.ets`，添加： @@ -181,14 +189,14 @@ import { createRNPackages } from '../RNPackagesFactory' tag: ctx.descriptor.tag, buildCustomComponent: CustomComponentBuilder }) - } + } + else if (ctx.descriptor.type === CHECKBOX_TYPE) { + RNCCheckbox({ + ctx: ctx.rnohContext, + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) -+ } ++ } ... } ... @@ -199,6 +207,7 @@ import { createRNPackages } from '../RNPackagesFactory' 点击右上角的 `sync` 按钮 或者在终端执行： + ```bash cd entry ohpm install @@ -206,35 +215,29 @@ ohpm install 然后编译、运行即可。 - - ## 兼容性 -要使用此库，需要使用正确的React-Native和RNOH版本。另外，还需要使用配套的 DevEco Studio 和 手机ROM。 - -| `@react-native-oh-library/checkbox` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | -| ---------------------------------------- | ----------------------------- | ----------------------------- | ----------------------------- | ----------------------------- | -| `0.5.16-0.0.2` | `>=0.72.5` | `>=0.72.6` | `>=4.0.3.501` | `>=OpenHarmony 4.10.10` | +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-community/checkbox Releases](https://github.com/react-native-oh-library/react-native-checkbox/releases) ## 属性 - -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | ------------ | -------- | -| `onChange` | Invoked on change with the native event. | function | No | All | yes | -| `onValueChange` | Invoked with the new boolean value when it changes. | function | No | All | yes | -| `value` | The value of the checkbox. If true the checkbox will be turned on. Default value is false. | boolean | No | All | yes | -| `testID` | Used to locate this view in end-to-end tests. | string | No | All | yes | -| `disabled` | If true the user won't be able to toggle the checkbox. Default value is false. | bool | No | All | yes | -| `onCheckColor` | Color of the check box when it is selected. | Color | No | ios & harmony | yes | -| `tintColor` | Border color of the check box when it is not selected. | Color | No | ios & harmony | yes | -| `markSize` | Size of the internal mark. The default size is the same as the width of the check box.This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used. | number | No | harmony | yes | -| `strokeWidth` | Stroke width of the internal mark. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used. | number | No | harmony | yes | -| `strokeColor` | Color of the internal mark. | Color | No | harmony | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ------------- | -------- | +| `onChange` | Invoked on change with the native event. | function | No | All | yes | +| `onValueChange` | Invoked with the new boolean value when it changes. | function | No | All | yes | +| `value` | The value of the checkbox. If true the checkbox will be turned on. Default value is false. | boolean | No | All | yes | +| `testID` | Used to locate this view in end-to-end tests. | string | No | All | yes | +| `disabled` | If true the user won't be able to toggle the checkbox. Default value is false. | bool | No | All | yes | +| `onCheckColor` | Color of the check box when it is selected. | Color | No | ios & harmony | yes | +| `tintColor` | Border color of the check box when it is not selected. | Color | No | ios & harmony | yes | +| `markSize` | Size of the internal mark. The default size is the same as the width of the check box.This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used. | number | No | harmony | yes | +| `strokeWidth` | Stroke width of the internal mark. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used. | number | No | harmony | yes | +| `strokeColor` | Color of the internal mark. | Color | No | harmony | yes | ## 遗留问题 ## 其他 ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-checkbox/blob/harmony/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-checkbox/blob/harmony/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-native-fast-image.md b/zh-cn/react-native-fast-image.md index 126e285f..e1c9b2bd 100644 --- a/zh-cn/react-native-fast-image.md +++ b/zh-cn/react-native-fast-image.md @@ -1,36 +1,53 @@ +> 模板版本：v0.0.1 +

-

@react-native-oh-tpl/react-native-fast-image

+

react-native-fast-image

Supported platforms + + License +

## 安装与使用 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash yarn add react-native-fast-image@npm:@react-native-oh-tpl/react-native-fast-image ``` -或者 +#### **npm** ```bash npm install react-native-fast-image@npm:@react-native-oh-tpl/react-native-fast-image ``` + + 下面的代码展示了这个库的基本使用场景： ```js -import FastImage from 'react-native-fast-image'; - - ( + + /> +); ``` ## Link @@ -97,7 +114,7 @@ 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-fast-image/src/main/cpp" ./fast_image) ++ add_subdirectory("${OH_MODULE_DIR}/rnoh-fast-image/src/main/cpp" ./fast-image) # RNOH_END: add_package_subdirectories add_library(rnoh_app SHARED @@ -185,9 +202,7 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -| `@react-native-oh-tpl/react-native-fast-image` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | -| ------------------------------------------------------ | ----------------------------- | --------------------- | ------------------------------ | --------------------- | -| `8.6.3-0.0.2` | `0.72.5` | `0.72.10` | `4.0.3.601` | `OpenHarmony 4.10.10` | +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl Releases](https://github.com/react-native-oh-library/react-native-fast-image/releases) ## 属性 diff --git a/zh-cn/react-native-linear-gradient.md b/zh-cn/react-native-linear-gradient.md index 06c81b16..f742dc9b 100644 --- a/zh-cn/react-native-linear-gradient.md +++ b/zh-cn/react-native-linear-gradient.md @@ -1,4 +1,4 @@ - +> 模板版本：v0.0.1

react-native-linear-gradient

@@ -7,13 +7,16 @@ Supported platforms -

+ + License + + +

## 安装与使用 -目前 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 @@ -21,37 +24,59 @@ 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash -yarn add react-native-linear-gradient@npm:@react-native-oh-library/react-native-linear-gradient +yarn add react-native-linear-gradient@npm:@react-native-oh-tpl/react-native-linear-gradient ``` -或者 +#### **npm** ```bash -npm install react-native-linear-gradient@npm:@react-native-oh-library/react-native-linear-gradient +npm install react-native-linear-gradient@npm:@react-native-oh-tpl/react-native-linear-gradient ``` + + 快速使用： ```js -import LinearGradient from 'react-native-linear-gradient'; - - 1111 - 2222 - 3333 - +import LinearGradient from "react-native-linear-gradient"; + +// Within your render function + + Sign in with Facebook +; + +// Later on in your styles.. +var styles = StyleSheet.create({ + linearGradient: { + flex: 1, + paddingLeft: 15, + paddingRight: 15, + borderRadius: 5, + }, + buttonText: { + fontSize: 18, + fontFamily: "Gill Sans", + textAlign: "center", + margin: 10, + color: "#ffffff", + backgroundColor: "transparent", + }, +}); ``` ## Link -目前鸿蒙暂不支持 AutoLink，所以Link步骤需要手动配置。 +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 -首先需要使用DevEco Studio打开项目里的鸿蒙工程 `harmony` +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` ### 引入原生端代码 @@ -96,7 +121,7 @@ cd entry ohpm install --no-link ``` -### 配置CMakeLists和引入LinearGradientPackage +### 配置 CMakeLists 和引入 LinearGradientPackage 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： @@ -144,8 +169,7 @@ std::vector> PackageProvider::getPackages(Package::Cont } ``` - -### 在ArkTs侧引入 linear-gradient 组件 +### 在 ArkTs 侧引入 linear-gradient 组件 打开 `entry/src/main/ets/pages/index.ets`，添加： @@ -177,7 +201,7 @@ import { createRNPackages } from '../RNPackagesFactory' + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) -+ } ++ } ... } ... @@ -188,6 +212,7 @@ import { createRNPackages } from '../RNPackagesFactory' 点击右上角的 `sync` 按钮 或者在终端执行： + ```bash cd entry ohpm install @@ -195,19 +220,14 @@ ohpm install 然后编译、运行即可。 - - ## 兼容性 -要使用此库，需要使用正确的React-Native和RNOH版本。另外，还需要使用配套的 DevEco Studio 和 手机ROM。 -| `@react-native-oh-library/react-native-linear-gradient` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | -| ------------------------------------------------------------ | ----------------------------- | --------------------- | ------------------------------ | ----------------------- | -| 3.0.0-alpha.1-0.2.4 | `>=0.72.5` | `>=0.72.6` | `>=4.0.3.501` | `>=OpenHarmony 4.10.10` | +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-linear-gradient Releases](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) ## 属性 - | 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | | ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | | colors | Color Array | (string\|number)[] | NO | All | yes | @@ -223,4 +243,5 @@ ohpm install ## 其他 ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-linear-gradient/blob/harmony/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-linear-gradient/blob/harmony/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-native-masked-view.md b/zh-cn/react-native-masked-view.md index 9009a396..d31b21be 100644 --- a/zh-cn/react-native-masked-view.md +++ b/zh-cn/react-native-masked-view.md @@ -1,3 +1,5 @@ +> 模板版本：v0.0.1 +

@react-native-masked-view/masked-view

@@ -10,11 +12,9 @@

- - ## 安装与使用 -> [!tip] 目前 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 +> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。 在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。 @@ -25,51 +25,57 @@ 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash yarn add @react-native-masked-view/masked-view@npm:@react-native-oh-library/masked-view ``` -或者 +#### **npm** ```bash npm install @react-native-masked-view/masked-view@npm:@react-native-oh-library/masked-view ``` + + 下面的代码展示了这个库的基本使用场景： ```js -import MaskedView from '@react-native-masked-view/masked-view'; +import MaskedView from "@react-native-masked-view/masked-view"; - - Basic Mask - - - } + style={{ flex: 1, flexDirection: "row", height: "100%" }} + maskElement={ + - {/* Shows behind the mask, you can put anything here, such as an image */} - - - - - + + Basic Mask + + + } +> + {/* Shows behind the mask, you can put anything here, such as an image */} + + + + +; ``` ## Link @@ -224,18 +230,14 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -| `@react-native-oh-library/masked-view` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | -| ----------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | -| `0.2.9-0.0.1` | `0.72.5` | `0.72.10` | `4.0.3.601` | `OpenHarmony 4.10.10` | +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/masked-view Releases](https://github.com/react-native-oh-library/masked-view/releases) ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | ------------ | -------- | -| `maskElement` | 遮罩元素 | element | yes | All | yes | -`androidRenderingMode` | 安卓渲染模式 | software, hardware | no | android | no | - - +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------------- | ------------ | ------------------ | -------- | -------- | -------- | +| `maskElement` | 遮罩元素 | element | yes | All | yes | +| `androidRenderingMode` | 安卓渲染模式 | software, hardware | no | android | no | ## 遗留问题 @@ -245,4 +247,4 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-masked-view/masked-view/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/react-native-masked-view/masked-view/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-native-slider.md b/zh-cn/react-native-slider.md index fd11721f..c6a29ac6 100644 --- a/zh-cn/react-native-slider.md +++ b/zh-cn/react-native-slider.md @@ -1,3 +1,5 @@ +> 模板版本：v0.0.1 +

@react-native-community/slider

@@ -23,16 +25,22 @@ 进入到工程目录并输入以下命令： + + +#### **yarn** + ```bash yarn add @react-native-community/slider@npm:@react-native-oh-library/slider ``` -或者 +#### **npm** ```bash npm install @react-native-community/slider@npm:@react-native-oh-library/slider ``` + + 下面的代码展示了这个库的基本使用场景： ```js @@ -199,9 +207,7 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -| `@react-native-oh-library/slider` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version | -| ----------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- | -| `4.4.3-0.1.1` | `0.72.5` | `0.72.10` | `4.0.3.601` | `OpenHarmony 4.10.10` | +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/slider Releases](https://github.com/react-native-oh-library/react-native-slider/releases) ## 属性 -- Gitee From 4c0a38aa336c3e6d8c1cc37f68c24e3e4208f5a6 Mon Sep 17 00:00:00 2001 From: Louis-C7 <972339262@qq.com> Date: Thu, 30 Nov 2023 18:51:15 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I8KT7W]=20=E4=BF=AE=E6=94=B9asy?= =?UTF-8?q?nc-storage=E7=9A=84oh-package.json?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/async-storage.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/async-storage.md b/zh-cn/async-storage.md index f2f7cabf..dc78a67f 100644 --- a/zh-cn/async-storage.md +++ b/zh-cn/async-storage.md @@ -106,7 +106,7 @@ ohpm install ```json "dependencies": { "rnoh": "file:../rnoh", - "rnoh-slider": "file:../../node_modules/@react-native-async-storage/async-storage/harmony/async-storage" + "rnoh-async-storage": "file:../../node_modules/@react-native-async-storage/async-storage/harmony/async-storage" } ``` -- Gitee