diff --git a/zh-cn/README.md b/zh-cn/README.md index 3384dea4ed3c65d709e274d6fc76530034f713e3..6bdb0094589e067ec087bc3953d412b6bd14cc69 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 ea2ff31a149f0cb1949b32a60bd48f059d1715f7..dc78a67f614d0f3a2d7ac5c6add03ec1b0bdf093 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 @@ -98,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" } ``` @@ -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 b7f8f88e916e81496b2687670aba5bdf397bd104..a2e44d890ab3540019669c4c8deaf16e7002345a 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 7e222d9403892a97eb2938ffd55ac39ed9cfb7cb..165d0b28dd11a197c7017c0445a615c6020c489f 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 dfa31d54024a381b79f2b75bb2f6c1afd5637438..f68b1765270e0c734c7d3fe7769df7ba655aa2f7 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 0bdf6f959facac6986dc0a09c76794d88c6ab08d..32c38f34ad5aab6b247b6f4973ed9e099f1e0718 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 78661a7863f5b68288c96e0ed355640bf6a822fe..0102decaedf34534b84a033fe55159ed4716cd3e 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 126e285fe9b81cdfcb0a9b62f9018992d0d4d92f..e1c9b2bd5db8eb08c72429a3e893903cebf58f21 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 06c81b160f4a96510b763b74d6ad36725fc80ea6..f742dc9b3f0a0f9221241122abed869367435462 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 9009a39649bb53198b228709f5af41cf3f03157f..d31b21be82feb3196ce8ae7c2ebd5cf67bf6ba17 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 fd11721ff8d78ab531bd1bd1047e757d032bb9eb..c6a29ac63862d5fb87bd6e0c9559f60512ce6c76 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) ## 属性