From 18daf7a7c61e9ca070283cc46f29ad5f47776f39 Mon Sep 17 00:00:00 2001
From: Magic-Neko <312651922@qq.com>
Date: Thu, 18 Apr 2024 11:54:08 +0800
Subject: [PATCH] =?UTF-8?q?[Issues:=20#I9HJFB]=20=E8=BF=81=E7=A7=BB?=
=?UTF-8?q?=E4=B8=89=E6=96=B9=E5=BA=93=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
---
README.md | 15 +
_sidebar.md | 16 +
zh-cn/README.md | 15 +
zh-cn/react-native-MJRefresh.md | 284 ++++++++
zh-cn/react-native-aria.md | 568 +++++++++++++++
.../react-native-community-toolbar-android.md | 311 +++++++++
zh-cn/react-native-drag-sort.md | 645 ++++++++++++++++++
zh-cn/react-native-fs.md | 365 ++++++++++
...react-native-keyboard-aware-scroll-view.md | 134 ++++
zh-cn/react-native-permissions.md | 432 ++++++++++++
zh-cn/react-native-progress.md | 226 ++++++
zh-cn/react-native-reanimated-carousel.md | 327 +++++++++
zh-cn/react-native-sound.md | 338 +++++++++
zh-cn/react-native-text-size.md | 414 +++++++++++
zh-cn/react-redux.md | 177 +++++
zh-cn/react-router-dom.md | 106 +++
zh-cn/redux-actions.md | 306 +++++++++
zh-cn/redux-thunk.md | 157 +++++
18 files changed, 4836 insertions(+)
create mode 100644 zh-cn/react-native-MJRefresh.md
create mode 100644 zh-cn/react-native-aria.md
create mode 100644 zh-cn/react-native-community-toolbar-android.md
create mode 100644 zh-cn/react-native-drag-sort.md
create mode 100644 zh-cn/react-native-fs.md
create mode 100644 zh-cn/react-native-keyboard-aware-scroll-view.md
create mode 100644 zh-cn/react-native-permissions.md
create mode 100644 zh-cn/react-native-progress.md
create mode 100644 zh-cn/react-native-reanimated-carousel.md
create mode 100644 zh-cn/react-native-sound.md
create mode 100644 zh-cn/react-native-text-size.md
create mode 100644 zh-cn/react-redux.md
create mode 100644 zh-cn/react-router-dom.md
create mode 100644 zh-cn/redux-actions.md
create mode 100644 zh-cn/redux-thunk.md
diff --git a/README.md b/README.md
index 99c9ba60..0ff30a6f 100644
--- a/README.md
+++ b/README.md
@@ -127,6 +127,21 @@
| 105 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core) | 0.5.0 | 是 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core/releases) | [链接](/zh-cn/react-native-worklets-core.md) |
| 106 | [react-use](https://github.com/zenghongtu/react-use) | 17.2.4 | - | [react-use](https://github.com/zenghongtu/react-use/releases) | [链接](/zh-cn/react-use.md) |
| 107 | [redux-toolkit](https://github.com/reduxjs/redux-toolkit) | 2.2.3 | - | [redux-toolkit](https://github.com/reduxjs/redux-toolkit/releases) | [链接](/zh-cn/redux-toolkit.md) |
+| 108 | [react-native-text-size](https://github.com/aMarCruz/react-native-text-size) | 4.0.0 | 是 | [react-native-text-size](https://github.com/aMarCruz/react-native-text-size/releases) | [链接](/zh-cn/react-native-text-size.md) |
+| 109 | [react-router-dom](https://github.com/remix-run/react-router) | 6.22.3 | 是 | [react-router-dom](https://github.com/remix-run/react-router/releases) | [链接](/zh-cn/react-router-dom.md) |
+| 110 | [redux-actions](https://github.com/redux-utilities/redux-actions) | 3.0.0 | - | [redux-actions](https://github.com/redux-utilities/redux-actions/releases) | [链接](/zh-cn/redux-actions.md) |
+| 111 | [redux-thunk](https://github.com/reduxjs/redux-thunk) | 3.1.0 | - | [redux-thunk](https://github.com/reduxjs/redux-thunk/releases) | [链接](/zh-cn/redux-thunk.md) |
+| 112 | [react-native-aria](https://github.com/gluestack/react-native-aria/tree/v0.2.4) | 0.2.4 | 是 | [react-native-aria](https://github.com/gluestack/react-native-aria/releases) | [链接](/zh-cn/react-native-aria.md) |
+| 113 | [react-native-progress](https://github.com/oblador/react-native-progress) | 5.0.1 | - | [react-native-progress](https://github.com/oblador/react-native-progress/releases) | [链接](/zh-cn/react-native-progress.md) |
+| 114 | [react-native-fs](https://github.com/itinance/react-native-fs) | 2.20.0 | 是 | [react-native-fs](https://github.com/itinance/react-native-fs/releases) | [链接](/zh-cn/react-native-fs.md) |
+| 115 | [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) | 0.9.5 | - | [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view/releases) | [链接](/zh-cn/react-native-keyboard-aware-scroll-view.md) |
+| 116 | [react-native-permissions](https://github.com/zoontek/react-native-permissions) | 4.1.5 | 是 | [react-native-permissions](https://github.com/zoontek/react-native-permissions/releases) | [链接](/zh-cn/react-native-permissions.md) |
+| 117 | [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort) | 2.4.4 | 是 | [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort/releases) | [链接](/zh-cn/react-native-drag-sort.md) |
+| 118 | [react-native-sound](https://github.com/zmxv/react-native-sound) | 0.11.2 | 是 | [react-native-sound](https://github.com/zmxv/react-native-sound/releases) | [链接](/zh-cn/react-native-sound.md) |
+| 119 | [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel) | 3.5.1 | - | [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel/releases) | [链接](/zh-cn/react-native-reanimated-carousel.md) |
+| 120 | [@react-native-community/toolbar-android](https://github.com/react-native-toolbar-android/toolbar-android) | 0.2.1 | 是 | [@react-native-community/toolbar-android](https://github.com/react-native-toolbar-android/toolbar-android/releases) | [链接](/zh-cn/react-native-community-toolbar-android.md) |
+| 121 | [react-redux](https://github.com/reduxjs/react-redux) | 9.1.1 | - | [react-redux](https://github.com/reduxjs/react-redux/releases) | [链接](/zh-cn/react-redux.md) |
+| 122 | [react-native-MJRefresh](https://github.com/react-native-studio/react-native-MJRefresh) | 0.7.0 | - | [react-native-MJRefresh](https://github.com/react-native-studio/react-native-MJRefresh/releases) | [链接](/zh-cn/react-native-MJRefresh.md) |
## 社区
diff --git a/_sidebar.md b/_sidebar.md
index c1d57b7a..97a34b3c 100644
--- a/_sidebar.md
+++ b/_sidebar.md
@@ -39,6 +39,14 @@
- [react-native-pdf](/zh-cn/react-native-pdf.md)
- [react-native-image-editor](/zh-cn/react-native-image-editor.md)
- [react-native-worklets-core](/zh-cn/react-native-worklets-core.md)
+ - [react-native-text-size](/zh-cn/react-native-text-size.md)
+ - [react-native-fs](/zh-cn/react-native-fs.md)
+ - [react-native-permissions](/zh-cn/react-native-permissions.md)
+ - [react-native-sound](/zh-cn/react-native-sound.md)
+ - [react-native-blob-util](/zh-cn/react-native-blob-util.md)
+ - [react-native-reanimated-carousel](/zh-cn/react-native-reanimated-carousel.md)
+ - [@react-native-community/toolbar-android](/zh-cn/react-native-community-toolbar-android.md)
+ - [react-native-MJRefresh](/zh-cn/react-native-MJRefresh.md)
- RN JS库
- [lottie-react-native](/zh-cn/lottie-react-native.md)
- [react-i18next](/zh-cn/react-i18next.md)
@@ -96,6 +104,10 @@
- [react-use](/zh-cn/react-use.md)
- [redux-toolkit](/zh-cn/redux-toolkit.md)
- [react-native-image-viewing](/zh-cn/react-native-image-viewing.md)
+ - [react-native-aria](/zh-cn/react-native-aria.md)
+ - [react-native-progress](/zh-cn/react-native-progress.md)
+ - [react-native-keyboard-aware-scroll-view](/zh-cn/react-native-keyboard-aware-scroll-view.md)
+ - [react-redux](/zh-cn/react-redux.md)
- 纯JS库
- [crypto-js](/zh-cn/crypto-js.md)
- [deepmerge](/zh-cn/deepmerge.md)
@@ -113,3 +125,7 @@
- [redux-persist](/zh-cn/redux-persist.md)
- [qrcode-generator](/zh-cn/qrcode-generator.md)
- [EventBus](/zh-cn/EventBus.md)
+ - [react-router-dom](/zh-cn/react-router-dom.md)
+ - [redux-actions](/zh-cn/redux-actions.md)
+ - [redux-thunk](/zh-cn/redux-thunk.md)
+ - [react-native-drag-sort](/zh-cn/react-native-drag-sort.md)
diff --git a/zh-cn/README.md b/zh-cn/README.md
index f99033f9..e02ebcc2 100644
--- a/zh-cn/README.md
+++ b/zh-cn/README.md
@@ -127,6 +127,21 @@
| 105 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core) | 0.5.0 | 是 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core/releases) | [链接](/zh-cn/react-native-worklets-core.md) |
| 106 | [react-use](https://github.com/zenghongtu/react-use) | 17.2.4 | - | [react-use](https://github.com/zenghongtu/react-use/releases) | [链接](/zh-cn/react-use.md) |
| 107 | [redux-toolkit](https://github.com/reduxjs/redux-toolkit) | 2.2.3 | - | [redux-toolkit](https://github.com/reduxjs/redux-toolkit/releases) | [链接](/zh-cn/redux-toolkit.md) |
+| 108 | [react-native-text-size](https://github.com/aMarCruz/react-native-text-size) | 4.0.0 | 是 | [react-native-text-size](https://github.com/aMarCruz/react-native-text-size/releases) | [链接](/zh-cn/react-native-text-size.md) |
+| 109 | [react-router-dom](https://github.com/remix-run/react-router) | 6.22.3 | 是 | [react-router-dom](https://github.com/remix-run/react-router/releases) | [链接](/zh-cn/react-router-dom.md) |
+| 110 | [redux-actions](https://github.com/redux-utilities/redux-actions) | 3.0.0 | - | [redux-actions](https://github.com/redux-utilities/redux-actions/releases) | [链接](/zh-cn/redux-actions.md) |
+| 111 | [redux-thunk](https://github.com/reduxjs/redux-thunk) | 3.1.0 | - | [redux-thunk](https://github.com/reduxjs/redux-thunk/releases) | [链接](/zh-cn/redux-thunk.md) |
+| 112 | [react-native-aria](https://github.com/gluestack/react-native-aria/tree/v0.2.4) | 0.2.4 | 是 | [react-native-aria](https://github.com/gluestack/react-native-aria/releases) | [链接](/zh-cn/react-native-aria.md) |
+| 113 | [react-native-progress](https://github.com/oblador/react-native-progress) | 5.0.1 | - | [react-native-progress](https://github.com/oblador/react-native-progress/releases) | [链接](/zh-cn/react-native-progress.md) |
+| 114 | [react-native-fs](https://github.com/itinance/react-native-fs) | 2.20.0 | 是 | [react-native-fs](https://github.com/itinance/react-native-fs/releases) | [链接](/zh-cn/react-native-fs.md) |
+| 115 | [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) | 0.9.5 | - | [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view/releases) | [链接](/zh-cn/react-native-keyboard-aware-scroll-view.md) |
+| 116 | [react-native-permissions](https://github.com/zoontek/react-native-permissions) | 4.1.5 | 是 | [react-native-permissions](https://github.com/zoontek/react-native-permissions/releases) | [链接](/zh-cn/react-native-permissions.md) |
+| 117 | [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort) | 2.4.4 | 是 | [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort/releases) | [链接](/zh-cn/react-native-drag-sort.md) |
+| 118 | [react-native-sound](https://github.com/zmxv/react-native-sound) | 0.11.2 | 是 | [react-native-sound](https://github.com/zmxv/react-native-sound/releases) | [链接](/zh-cn/react-native-sound.md) |
+| 119 | [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel) | 3.5.1 | - | [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel/releases) | [链接](/zh-cn/react-native-reanimated-carousel.md) |
+| 120 | [@react-native-community/toolbar-android](https://github.com/react-native-toolbar-android/toolbar-android) | 0.2.1 | 是 | [@react-native-community/toolbar-android](https://github.com/react-native-toolbar-android/toolbar-android/releases) | [链接](/zh-cn/react-native-community-toolbar-android.md) |
+| 121 | [react-redux](https://github.com/reduxjs/react-redux) | 9.1.1 | - | [react-redux](https://github.com/reduxjs/react-redux/releases) | [链接](/zh-cn/react-redux.md) |
+| 122 | [react-native-MJRefresh](https://github.com/react-native-studio/react-native-MJRefresh) | 0.7.0 | - | [react-native-MJRefresh](https://github.com/react-native-studio/react-native-MJRefresh/releases) | [链接](/zh-cn/react-native-MJRefresh.md) |
## 社区
diff --git a/zh-cn/react-native-MJRefresh.md b/zh-cn/react-native-MJRefresh.md
new file mode 100644
index 00000000..210b7c34
--- /dev/null
+++ b/zh-cn/react-native-MJRefresh.md
@@ -0,0 +1,284 @@
+> 模板版本：v0.1.3
+
+
+
react-native-MJRefresh
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-MJRefresh)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-library/react-native-MJRefresh> Releases](https://github.com/react-native-oh-library/react-native-MJRefresh/releases)，并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### npm
+
+```bash
+npm install @react-native-oh-tpl/react-native-mjrefresh@file:#
+```
+
+#### yarn
+
+```bash
+yarn add @react-native-oh-tpl/react-native-mjrefresh@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { useState } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { MJRefreshControl } from "react-native-mjrefresh";
+
+export const MjRefreshDemo = () => {
+ const [state, setState] = useState<{
+ message?: string;
+ }>({
+ message: "",
+ });
+ const { message } = state;
+ let mjRefreshRef: React.RefObject;
+ return (
+
+ (this.mjRefreshRef = ref)}
+ onRefresh={() => {
+ setState({ message: "正在刷新" });
+ console.log("------------onRefresh");
+ // 开始刷新
+ this.mjRefreshRef.beginRefresh();
+ // 自定义刷新结束事件
+ setTimeout(() => {
+ console.log("------------ Finish Refresh");
+ // 结束刷新
+ this.mjRefreshRef.finishRefresh();
+ }, 2000);
+ }}
+ onRefreshIdle={() => {
+ setState({ message: "下拉刷新" });
+ console.log("------------onRefreshIdle");
+ }}
+ onReleaseToRefresh={() => {
+ setState({ message: "释放刷新" });
+ console.log("------------onReleaseToRefresh");
+ }}
+ onPulling={() => {
+ setState({ message: "下拉刷新" });
+ console.log("------------onPulling");
+ }}
+ >
+ }
+ >
+ Refresh State:{message}
+
+ );
+};
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-mjrefresh": "file:../../node_modules/@react-native-oh-tpl/react-native-mjrefresh/harmony/mjrefresh.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-mjrefresh": "file:../../node_modules/@react-native-oh-tpl/react-native-mjrefresh/harmony/mjrefresh"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 MJRefreshPackge
+
+打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+
+```diff
+txtproject(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-mjrefresh/src/main/cpp" ./mjrefresh)
+# 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_mjrefresh)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "MJRefreshPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx),
+ };
+}
+```
+
+### 在 ArkTs 侧引入 MJRefresh组件
+
+找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加：
+
+```diff
+...
++ import { MJRefresh, MJREFRESH_TYPE} from "rnoh-mjrefresh"
+
+ @Builder
+ function buildCustomComponent(ctx: ComponentBuilderContext) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag,
+ buildCustomComponent: buildCustomComponent
+ })
+ }
++ else if (ctx.componentName === MJREFRESH_TYPE) {
++ MJRefresh({
++ 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-library/react-native-MJRefresh> Releases](https://github.com/react-native-oh-library/react-native-MJRefresh/releases)
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情请见[react-native-MJRefresh](https://github.com/react-native-studio/react-native-MJRefresh)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :----------------- | ----------- | -------- | -------- | -------- | ----------------- |
+| onRefresh | System Path | function | No | IOS | yes |
+| onRefreshIdle | System Path | function | No | IOS | yes |
+| onReleaseToRefresh | System Path | function | No | IOS | yes |
+| onPulling | System Path | function | No | IOS | yes |
+
+## 静态方法
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情请见[react-native-MJRefresh](https://github.com/react-native-studio/react-native-MJRefresh)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :------------ | ----------- | -------- | -------- | -------- | ----------------- |
+| beginRefresh | System Path | function | No | IOS | yes |
+| finishRefresh | System Path | function | No | IOS | yes |
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-studio/react-native-MJRefresh/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-aria.md b/zh-cn/react-native-aria.md
new file mode 100644
index 00000000..9e505a98
--- /dev/null
+++ b/zh-cn/react-native-aria.md
@@ -0,0 +1,568 @@
+> 模板版本：v0.1.3
+
+
+
react-native-aria
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/gluestack/react-native-aria/tree/v0.2.4)
+
+## 安装与使用
+
+React Native ARIA是可增量采用的。每个组件都作为单独的包发布，因此您可以在单个组件中使用它，并随着时间的推移逐渐添加更多组件。所有这些包都在npm上的@react-native-aria范围内发布。
+
+进入到工程目录并输入以下命令：
+
+#### **yarn**
+
+```bash
+yarn add @react-native-aria/button@0.2.2
+```
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-aria/button@0.2.2
+```
+
+
+
+除了单独的包之外，我们还提供了一个总包，其中包含所有React Native ARIA hooks
+
+#### **yarn**
+
+```bash
+yarn add react-native-aria@0.2.2
+```
+
+
+
+#### **npm**
+
+```bash
+npm install react-native-aria@0.2.2
+```
+
+
+
+下面的代码展示了useToggleButton的基本使用场景：
+
+```js
+import React from "react";
+import { useToggleButton } from "@react-native-aria/button";
+import { Pressable, Text, View } from "react-native";
+import { useToggleState } from "@react-stately/toggle";
+import { useRef } from "react";
+
+export function ToggleButton(props) {
+ const ref = useRef(null);
+ let state = useToggleState(props);
+ let { buttonProps, isPressed } = useToggleButton(props, state, ref); //useToggleButton 是一个用于创建可切换按钮的 Hook，接受三个参数
+
+ return (
+
+
+
+ A simple toggle button
+
+
+
+
+
+ {state.isSelected ? "Selected" : "Not Selected"}
+
+
+
+ );
+}
+
+export default function AriaDemo() {
+ return (
+
+ Toggle button
+
+ );
+}
+```
+
+下面的代码展示了useCheckbox与useCheckboxGroup的基本使用场景：
+
+```javascript
+import React ,{ useContext, useRef }from 'react';
+import {useCheckboxGroupState} from '@react-stately/checkbox';
+import {useCheckbox, useCheckboxGroup,useCheckboxGroupItem} from '@react-native-aria/checkbox';
+import {Platform, Pressable, Text, View} from 'react-native';
+import {VisuallyHidden} from '@react-aria/visually-hidden';
+import {useFocusRing} from '@react-native-aria/focus';
+let CheckboxGroupContext = React.createContext(null);
+
+export function CheckboxGroup(props: any) {
+ let {children, label} = props;
+ let state = useCheckboxGroupState(props);
+ let {checkboxgroupProps, labelProps} = useCheckboxGroup(props, state);
+
+ return (
+
+ {label && {label} }
+
+ {children}
+
+
+ );
+}
+export function Checkbox(props: any) {
+
+ let state = useContext(CheckboxGroupContext);
+ const inputRef = React.useRef(null);
+ let {isFocusVisible, focusProps} = useFocusRing();
+ let { inputProps } = state
+ ?
+ useCheckboxGroupItem(
+ {
+ ...props,
+ isRequired: props.isRequired,
+ validationState: props.validationState,
+ },
+ state,
+ inputRef
+ )
+ :
+ useCheckbox(props, useToggleState(props), inputRef);
+ return (
+ <>
+
+
+ {props.children}
+
+ {inputProps.checked ? 'selected' : 'not selected'}
+
+
+ );
+}
+
+export default function CheckboxDemo() {
+ return (
+
+
+ Dogs
+ Cats
+ rabbits
+
+
+ );
+}
+
+```
+
+下面的代码展示了useRadio与useRadioGroup的基本使用场景：
+
+```javascript
+import React from "react";
+import { useRadioGroupState } from "@react-stately/radio";
+import { useRadio, useRadioGroup } from "@react-native-aria/radio";
+import { Platform, Pressable, Text, View } from "react-native";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { useFocusRing } from "@react-native-aria/focus";
+
+let RadioContext = React.createContext({});
+
+export function RadioGroup(props: any) {
+ let { children, label } = props;
+ let state = useRadioGroupState(props);
+ let { radioGroupProps, labelProps } = useRadioGroup(props, state);
+
+ return (
+
+ {label}
+
+ {children}
+
+
+ );
+}
+
+export function Radio(props: any) {
+ let { state, isReadOnly, isDisabled } = React.useContext(RadioContext);
+ const inputRef = React.useRef(null);
+ let { inputProps } = useRadio(
+ { isReadOnly, isDisabled, ...props },
+ state,
+ inputRef
+ );
+ let { isFocusVisible, focusProps } = useFocusRing();
+
+ let isSelected = state.selectedValue === props.value;
+
+ return (
+ <>
+
+
+
+
+ {props.children}
+
+ {isSelected ? "selected" : "not selected"}
+
+
+ );
+}
+
+export default function RadioDemo() {
+ return (
+
+
+ Dogs
+ Cats
+
+
+ );
+}
+```
+
+下面的代码展示了useSwitch的基本使用场景：
+
+```javascript
+import { useToggleState } from "@react-stately/toggle";
+import React, { useRef } from "react";
+import {
+ StyleSheet,
+ Text,
+ View,
+ Animated,
+ Platform,
+ Pressable,
+} from "react-native";
+import { useSwitch } from "@react-native-aria/switch";
+import { useFocusRing } from "@react-native-aria/focus";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+
+const calculateDimensions = (size: any) => {
+ switch (size) {
+ case "small":
+ return {
+ width: 40,
+ padding: 10,
+ circleWidth: 15,
+ circleHeight: 15,
+ translateX: 22,
+ };
+ case "large":
+ return {
+ width: 70,
+ padding: 20,
+ circleWidth: 30,
+ circleHeight: 30,
+ translateX: 38,
+ };
+ default:
+ return {
+ width: 46,
+ padding: 12,
+ circleWidth: 18,
+ circleHeight: 18,
+ translateX: 26,
+ };
+ }
+};
+const defaultProps = {
+ isOn: false,
+ onColor: "#4cd137",
+ offColor: "#ecf0f1",
+ size: "medium",
+ labelStyle: {},
+ thumbOnStyle: {},
+ thumbOffStyle: {},
+ trackOnStyle: {},
+ trackOffStyle: {},
+ icon: null,
+ disabled: false,
+ animationSpeed: 300,
+ useNativeDriver: true,
+ circleColor: "white",
+};
+export function Switch(origProps: any) {
+ const props = {
+ ...defaultProps,
+ ...origProps,
+ };
+
+ const offsetX = useRef(new Animated.Value(0));
+ const dimensions = useRef(calculateDimensions(props.size));
+
+ const createToggleSwitchStyle = () => [
+ {
+ justifyContent: "center",
+ width: dimensions.current.width,
+ borderRadius: 20,
+ padding: dimensions.current.padding,
+ backgroundColor: props.isOn ? props.onColor : props.offColor,
+ },
+ props.isOn ? props.trackOnStyle : props.trackOffStyle,
+ ];
+
+ const createInsideCircleStyle = () => [
+ {
+ alignItems: "center",
+ justifyContent: "center",
+ margin: Platform.OS === "web" ? 0 : 4,
+ left: Platform.OS === "web" ? 4 : 0,
+ position: "absolute",
+ backgroundColor: props.circleColor,
+ transform: [{ translateX: offsetX.current }],
+ width: dimensions.current.circleWidth,
+ height: dimensions.current.circleHeight,
+ borderRadius: dimensions.current.circleWidth / 2,
+ shadowColor: "#000",
+ shadowOffset: {
+ width: 0,
+ height: 2,
+ },
+ shadowOpacity: 0.2,
+ shadowRadius: 2.5,
+ elevation: 1.5,
+ },
+ props.isOn ? props.thumbOnStyle : props.thumbOffStyle,
+ ];
+
+ const { isOn, icon } = props;
+
+ const toValue = isOn
+ ? dimensions.current.width - dimensions.current.translateX
+ : 0;
+
+ Animated.timing(offsetX.current, {
+ toValue,
+ duration: props.animationSpeed,
+ useNativeDriver: props.useNativeDriver,
+ }).start();
+
+ return (
+
+
+ {icon}
+
+ {isOn ? "on" : "off"}
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ alignItems: "center",
+ },
+ labelStyle: {
+ marginHorizontal: 10,
+ },
+});
+
+export function ControlledSwitch() {
+ const state = useToggleState();
+ const { isFocusVisible, focusProps } = useFocusRing();
+ const inputRef = useRef(null);
+ let { inputProps } = useSwitch(
+ { "aria-label": "Example switch" },
+ state,
+ inputRef
+ );
+ return (
+
+
+
+
+ );
+ }
+export default function SwitchDemo () {
+ return (
+
+
+ );
+}
+
+```
+
+下面的代码展示了useOverlayPosition的基本使用场景：
+
+```javascript
+import React from "react";
+import {
+ OverlayContainer,
+ useOverlayPosition,
+ OverlayProvider,
+} from "@react-native-aria/overlays";
+import {
+ View,
+ Text,
+ Pressable,
+ TouchableWithoutFeedback,
+ StyleSheet,
+} from "react-native";
+
+// Button to close overlay on outside click
+function CloseButton(props) {
+ return (
+
+
+ );
+}
+
+const OverlayView = ({ triggerRef, placement }) => {
+ let overlayRef = React.useRef();
+
+ const { overlayProps } = useOverlayPosition({
+ placement,
+ targetRef: triggerRef,
+ overlayRef,
+ offset: 10,
+ });
+
+ return (
+
+
+ Hello World
+
+
+ );
+};
+
+function Trigger({ placement }) {
+ let triggerRef = React.useRef();
+ const [visible, setVisible] = React.useState(false);
+ const toggleVisible = () => {
+ setVisible(!visible);
+ };
+
+ return (
+
+
+
+ Trigger
+
+
+ {visible && (
+
+
+ )}
+
+ );
+}
+
+export default function OverlaysDemo() {
+ return (
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ wrapper: {
+ height: 500,
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ trigger: {
+ flexDirection: "row",
+ borderWidth: 1,
+ paddingHorizontal: 10,
+ paddingVertical: 10,
+ },
+});
+```
+
+更多hooks请参考[react-native-aria官方文档](https://geekyants.github.io/react-native-aria/docs/)
+
+## 约束与限制
+
+## 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59;
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+以下属性已验证，详情见 [react-native-aria官方文档](https://geekyants.github.io/react-native-aria/docs/)
+
+>
+
+### Hooks
+
+| Name | Description | Type | Platform | HarmonyOS Support |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| useToggleButton | Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes. | Function | All | yes |
+| useCheckbox | Provides the behavior and accessibility implementation for a checkbox component. Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. | Function | All | yes |
+| useCheckboxGroup | Provides the behavior and accessibility implementation for a checkbox group component. Checkbox groups allow users to select multiple items from a list of options. | Function | All | yes |
+| useRadioGroup | Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options. | Function | All | yes |
+| useSwitch | Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection. | Function | All | yes |
+| OverlayContainer | Provides React Portal like functionality for React Native apps which can be useful for displaying absolutely positioned components like Menu, Tooltip, Popover. | Function | All | yes |
+| useOverlayPosition | Handles positioning overlays like popovers and menus relative to a trigger element, and updating the position when the window resizes. | Function | All | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/gluestack/react-native-aria/blob/main/LICENSE)，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-community-toolbar-android.md b/zh-cn/react-native-community-toolbar-android.md
new file mode 100644
index 00000000..20a1f5c7
--- /dev/null
+++ b/zh-cn/react-native-community-toolbar-android.md
@@ -0,0 +1,311 @@
+> 模板版本：v0.1.3
+
+
+
@react-native-community/toolbar-android
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/toolbar-android/tree/sig)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/toolbar-android> Releases](https://github.com/react-native-oh-library/toolbar-android/releases)，并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### npm
+
+```bash
+npm install @react-native-oh-tpl/toolbar-android@file:#
+```
+
+#### yarn
+
+```bash
+yarn add @react-native-oh-tpl/toolbar-android@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { useState } from "react";
+import { StyleSheet, View, Text } from "react-native";
+import ToolbarAndroid from "@react-native-community/toolbar-android";
+function App({}): JSX.Element {
+ const [state, setState] = useState<{
+ message?: string;
+ }>({
+ message: undefined,
+ });
+
+ const { message } = state;
+
+ return (
+
+ setState({ message: "Clicked nav icon" })}
+ onActionSelected={(position: number) =>
+ setState({ message: `Clicked Menu-${position}` })
+ }
+ />
+
+
+ Click nav or action icon will trigger some events!
+
+ {message}
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ toolbar: {
+ backgroundColor: "#E9EAED",
+ height: 56,
+ },
+ centerContainer: {
+ flex: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#F5FCFF",
+ },
+ headText: {
+ fontSize: 16,
+ },
+ contentText: {
+ fontSize: 18,
+ fontWeight: "bold",
+ color: "#ff681f",
+ },
+});
+
+export default App;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-toolbar-android": "file:../../node_modules/@react-native-oh-tpl/toolbar-android/harmony/toolbar_android.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-toolbar-android": "file:../../node_modules/@react-native-oh-tpl/toolbar-android/harmony/toolbar_android"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 ToolbarAndroidPackage
+
+打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+
+```diff
+txtproject(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-toolbar-android/src/main/cpp" ./toolbar-android)
+# 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_toolbar_android)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "ToolbarAndroidPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx),
+ };
+}
+```
+
+### 在 ArkTs 侧引入 RNCToolbarAndroid组件
+
+找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加：
+
+```diff
+...
++ import { RNCToolbarAndroid, RNC_TOOLBAR_ANDROID_TYPE } from 'rnoh-toolbar-android/src/main/ets/RNCToolbarAndroid'
+
+ @Builder
+ function buildCustomComponent(ctx: ComponentBuilderContext) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag,
+ buildCustomComponent: buildCustomComponent
+ })
+ }
++ else if (ctx.componentName === RNC_TOOLBAR_ANDROID_TYPE) {
++ RNCToolbarAndroid({
++ ctx: ctx.rnohContext,
++ tag: ctx.tag
++ })
++ }
+ ...
+ }
+ ...
+
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[<@react-native-oh-tpl/toolbar-android> Releases](https://github.com/react-native-oh-library/toolbar-android/releases)
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+Inherits [View Props](https://reactnative.dev/docs/view#props).
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| actions | Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu. | array of object: {title: string,icon: ImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | Android | yes |
+| contentInsetStart | Sets the content inset for the toolbar starting edge. | number | No | Android | yes |
+| contentInsetEnd | Sets the content inset for the toolbar ending edge. | number | No | Android | yes |
+| logo | Sets the toolbar logo. | ImageSource | No | Android | yes |
+| navIcon | Sets the navigation icon. | ImageSource | No | Android | yes |
+| onActionSelected | Callback that is called when an action is selected. The only argument that is passed to the callback is the position of the action in the actions array. | function | No | Android | yes |
+| onIconClicked | Callback called when the icon is selected. | function | No | Android | yes |
+| overflowIcon | Sets the overflow icon. | ImageSource | No | Android | yes |
+| rtl | Used to set the toolbar direction to RTL. | bool | No | Android | yes |
+| subtitle | Sets the toolbar subtitle. | string | No | Android | yes |
+| subtitleColor | Sets the toolbar subtitle color. | string | No | Android | yes |
+| title | Sets the toolbar title. | string | Yes | Android | yes |
+| titleColor | Sets the toolbar title color. | string | No | Android | yes |
+
+#### Props of ImageSource
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------ | ------------------------------------------------------ | ------ | -------- | -------- | ----------------- |
+| uri | load image from a url, e.g. require('./some_icon.png') | string | Yes | android | yes |
+| width | the width of the image | number | No | android | yes |
+| height | the height of the image | number | No | android | yes |
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-toolbar-android/toolbar-android/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-drag-sort.md b/zh-cn/react-native-drag-sort.md
new file mode 100644
index 00000000..9b980bc9
--- /dev/null
+++ b/zh-cn/react-native-drag-sort.md
@@ -0,0 +1,645 @@
+> 模板版本：v0.1.3
+
+
+
react-native-drag-sort
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/mochixuan/react-native-drag-sort)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+#### **yarn**
+
+```bash
+yarn add react-native-drag-sort@2.4.4
+```
+
+#### **npm**
+
+```bash
+npm i react-native-drag-sort@2.4.4
+```
+
+### Tip
+
+> Use priority: DragSortableView > AutoDragSortableView > AnySizeDragSortableView
+
+- 1、If the width and height are fixed and there is no need to slide, use DragSortableView.
+- 2、If the width and height are fixed and you need to slide, use AutoDragSortableView.
+- 3、If the width and height are arbitrary and need to slide, please use AnySizeDragSortableView.
+
+下面的代码展示了这个库的基本使用场景：
+
+##### DragSortableView组件使用
+
+```js
+import React, { useState } from "react";
+import { View, Text, StyleSheet, SafeAreaView } from "react-native";
+import { DragSortableView } from "react-native-drag-sort";
+//此案例id1、id2不支持拖拽
+const Dragsort = () => {
+ const [data, setData] = useState([
+ {
+ id: 1,
+ title: "固定任务 1",
+ },
+ {
+ id: 2,
+ title: "固定任务 2",
+ },
+ {
+ id: 3,
+ title: "任务 3",
+ },
+ {
+ id: 4,
+ title: "任务 4",
+ },
+ {
+ id: 5,
+ title: "任务 5",
+ },
+ {
+ id: 6,
+ title: "任务 6",
+ },
+ {
+ id: 7,
+ title: "任务 7",
+ },
+ {
+ id: 8,
+ title: "任务 8",
+ },
+ ]);
+
+ return (
+
+
+ DragSortableView
+
+ item.id}
+ onClickItem={(data, item, index) => {
+ console.log("点击了第", index, "个元素");
+ }}
+ onDragStart={() => console.log("Drag started")}
+ onDragEnd={() => console.log("Drag end")}
+ onDataChange={() => {
+ console.log("数据发生变化");
+ }}
+ fixedItems={[0, 1]}
+ delayLongPress={100}
+ isDragFreely={true}
+ maxScale={1.2}
+ minOpacity={0.7}
+ renderItem={(item, index) => {
+ return (
+
+ {item.title}
+
+ );
+ }}
+ sortable={true}
+ />
+
+ );
+};
+
+const styles = StyleSheet.create({
+ box: {
+ // position:'relative',
+ // flexDirection: "column",
+ justifyContent: "center",
+ alignContent: "center",
+ borderRadius: 5,
+ margin: 20,
+ backgroundColor: "#4e71f2",
+ height: 50,
+ width: 100,
+ },
+ text: {
+ fontSize: 18,
+ color: "#fff",
+ textAlign: "center",
+ },
+ header: {
+ height: 48,
+ justifyContent: "center",
+ alignItems: "center",
+ borderBottomColor: "#2ecc71",
+ borderBottomWidth: 2,
+ },
+ header_title: {
+ color: "#333",
+ fontSize: 24,
+ fontWeight: "bold",
+ },
+});
+export default Dragsort;
+```
+
+##### AutoDragSortableView组件使用
+
+```js
+//此案例Item1、Item2不支持拖拽
+import React, { useState } from "react";
+import { View, Text } from "react-native";
+import { AutoDragSortableView } from "react-native-drag-sort";
+
+const AutoDragSortDemo = () => {
+ const [data, setData] = useState([
+ { id: "1", text: "Item 1" },
+ { id: "2", text: "Item 2" },
+ { id: "3", text: "Item 3" },
+ { id: "4", text: "Item 4" },
+ { id: "5", text: "Item 5" },
+ { id: "6", text: "Item 6" },
+ { id: "7", text: "Item 7" },
+ { id: "8", text: "Item 8" },
+ { id: "9", text: "Item 9" },
+ { id: "10", text: "Item 10" },
+ { id: "11", text: "Item 11" },
+ { id: "12", text: "Item 12" },
+ { id: "13", text: "Item 13" },
+ { id: "14", text: "Item 14" },
+ { id: "15", text: "Item 15" },
+ { id: "16", text: "Item 16" },
+ { id: "17", text: "Item 17" },
+ { id: "18", text: "Item 18" },
+ { id: "19", text: "Item 19" },
+ { id: "20", text: "Item 20" },
+ { id: "21", text: "Item 21" },
+ { id: "22", text: "Item 22" },
+ { id: "23", text: "Item 23" },
+ { id: "24", text: "Item 24" },
+ { id: "25", text: "Item 25" },
+ { id: "26", text: "Item 26" },
+ { id: "27", text: "Item 27" },
+ { id: "28", text: "Item 28" },
+ ]);
+ const renderHeaderView = (
+
+
+ 标题
+
+
+ );
+ const renderBottomView = (
+
+
+ 底部
+
+
+ );
+
+ return (
+ {
+ console.log("数据发生变化");
+ }}
+ keyExtractor={(item, index) => item.id}
+ onClickItem={(data, item, index) => {
+ console.log("点击了第", index, "个元素");
+ }}
+ renderItem={(item, index) => {
+ return (
+
+ {item.text}
+
+ );
+ }}
+ scaleDuration={500} //拖拽项缩放效果的持续时间
+ slideDuration={200} //拖拽项滑动效果的持续时间
+ autoThrottle={100} //自动滑动到目的地的间隔时间
+ autoThrottleDuration={500} //自动滑动到目的地的持续时间
+ sortable={true}
+ isDragFreely={false}
+ fixedItems={[0, 1]}
+ delayLongPress={100}
+ onDragStart={() => console.log("Drag started")}
+ onDragEnd={() => console.log("Drag end")}
+ renderHeaderView={renderHeaderView}
+ headerViewHeight={50}
+ scrollIndicatorInsets={{ top: 0, left: 0, bottom: 0, right: 0 }}
+ renderBottomView={renderBottomView}
+ bottomViewHeight={50}
+ onScrollListener={(event) => {
+ console.log("滚动事件", event);
+ }}
+ onScrollRef={(ref) => {
+ console.log("滚动容器", ref);
+ }}
+ />
+ );
+};
+
+export default AutoDragSortDemo;
+```
+
+##### AnySizeDragSortableView组件使用
+
+```js
+import React, { createRef } from "react";
+import {
+ Text,
+ TouchableOpacity,
+ StyleSheet,
+ View,
+ Image,
+ Dimensions,
+ SafeAreaView,
+} from "react-native";
+import { AnySizeDragSortableView } from "react-native-drag-sort";
+
+const { width } = Dimensions.get("window");
+const headerViewHeight = 160;
+const bottomViewHeight = 40;
+
+const getW = (index, isWidth) =>
+ isWidth ? (index % 3 === 0 ? width - 40 : (width - 60) / 2) : 80;
+
+export default class AnySizeDragSortDemo extends React.Component {
+ constructor(props) {
+ super(props);
+ const items = [];
+ for (let i = 0; i < 26; i++) {
+ items.push({
+ text: String.fromCharCode(65 + i),
+ width: getW(i, true),
+ height: getW(i, false),
+ });
+ }
+ this.state = {
+ items,
+ movedKey: null,
+ };
+
+ this.sortableViewRef = createRef();
+ }
+
+ onDeleteItem = (item, index) => {
+ const items = [...this.state.items];
+ items.splice(index, 1);
+ this.setState({ items });
+ };
+
+ _renderItem = (item, index, isMoved) => {
+ const { movedKey } = this.state;
+ return (
+ {
+ this.setState({ movedKey: item.text });
+ this.sortableViewRef.current.startTouch(item, index);
+ }}
+ onPressOut={() => this.sortableViewRef.current.onPressOut()}
+ >
+
+ {
+
+ this.onDeleteItem(item, index)}>
+
+
+ }
+
+ {isMoved ? (
+
+
+ ) : null}
+
+ {item.text}
+
+
+
+
+ );
+ };
+
+ render() {
+ const { items } = this.state;
+ const renderHeaderView = (
+
+
+ mochixuan
+
+ Android, React-Native, Flutter, React, Web。Learn new knowledge and
+ share new knowledge.
+
+
+
+ );
+ const renderBottomView = (
+
+ yarn add react-native-drag-sort
+
+ );
+ return (
+ <>
+
+ AnySize
+
+ item.text}
+ renderItem={this._renderItem}
+ onDataChange={(data, callback) => {
+ this.setState({ items: data }, () => {
+ callback();
+ console.log("移动了");
+ });
+ }}
+ renderHeaderView={renderHeaderView}
+ headerViewHeight={headerViewHeight}
+ renderBottomView={renderBottomView}
+ bottomViewHeight={bottomViewHeight}
+ movedWrapStyle={styles.item_moved}
+ onDragEnd={() => console.log("Drag end")}
+ scrollIndicatorInsets={{ top: 1, left: 1, bottom: 1, right: 1 }}
+ autoThrottle={100}
+ autoThrottleDuration={500}
+ areaOverlapRatio={0.5}
+ childMarginTop={10}
+ childMarginBottom={10}
+ childMarginLeft={10}
+ childMarginRight={10}
+ />
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ item_wrap: {
+ position: "relative",
+ paddingLeft: 20,
+ paddingTop: 20,
+ },
+ item: {
+ justifyContent: "space-around",
+ alignItems: "center",
+ backgroundColor: "#f39c12",
+ borderRadius: 4,
+ },
+ item_clear_wrap: {
+ position: "absolute",
+ left: 10,
+ top: 10,
+ width: 20,
+ height: 20,
+ zIndex: 999,
+ },
+ item_clear: {
+ width: 20,
+ height: 20,
+ },
+ item_moved: {
+ opacity: 0.95,
+ borderRadius: 4,
+ },
+ item_icon_swipe: {
+ width: 50,
+ height: 50,
+ backgroundColor: "#fff",
+ borderRadius: 50 * 0.5,
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ item_icon: {
+ width: 30,
+ height: 30,
+ resizeMode: "contain",
+ },
+ item_text_swipe: {
+ backgroundColor: "#fff",
+ width: 56,
+ height: 30,
+ borderRadius: 15,
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ item_text: {
+ color: "#444",
+ fontSize: 20,
+ fontWeight: "bold",
+ },
+ header: {
+ height: 48,
+ justifyContent: "center",
+ alignItems: "center",
+ borderBottomColor: "#2ecc71",
+ borderBottomWidth: 2,
+ },
+ header_title: {
+ color: "#333",
+ fontSize: 24,
+ fontWeight: "bold",
+ },
+ aheader: {
+ height: headerViewHeight,
+ flexDirection: "row",
+ borderBottomColor: "#2ecc71",
+ borderBottomWidth: 2,
+ zIndex: 100,
+ backgroundColor: "#fff",
+ },
+ aheader_img: {
+ width: headerViewHeight * 0.6,
+ height: headerViewHeight * 0.6,
+ resizeMode: "cover",
+ borderRadius: headerViewHeight * 0.3,
+ marginLeft: 16,
+ marginTop: 10,
+ },
+ aheader_context: {
+ marginLeft: 8,
+ height: headerViewHeight * 0.4,
+ marginTop: 10,
+ },
+ aheader_title: {
+ color: "#333",
+ fontSize: 20,
+ marginBottom: 10,
+ fontWeight: "bold",
+ },
+ aheader_desc: {
+ color: "#444",
+ fontSize: 16,
+ width: width - headerViewHeight * 0.6 - 32,
+ },
+ abottom: {
+ justifyContent: "center",
+ alignItems: "center",
+ height: bottomViewHeight,
+ backgroundColor: "#fff",
+ zIndex: 100,
+ borderTopColor: "#2ecc71",
+ borderTopWidth: 2,
+ },
+ abottom_desc: {
+ color: "#333",
+ fontSize: 20,
+ fontWeight: "bold",
+ },
+});
+```
+
+## 约束与限制
+
+### 兼容性
+
+在下述版本验证通过：
+
+1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1(2.0.0.59); IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58;
+
+### 权限要求
+
+## API（AutoDragSortableView、DragSortableView）
+
+**isRequired if there is a \* in the name field**
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+>
+> 详情见 [react-native-drag-sort 源库地址](https://github.com/mochixuan/react-native-drag-sort)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :----------------------: | :---------------------------------------------------------------------: | :------: | :------: | :---------: | :---------------: |
+| **dataSource** \* | | array | Yes | iOS/Android | Yes |
+| **parentWidth** | parent width | number | No | iOS/Android | Yes |
+| **childrenHeight** \* | Each item height | number | Yes | iOS/Android | Yes |
+| **childrenWidth** \* | Each item width | number | Yes | iOS/Android | Yes |
+| **marginChildrenTop** | So the item's outermost view adds margin, you can only use this method. | number | No | iOS/Android | Yes |
+| **marginChildrenBottom** | | number | No | iOS/Android | Yes |
+| **marginChildrenLeft** | | number | No | iOS/Android | Yes |
+| **marginChildrenRight** | | number | No | iOS/Android | Yes |
+| **sortable** | Do not allow dragging | bool | No | iOS/Android | Yes |
+| **onClickItem** | click | function | No | iOS/Android | Yes |
+| **onDragStart** | | function | No | iOS/Android | Yes |
+| **onDragEnd** | | function | No | iOS/Android | Yes |
+| **onDataChange** | This method is called every time the data changes. | function | No | iOS/Android | Yes |
+| **renderItem** \* | render item view | function | Yes | iOS/Android | Yes |
+| **fixedItems** | no remove | array | No | iOS/Android | Yes |
+| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes |
+| **delayLongPress** | | number | No | iOS/Android | Yes |
+| **isDragFreely** | Whether to limit the drag space | bool | No | iOS/Android | Yes |
+| **onDragging** | | function | No | iOS/Android | Yes |
+| **maxScale** | | number | No | iOS/Android | Yes |
+| **minOpacity** | | number | No | iOS/Android | Yes |
+
+#### The following attributes belong only to AutoDragSortableView
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-----------------------: | :---------: | :------------------------------------------------------: | :------: | :---------: | :---------------: |
+| **scaleDuration** | | number | No | iOS/Android | Yes |
+| **slideDuration** | | number | No | iOS/Android | Yes |
+| **autoThrottle** | | number | No | iOS/Android | Yes |
+| **autoThrottleDuration** | | number | No | iOS/Android | Yes |
+| **renderHeaderView** | | element | No | iOS/Android | Yes |
+| **headerViewHeight** | | number | No | iOS/Android | Yes |
+| **scrollIndicatorInsets** | | ({top:number, left:number, bottom:number, right:number}) | No | iOS/Android | Yes |
+| **renderBottomView** | | element | No | iOS/Android | Yes |
+| **bottomViewHeight** | | number | No | iOS/Android | Yes |
+| **onScrollListener** | | (event: NativeSyntheticEvent) => void | No | iOS/Android | Yes |
+| **onScrollRef** | | (ref: any) => void | No | iOS/Android | Yes |
+
+## **API（AnySizeDragSortableView）**
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: |
+| **renderItem** \* | render item view | function | Yes | iOS/Android | Yes |
+| **onDataChange** | This method is called every time the data changes | function | No | iOS/Android | Yes |
+| **renderHeaderView** | | element | No | iOS/Android | Yes |
+| **headerViewHeight** | | number | No | iOS/Android | Yes |
+| **bottomViewHeight** | | number | No | iOS/Android | Yes |
+| **autoThrottle** | | number | No | iOS/Android | Yes |
+| **autoThrottleDuration** | | number | No | iOS/Android | Yes |
+| **scrollIndicatorInsets** | | ({top:number, left:number, bottom:number, right:number}) | No | iOS/Android | Yes |
+| **onScrollListener** | | (event: NativeSyntheticEvent) => void | No | iOS/Android | Yes |
+| **onScrollRef** | | (ref: any) => void | No | iOS/Android | Yes |
+| **areaOverlapRatio** | Must be greater than 0.5 | number | No | iOS/Android | Yes |
+| **movedWrapStyle** | style | StyleProp | No | iOS/Android | Yes |
+| **childMarginTop** | | number | No | iOS/Android | Yes |
+| **childMarginBottom** | | number | No | iOS/Android | Yes |
+| **childMarginLeft** | | number | No | iOS/Android | Yes |
+| **childMarginRight** | | number | No | iOS/Android | Yes |
+| **autoThrottleDuration** | | number | No | iOS/Android | Yes |
+| **onDragEnd** | | function | No | iOS/Android | Yes |
+| **dataSource** \* | | array | Yes | iOS/Android | Yes |
+| **keyExtractor** | (item,index) => key | function.isRequired | No | iOS/Android | Yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The Apache License (Apache)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-fs.md b/zh-cn/react-native-fs.md
new file mode 100644
index 00000000..ea0fbdcc
--- /dev/null
+++ b/zh-cn/react-native-fs.md
@@ -0,0 +1,365 @@
+模板版本：v0.1.3
+
+
+
react-native-fs
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-fs)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-library/react-native-fs> Releases](https://github.com/react-native-oh-library/react-native-fs/releases)，并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### npm
+
+```bash
+npm install @react-native-oh-tpl/react-native-fs@file:#
+```
+
+#### yarn
+
+```bash
+yarn add @react-native-oh-tpl/react-native-fs@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { useState } from "react";
+import {
+ SafeAreaView,
+ StyleSheet,
+ ScrollView,
+ View,
+ Text,
+ StatusBar,
+ TextInput,
+ Button,
+} from "react-native";
+import FS from "react-native-fs";
+import { Colors } from "react-native/Libraries/NewAppScreen";
+function App(): React.JSX.Element {
+ // 参数
+ const [mkdirParam, setMkdirParam] = useState("");
+ // 创建文件夹接口调用
+ const mkdirExample = () => {
+ FS.mkdir(FS.DocumentDirectoryPath + "/" + mkdirParam).then(
+ (result) => {
+ console.log("file mkdirParam： " + mkdirParam);
+ console.log("file Successfully created directory.");
+ },
+ (err) => {
+ console.error("file mkdir: " + err.message);
+ },
+ );
+ };
+ // 组件
+ return (
+ <>
+
+
+
+ {"React Native File Harmony Demo App"}
+
+
+
+ {"mkdir"}
+
+ setMkdirParam(mkdirParam)}
+ placeholderTextColor="#9a73ef"
+ autoCapitalize="none"
+ />
+
+
+
+
+
+
+ );
+}
+// 组件样式
+const styles = StyleSheet.create({
+ scrollView: {
+ backgroundColor: Colors.black,
+ },
+ engine: {
+ position: "absolute",
+ right: 0,
+ },
+ body: {
+ backgroundColor: Colors.dark,
+ },
+ sectionContainer: {
+ marginTop: 32,
+ paddingHorizontal: 24,
+ },
+ sectionTitle: {
+ fontSize: 24,
+ fontWeight: "600",
+ color: Colors.white,
+ },
+ sectionDescription: {
+ marginTop: 8,
+ fontSize: 18,
+ fontWeight: "400",
+ color: Colors.dark,
+ },
+ input: {
+ marginTop: 12,
+ },
+});
+
+export default App;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-fs": "file:../../node_modules/@react-native-oh-tpl/react-native-fs/harmony/fs.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-fs": "file:../../node_modules/@react-native-oh-tpl/react-native-fs/harmony/fs"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 FsPackge
+
+打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+
+```diff
+txtproject(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-fs/src/main/cpp" ./fs)
+# 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_fs)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "FsPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx),
+ };
+}
+```
+
+### 在 ArkTs 侧引入 FsPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+import type { RNPackageContext, RNPackage } from 'rnoh/ts';
+...
++ import { FsPackage } from 'rnoh-fs/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new FsPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[<@react-native-oh-library/react-native-fs> Releases](https://github.com/react-native-oh-library/react-native-fs/releases)
+
+## 静态方法
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情请见[react-native-fs](https://github.com/react-native-oh-library/react-native-fs)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support | Remark |
+| :--------------------------- | ----------- | ------ | -------- | --------------- | ----------------- | ------------------------ |
+| DocumentDirectoryPath | System Path | string | No | IOS/Android | yes | |
+| CachesDirectoryPath | System Path | string | No | IOS/Android | yes | |
+| MainBundlePath | System Path | string | No | IOS | No | not available on Harmony |
+| ExternalCachesDirectoryPath | System Path | string | No | Android | No | Android only |
+| DownloadDirectoryPath | System Path | string | No | Android/Windows | No | not available on Harmony |
+| TemporaryDirectoryPath | System Path | string | No | IOS/Android | No | not available on Harmony |
+| LibraryDirectoryPath | System Path | string | No | IOS | No | IOS only |
+| ExternalDirectoryPath | System Path | string | No | Android | No | Android only |
+| ExternalStorageDirectoryPath | System Path | string | No | Android | No | Android only |
+| PicturesDirectoryPath | System Path | string | No | Windows | No | Windows only |
+| RoamingDirectoryPath | System Path | string | No | Windows | No | Windows only |
+
+## API
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情请见[react-native-fs](https://github.com/react-native-oh-library/react-native-fs)
+
+| Name | Description | Type | Platform | Required | HarmonyOS Support | Remark |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | -------- | ----------------- | ----------------- |
+| mkdir | Create a directory at `filepath`. | function | Android | No | yes | |
+| exists | Check if the item exists at `filepath`. | function | IOS/Android | No | yes | |
+| readFile | Reads the file at `path` and return contents. | function | IOS/Android | No | yes | |
+| readFileAssets | Reads the file at `path` in the harmony app's assets folder and return contents. | function | Android | No | yes | |
+| writeFile | Write the `contents` to `filepath`. | function | IOS/Android | No | yes | |
+| appendFile | Append the `contents` to `filepath`. | function | IOS/Android | No | yes | |
+| copyFile | Copies the file located at `filepath` to `destPath`. | function | IOS | No | yes | |
+| unlink | Unlinks the item at `filepath`. | function | IOS/Android | No | yes | |
+| hash | Reads the file at `path` and returns its checksum as determined by `algorithm`, which can be one of `md5`, `sha1`, `sha256`. | function | IOS/Android | No | partially | |
+| moveFile | Moves the file located at `filepath` to `destPath`. | function | IOS/Android | No | yes | |
+| read | Reads `length` bytes from the given `position` of the file at `path` and returns contents. | function | IOS/Android | No | yes | |
+| write | Write the `contents` to `filepath` at the given random access position. | function | IOS/Android | No | yes | |
+| touch | Sets the modification timestamp `mtime`of the file at `filepath`. | function | IOS/Android | No | partially | |
+| stat | Stats an item at `filepath`. | function | IOS/Android | No | yes | |
+| readDir | Reads the contents of `path`. | function | IOS/Android | No | No | No API on Harmony |
+| readDirAssets | Reads the contents of `dirpath ` in the Android app's assets folder. | function | Android | No | No | Android only |
+| readdir | Node.js style version of `readDir` that returns only the names. | function | IOS/Android | No | No | No API on Harmony |
+| readFileRes | Reads the file named `filename` in the Android app's `res` folder and return contents. | function | Android | No | No | Android only |
+| copyFolder | Copies the contents located at `srcFolderPath` to `destFolderPath`. | function | Windows | No | No | Windows only |
+| copyFileAssets | Copies the file at `filepath` in the Android app's assets folder and copies it to the given `destPath ` path. | function | Android | No | No | Android only |
+| copyFileRes | Copies the file named `filename` in the Android app's res folder and copies it to the given `destPath ` path. | function | Android | No | No | Android only |
+| copyAssetsFileIOS | Reads an image file from Camera Roll and writes to `destPath`. | function | IOS | No | No | IOS only |
+| copyAssetsVideoIOS | Copies a video from assets-library, that is prefixed with 'assets-library://asset/asset.MOV?...' to a specific destination. | function | IOS | No | No | IOS only |
+| existsAssets | Check in the Android assets folder if the item exists. | function | Android | No | No | Android only |
+| existsRes | Check in the Android res folder if the item named `filename` exists. | function | Android | No | No | Android only |
+| downloadFile | Abort the current download job with this ID. | function | IOS/Android | No | No | No API on Harmony |
+| stopDownload | Abort the current download job with this ID. | function | IOS/Android | No | No | No API on Harmony |
+| resumeDownload | Resume the current download job with this ID. | function | IOS | No | No | IOS only |
+| isResumable | Check if the the download job with this ID is resumable with `resumeDownload()`. | function | IOS | No | No | IOS only |
+| completeHandlerIOS | For use when using background downloads, tell iOS you are done handling a completed download. | function | IOS | No | No | IOS only |
+| uploadFiles | Percentage can be computed easily by dividing `totalBytesSent` by `totalBytesExpectedToSend`. | function | IOS/Android | No | No | No API on Harmony |
+| stopUpload | Abort the current upload job with this ID. | function | IOS | No | No | IOS only |
+| getFSInfo | Returns an object with the following properties. | function | IOS/Android | No | No | No API on Harmony |
+| scanFile | Scan the file using [Media Scanner](https://developer.android.com/reference/android/media/MediaScannerConnection). | function | Android | No | No | Android only |
+| getAllExternalFilesDirs | Returns an array with the absolute paths to application-specific directories on all shared/external storage devices where the application can place persistent files it owns. | function | Android | No | No | Android only |
+| pathForGroup | Returns the absolute path to the directory shared for all applications with the same security group identifier. | function | IOS | No | No | IOS only |
+
+## 遗留问题
+
+- HarmonyOS的hash哈希API中关于算法参数algorithm目前仅支持"md5"、"sha1"、 "sha256"，其他相关算法参数目前不支持，问题: [issue#1](https://github.com/react-native-oh-library/react-native-fs/issues/1)
+- 原库部分接口在HarmonyOS中没有对应文件路径常量及接口处理相关逻辑，问题: [issue#2](https://github.com/react-native-oh-library/react-native-fs/issues/2)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/itinance/react-native-fs/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-keyboard-aware-scroll-view.md b/zh-cn/react-native-keyboard-aware-scroll-view.md
new file mode 100644
index 00000000..016108f6
--- /dev/null
+++ b/zh-cn/react-native-keyboard-aware-scroll-view.md
@@ -0,0 +1,134 @@
+> 模板版本：v0.1.3
+
+
+
react-native-keyboard-aware-scroll-view
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-keyboard-aware-scroll-view Releases](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/releases)，并下载适用版本的 tgz 包
+
+进入到工程目录并输入以下命令：
+
+
+
+> [!tip] # 处替换为 tgz 包的路径
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-keyboard-aware-scroll-view@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-keyboard-aware-scroll-view@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React from "react";
+import { TextInput, StyleSheet, ScrollView } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+
+const KasvCom: React.FC = (): JSX.Element => {
+ return (
+ <>
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ input: {
+ width: "90%",
+ marginLeft: "5%",
+ borderWidth: 2,
+ borderColor: "black",
+ height: 40,
+ borderRadius: 10,
+ fontSize: 26,
+ paddingLeft: 6,
+ marginTop: 10,
+ marginBottom: 10,
+ },
+});
+
+export default KasvCom;
+```
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-keyboard-aware-scroll-view Releases](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/releases)
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59;
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+以下属性已验证，详情见 [react-native-keyboard-aware-scroll-view 源库地址](https://github.com/APSL/react-native-keyboard-aware-scroll-view)
+
+**组件 KeyboardAwareScrollView**
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| viewIsInsideTabBar | Adds an extra offset that represents the `TabBarIOS` height. | boolean | NO | IOS | NO |
+| resetScrollToCoords | Coordinates that will be used to reset the scroll when the keyboard hides. | Object: {x: number, y: number} | NO | All | YES |
+| enableAutomaticScroll | When focus in `TextInput` will scroll the position, default is enabled. | boolean | NO | All | YES |
+| extraHeight | Adds an extra offset when focusing the `TextInput`s. | number | NO | All | YES |
+| extraScrollHeight | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. | number | NO | All | YES |
+| enableResetScrollToCoords | Lets the user enable or disable automatic resetScrollToCoords. | boolean | NO | All | YES |
+| keyboardOpeningTime | Sets the delay time before scrolling to new position, default is 250 | number | NO | IOS | NO |
+| keyboardWillShow | What to do when the keyboard is about to appear | (event?) => void | NO | IOS | NO |
+| keyboardDidShow | What to do when the keyboard appears | (event?) => void | NO | All | YES |
+| keyboardWillHide | What to do when the keyboard is about to be hidden | (event?) => void | NO | IOS | NO |
+| keyboardDidHide | What to do when hiding the keyboard | (event?) => void | NO | All | YES |
+| keyboardWillChangeFrame | When the keyboard status is about to change | (event?) => void | NO | IOS | NO |
+| keyboardDidChangeFrame | When the keyboard status changes | (event?) => void | NO | IOS | NO |
+| scrollToPosition | Scroll to specific position with or without animation. | (x: number, y: number, animated: bool = true) => void | NO | All | YES |
+| scrollToEnd | Scroll to end with or without animation. | (animated?: bool = true) => void | NO | All | YES |
+| scrollIntoView | Scrolls an element inside a KeyboardAwareScrollView into view. | (element: React.Element<\*>, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) => { x: number, y: number, animated: boolean } }) => void | NO | All | NO |
+
+## 遗留问题
+
+- [ ] RN0.72.5版本新架构暂未支持UIManager.viewIsDescendantOf() API，该API功能为：判断组件节点嵌套关系，并在callback中返回boolean类型参数。
+
+- 问题说明：KeyboardAwareScrollView组件逻辑为：监听软键盘出现事件，并绑定callback，在callback中利用UIManager.viewIsDescendantOf()判断组件是否为该组件的子组件，返回true则抬升TextInput的高度，并处理相关Props。由于新架构暂未支持该API，目前IOS与Harmony的新架构均不会调用该API的callback，而Android则始终在callback内返回false，导致该组件的键盘出现事件的相关逻辑功能无法生效。
+- 处理现状：由于UIManager.viewIsDescendantOf() API暂无法调用内部callback，现已将其暂时删除，将callback变为外部逻辑。受此影响,KeyboardAwareScrollView组件无法判断当前聚焦的TextInput组件是否为子组件，KeyboardAwareScrollView组件以外的TextInput组件聚焦时也会触发KeyboardAwareScrollView组件的Props设置。且由于oh侧系统软键盘会自动抬起TextInput的高度，KeyboardAwareScrollView组件外的TextInput聚焦时，距离软键盘顶部会有额外的距离。
+
+- 使用建议：KeyboardAwareScrollView组件外不设置可聚焦TextInput组件或将其写入KeyboardAwareScrollView组件slot内。
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/APSL/react-native-keyboard-aware-scroll-view/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-permissions.md b/zh-cn/react-native-permissions.md
new file mode 100644
index 00000000..6ffe75b2
--- /dev/null
+++ b/zh-cn/react-native-permissions.md
@@ -0,0 +1,432 @@
+> 模板版本：v0.1.3
+
+
+
react-native-permissions
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-permissions)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-permissions Releases](https://github.com/react-native-oh-library/react-native-permissions/releases)，并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-permissions@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-permissions@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import { ScrollView, StyleSheet, View, Text, Button } from 'react-native';
+import React from 'react';
+import RTNPermissions, { Permission } from 'react-native-permissions';
+
+const permissionNormal: Permission[] = [
+ 'ohos.permission.APPROXIMATELY_LOCATION',
+ 'ohos.permission.CAMERA',
+ 'ohos.permission.MICROPHONE',
+ 'ohos.permission.READ_CALENDAR',
+ 'ohos.permission.WRITE_CALENDAR',
+ 'ohos.permission.ACTIVITY_MOTION',
+ 'ohos.permission.READ_HEALTH_DATA',
+ 'ohos.permission.DISTRIBUTED_DATASYNC',
+ 'ohos.permission.READ_MEDIA',
+ 'ohos.permission.MEDIA_LOCATION',
+ 'ohos.permission.ACCESS_BLUETOOTH',
+]
+
+export function PermissionsExample() {
+ return (
+
+ {
+ let check = await RTNPermissions.check('ohos.permission.CAMERA');
+ console.info('RTNPermissions===== check', check);
+ }} />
+ {
+ let request = await RTNPermissions.request('ohos.permission.CAMERA');
+ console.info('RTNPermissions===== request', request);
+ }} />
+ {
+ let checkMultiple = await RTNPermissions.checkMultiple(permissionNormal);
+ console.info('RTNPermissions===== checkMultiple', checkMultiple);
+ }} />
+ {
+ let requestMultiple = await RTNPermissions.requestMultiple(permissionNormal);
+ console.info('RTNPermissions===== requestMultiple', requestMultiple);
+ }} />
+
+ );
+}
+
+const styles = StyleSheet.create({
+ sectionContainer: {
+ marginTop: 32,
+ paddingHorizontal: 24,
+ },
+ view: {
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-evenly',
+ flexWrap: 'wrap',
+ margin: 5,
+ }
+});
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "react-native-permissions": "file:../../node_modules/@react-native-oh-tpl/react-native-permissions/harmony/permissions.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "react-native-permissions": "file:../../node_modules/@react-native-oh-tpl/react-native-permissions/harmony/permissions"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 PermissionsPackage
+
+打开 `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}/react-native-permissions/src/main/cpp" ./permissions)
+# 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_permissions)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "PermissionsPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 PermissionsPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+...
++ import {PermissionsPackage} from 'react-native-permissions/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new PermissionsPackage(ctx),
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-permissions Releases](https://github.com/react-native-oh-library/react-native-permissions/releases)
+
+### 权限申请使用的工作流程
+
+应用在访问数据或者执行操作时，需要评估该行为是否需要应用具备相关的权限。如果确认需要目标权限，则需要在应用安装包中申请目标权限。
+
+然后，需要判断目标权限是否属于用户授权类。如果是，应用需要使用动态授权弹框来提供用户授权界面，请求用户授权目标权限。
+
+当用户授予应用所需权限后，应用可成功访问目标数据或执行目标操作。
+
+```
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ ┃ check(ohos.permission.CAMERA) ┃
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ │
+ Is the feature available
+ on this device ?
+ │ ╔════╗
+ ├───────────║ NO ║──────────────┐
+ │ ╚════╝ │
+ ╔═════╗ ▼
+ ║ YES ║ ┌─────────────────────┐
+ ╚═════╝ │ RESULTS.UNAVAILABLE │
+ │ └─────────────────────┘
+ Is the permission
+ requestable ?
+ │ ╔════╗
+ ├───────────║ NO ║──────────────┐
+ │ ╚════╝ │
+ ╔═════╗ ▼
+ ║ YES ║ ┌───────────────────┐
+ ╚═════╝ │ RESULTS.BLOCKED / │
+ │ │ RESULTS.GRANTED │
+ │ └───────────────────┘
+ │
+ ▼
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ ┃ request(ohos.permission.CAMERA) ┃
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ │
+ Does the user accept
+ the request ?
+ │ ╔════╗
+ ├───────────║ NO ║──────────────┐
+ │ ╚════╝ │
+ ╔═════╗ ▼
+ ║ YES ║ ┌─────────────────┐
+ ╚═════╝ │ RESULTS.BLOCKED │
+ │ └─────────────────┘
+ ▼
+ ┌─────────────────┐
+ │ RESULTS.GRANTED │
+ └─────────────────┘
+```
+
+### 权限要求
+
+需要在`entry/src/main/module.json5`中声明权限并创建reason string value。
+
+```
+"requestPermissions": [
+ {
+ "name" : "ohos.permission.PERMISSION1",
+ "reason": "$string:reason",
+ "usedScene": {
+ "abilities": [
+ "FormAbility"
+ ],
+ "when":"inuse"
+ }
+ },
+ {
+ "name" : "ohos.permission.PERMISSION2",
+ "reason": "$string:reason",
+ "usedScene": {
+ "abilities": [
+ "FormAbility"
+ ],
+ "when":"always"
+ }
+ }
+]
+```
+
+reason字段的内容写作规范及建议如下：
+
+ 保持句子简洁、不要加入多余的分割符号。
+
+ 建议句式：用于某事。
+
+ 示例：用于扫码拍照。
+
+```
+ {
+ "name": "reason",
+ "value": "允许应用使用相机。"
+ },
+```
+
+### 权限等级说明
+
+根据权限对于不同等级应用有不同的开放范围，权限类型对应分为以下三种，等级依次提高。
+
+- **normal权限**
+
+ normal 权限允许应用访问超出默认规则外的普通系统资源。这些系统资源的开放（包括数据和功能）对用户隐私以及其他应用带来的风险很小。
+
+ 该类型的权限仅向APL等级为normal及以上的应用开放。
+
+- **system_basic权限**
+
+ system_basic权限允许应用访问操作系统基础服务相关的资源。这部分系统基础服务属于系统提供或者预置的基础功能，比如系统设置、身份认证等。这些系统资源的开放对用户隐私以及其他应用带来的风险较大。
+
+ 该类型的权限仅向APL等级为system_basic及以上的应用开放。
+
+```
+normal权限列表
+ 'ohos.permission.APPROXIMATELY_LOCATION',
+ 'ohos.permission.LOCATION_IN_BACKGROUND'
+ 'ohos.permission.LOCATION'
+ 'ohos.permission.CAMERA',
+ 'ohos.permission.MICROPHONE',
+ 'ohos.permission.READ_CALENDAR',
+ 'ohos.permission.WRITE_CALENDAR',
+ 'ohos.permission.ACTIVITY_MOTION',
+ 'ohos.permission.READ_HEALTH_DATA',
+ 'ohos.permission.DISTRIBUTED_DATASYNC',
+ 'ohos.permission.READ_MEDIA',
+ 'ohos.permission.MEDIA_LOCATION',
+ 'ohos.permission.ACCESS_BLUETOOTH'
+
+system_basic列表
+ 'ohos.permission.READ_WHOLE_CALENDAR'
+ 'ohos.permission.WRITE_WHOLE_CALENDAR'
+ 'ohos.permission.ANSWER_CALL'
+ 'ohos.permission.MANAGE_VOICEMAIL'
+ 'ohos.permission.READ_CONTACTS'
+ 'ohos.permission.WRITE_CONTACTS'
+ 'ohos.permission.READ_CALL_LOG'
+ 'ohos.permission.WRITE_CALL_LOG'
+ 'ohos.permission.READ_CELL_MESSAGES'
+ 'ohos.permission.READ_MESSAGES'
+ 'ohos.permission.RECEIVE_MMS'
+ 'ohos.permission.RECEIVE_SMS'
+ 'ohos.permission.RECEIVE_WAP_MESSAGES'
+ 'ohos.permission.SEND_MESSAGES'
+ 'ohos.permission.WRITE_AUDIO'
+ 'ohos.permission.READ_AUDIO'
+ 'ohos.permission.READ_DOCUMENT'
+ 'ohos.permission.WRITE_DOCUMENT'
+ 'ohos.permission.WRITE_IMAGEVIDEO'
+ 'ohos.permission.READ_IMAGEVIDEO'
+ 'ohos.permission.GET_INSTALLED_BUNDLE_LIST'
+
+```
+
+注：
+ohos.permission.LOCATION_IN_BACKGROUND 允许应用在后台运行时获取设备位置信息。
+由于安全隐私要求，应用不能通过弹窗的形式被授予后台位置权限，应用如果需要使用后台位置权限，需要引导用户到设置界面手动授予。
+申请流程：
+通过弹窗申请前台位置权限。存在两种允许情况：
+申请前台模糊位置权限：ohos.permission.APPROXIMATELY_LOCATION。
+申请前台精确位置权限：ohos.permission.APPROXIMATELY_LOCATION和ohos.permission.LOCATION。
+当用户点击弹窗授予前台位置权限后，应用通过弹窗、提示窗等形式告知用户前往设置界面授予后台位置权限。
+用户在设置界面中的选择“始终允许”应用访问位置信息权限，完成手动授予。
+
+## 方法
+
+| Name | Description | Platform | HarmonyOS Support |
+| ----------------------- | -------------------------- | ----------- | ----------------------- |
+| check | 检查单个权限 | ios,android | yes |
+| checkNotifications | 检查通知权限 | ios,android | yes |
+| openSettings | 打开设置页 | ios,android | yes |
+| request | 设置单个权限 | ios,android | yes |
+| requestNotifications | 设置通知权限 | ios,android | yes |
+| checkMultiple | 检查多个权限 | android | yes |
+| requestMultiple | 设置多个权限 | android | yes |
+| checkLocationAccuracy | 检查设备位置权限 | ios | no(使用check()查询权限) |
+| requestLocationAccuracy | 请求访问设备位置的权限 | ios | no(使用check()设置权限) |
+| openPhotoPicker | 请求访问设备本地图片的权限 | ios | no(使用check()设置权限) |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-permissions/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-progress.md b/zh-cn/react-native-progress.md
new file mode 100644
index 00000000..6d610151
--- /dev/null
+++ b/zh-cn/react-native-progress.md
@@ -0,0 +1,226 @@
+> 模板版本：v0.1.3
+
+
+
react-native-progress
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-progress)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/react-native-progress> Releases](https://github.com/react-native-oh-library/react-native-progress/releases)，并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-progress@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-progress@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { useEffect } from "react";
+import { StyleSheet, View, Text } from "react-native";
+import * as Progress from "react-native-progress";
+
+const ProgressExample = () => {
+ const [progress, setProgress] = React.useState(0);
+ const [indeterminate, setIndeterminate] = React.useState(true);
+
+ useEffect(() => {
+ let interval: ReturnType;
+ const timer = setTimeout(() => {
+ setIndeterminate(false);
+ interval = setInterval(() => {
+ setProgress((prevProgress) => {
+ if (prevProgress >= 1) {
+ return 0;
+ }
+ return Math.min(1, prevProgress + Math.random() / 5);
+ });
+ }, 500);
+ }, 1500);
+ return () => {
+ clearTimeout(timer);
+ clearInterval(interval);
+ };
+ }, []);
+
+ return (
+
+ Progress Example
+
+
+
+
+
+ );
+};
+export default ProgressExample;
+
+const styles = StyleSheet.create({
+ welcome: {
+ fontSize: 20,
+ textAlign: "center",
+ margin: 10,
+ },
+ bar: {
+ flexDirection: "row",
+ justifyContent: "center",
+ },
+ circles: {
+ flexDirection: "row",
+ justifyContent: "center",
+ },
+ progress: {
+ margin: 10,
+ },
+});
+```
+
+## Link
+
+本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+
+如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](/zh-cn/react-native-svg.md)进行引入
+
+## 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52;
+2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58;
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情见[react-native-progress](https://github.com/oblador/react-native-progress)
+
+### Properties for all progress components:
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------ | ---------------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- |
+| animated | Whether or not to animate changes to `progress`. | boolean | No | All | Yes |
+| indeterminate | If set to true, the indicator will spin and `progress` prop will be ignored. | boolean | No | All | Yes |
+| indeterminateAnimationDuration | Sets animation duration in milliseconds when indeterminate is set. | number | No | All | Yes |
+| progress | Progress of whatever the indicator is indicating. A number between 0 and 1. | number | No | All | Yes |
+| color | Fill color of the indicator. | string | No | All | Yes |
+| unfilledColor | Color of the remaining progress. | string | No | All | Yes |
+| borderWidth | Width of outer border, set to `0` to remove. | number | No | All | Yes |
+| borderColor | Color of outer border. | string | No | All | Yes |
+
+### `Progress.Bar`:
+
+All of the props under _Properties_ in addition to the following:
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------- | ------------------------------------------------------------------------------ | ------------------------------- | -------- | -------- | ----------------- |
+| width | Full width of the progress bar, set to `null` to use automatic flexbox sizing. | number \| null | No | All | Yes |
+| height | Height of the progress bar. | number | No | All | Yes |
+| borderRadius | Rounding of corners, set to `0` to disable. | number | No | All | Yes |
+| useNativeDriver | Use native driver for the animations. | boolean | No | All | Yes |
+| animationConfig | Config that is passed into the `Animated` function. | function | No | All | Yes |
+| animationType | Animation type to animate the progress, one of: `decay`, `timing`, `spring`. | 'decay' \| 'timing' \| 'spring' | No | All | Yes |
+
+### `Progress.Circle`:
+
+All of the props under _Properties_ in addition to the following:
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- |
+| size | Diameter of the circle. | number | No | All | Yes |
+| endAngle | Determines the endAngle of the circle. A number between `0` and `1`. The final endAngle would be the number multiplied by 2π | number | No | All | Yes |
+| thickness | Thickness of the inner circle. | number | No | All | Yes |
+| showsText | Whether or not to show a text representation of current progress. | boolean | No | All | Yes |
+| formatText | A function returning a string to be displayed for the textual representation. | function | No | All | Yes |
+| textStyle | Styles for progress text, defaults to a same `color` as circle and `fontSize` proportional to `size` prop. | TextStyle | No | All | Yes |
+| allowFontScaling | Whether or not to respect device font scale setting. | boolean | No | All | Yes |
+| direction | Direction of the circle `clockwise` or `counter-clockwise`. | 'clockwise' \| 'counter-clockwise' | No | All | Yes |
+| strokeCap | Stroke Cap style for the circle `butt`, `square` or `round`. | 'butt' \| 'square' \| 'round' | No | All | Yes |
+| fill | Fill color of the inner circle. | string | No | All | Yes |
+
+### `Progress.Pie`:
+
+All of the props under _Properties_ in addition to the following:
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | -------------------- | ------ | -------- | -------- | ----------------- |
+| size | Diameter of the pie. | number | No | All | Yes |
+
+### `Progress.CircleSnail`:
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------- | ----------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- |
+| animating | If the circle should animate. | boolean | No | All | Yes |
+| hidesWhenStopped | If the circle should be removed when not animating. | boolean | No | All | Yes |
+| size | Diameter of the circle. | number | No | All | Yes |
+| color | Color of the circle, use an array of colors for rainbow effect. | string \| string[] | No | All | Yes |
+| thickness | Thickness of the circle. | number | No | All | Yes |
+| duration | Duration of animation. | number | No | All | Yes |
+| spinDuration | Duration of spin (orbit) animation. | number | No | All | Yes |
+| strokeCap | Stroke Cap style for the circle `butt`, `square` or `round`. | 'butt' \| 'square' \| 'round' | No | All | Yes |
+| direction | Direction in which the circle spins, either "clockwise" or "counter-clockwise" (default). | 'clockwise' \| 'counter-clockwise' | No | All | Yes |
+
+## 遗留问题
+
+1、Progress.Circle 中的属性 fill 在鸿蒙上默认显示黑色和默认无色不一致，定位是 svg 的属性配置有问题，当前通过修改 Circle.js 中默认 fill 的属性进行规避，后续 svg 修复该问题[issue#6](https://github.com/react-native-oh-library/react-native-svg/issues/6)后，修改的代码会移除。
+
+2、Progress.Circle中的属性color, unfilledColor,borderWith,borderColor中圆的颜色，在进行静态配置的时候颜色显示正常，在使用Button进行动态改变的时候，中间的圆会显示黑色和默认的颜色不一致，定位是svg的属性配置有问题，当前通过修改Circle.js中默认fill的属性进行规避，后续 svg 修复该问题[issue#7](https://github.com/react-native-oh-library/react-native-svg/issues/7)后，修改的代码会移除。
+
+3、Progress.pie中的属性color,borderWith,borderColor中内圆的颜色，在进行静态配置的时候颜色显示正常，在使用Button进行动态改变的时候，中间的圆会显示黑色和默认的颜色不一致，定位是svg的属性有问题，pie传入给svg的值是正常的，svg处理逻辑有问题，修改svg修复该问题[issue#8](https://github.com/react-native-oh-library/react-native-svg/issues/8)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/oblador/react-native-progress/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-reanimated-carousel.md b/zh-cn/react-native-reanimated-carousel.md
new file mode 100644
index 00000000..d507dd1c
--- /dev/null
+++ b/zh-cn/react-native-reanimated-carousel.md
@@ -0,0 +1,327 @@
+> 模板版本：v0.1.3
+
+
+
react-native-reanimated-carousel
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/dohooo/react-native-reanimated-carousel)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **yarn**
+
+```bash
+yarn add react-native-reanimated-carousel@^3.5.1
+```
+
+#### **npm**
+
+```bash
+npm install react-native-reanimated-carousel@^3.5.1
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import * as React from "react";
+import { ScrollView } from "react-native-gesture-handler";
+import type { ICarouselInstance } from "react-native-reanimated-carousel";
+import Carousel from "react-native-reanimated-carousel";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import SButton from "./components/SButton";
+import { ElementsText, window } from "./constants";
+import { useWindowDimensions, View, Text, Button } from "react-native";
+import { useSharedValue } from "@react-native-oh-tpl/react-native-reanimated";
+
+const PAGE_WIDTH = window.width;
+
+function App() {
+ const windowWidth = useWindowDimensions().width;
+ const scrollOffsetValue = useSharedValue(1);
+ const [data, setData] = React.useState([...new Array(4).keys()]);
+ const [isVertical, setIsVertical] = React.useState(false);
+ const [isFast, setIsFast] = React.useState(false);
+ const [isAutoPlay, setIsAutoPlay] = React.useState(true);
+ const [isPagingEnabled, setIsPagingEnabled] = React.useState(true);
+ const [value, setValue] = React.useState(0);
+ const ref = React.useRef(null);
+
+ const baseOptions = isVertical
+ ? ({
+ vertical: true,
+ width: windowWidth,
+ height: PAGE_WIDTH / 2,
+ } as const)
+ : ({
+ vertical: false,
+ width: windowWidth,
+ height: PAGE_WIDTH / 2,
+ } as const);
+
+ return (
+
+ {console.log('===1')}}
+ onScrollEnd={() => { console.log('===2') }}
+
+ // onConfigurePanGesture={g => g.enabled(false)}
+ pagingEnabled={isPagingEnabled}
+ onSnapToItem={index => setValue(index)}
+ renderItem={({ index }) => {return
+
+ {`slide${value + 1}`}
+
+ }}
+ />
+
+
+ {
+ setData([...new Array(5).keys()]);
+ }}
+ />
+
+
+ {
+ setData([...new Array(3).keys()]);
+ }}
+ />
+
+
+ {
+ setIsVertical(!isVertical);
+ }}
+ />
+
+
+ {
+ setIsFast(!isFast);
+ }}
+ />
+
+
+ {
+ setIsPagingEnabled(!isPagingEnabled);
+ }}
+ />
+
+
+ {
+ setIsAutoPlay(!isAutoPlay);
+ }}
+ >
+
+
+ {
+ console.info("9999999999",ref.current?.getCurrentIndex());
+ }}
+ />
+
+
+
+ {
+ setData(
+ data.length === 6
+ ? [...new Array(8).keys()]
+ : [...new Array(6).keys()],
+ );
+ }}
+ />
+
+
+ {
+ ref.current?.scrollTo({ count: -1, animated: true });
+ }}
+ />
+
+
+ {
+ ref.current?.scrollTo({ count: 1, animated: true });
+ }}
+ />
+
+
+
+
+ );
+}
+
+export default App;
+
+```
+
+## Link
+
+本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-reanimated 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+
+如未引入请参照[@react-native-oh-tpl/react-native-reanimated 文档的 Link 章节](/zh-cn/react-native-reanimated.md#link)进行引入
+
+## 约束与限制
+
+## 兼容性
+
+在下述版本验证通过:
+
+1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52;
+2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59;
+
+## API
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+>
+> 详情见 [react-native-reanimated-carousel 源库地址](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/README.md)
+
+| 名称 | 描述 | 参数类型 | 是否必填 | Platform | HarmonyOS Support |
+| ------------------------ | -------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
+| data | 要显示的数据数组 | array | yes | All | yes |
+| renderItem | 渲染每个项目的函数。接收一个参数 index，表示当前项的索引 | func | yes | All | yes |
+| loop | 是否循环播放 | boolean | yes | All | yes |
+| enabled | 是否启用轮播图功能 | boolean | yes | All | yes |
+| autoPlay | 是否自动播放 | boolean | yes | All | yes |
+| autoPlayInterval | 自动播放的时间间隔（以毫秒为单位） | number | yes | All | yes |
+| defaultScrollOffsetValue | 初始滚动偏移值 | number | yes | All | yes |
+| onScrollStart | 滚动开始时的回调函数 | func | yes | All | yes |
+| onScrollEnd | 滚动结束时的回调函数 | func | yes | All | yes |
+| onSnapToItem | 切换到新项目时的回调函数。接收一个参数 index，表示新项目的索引 | func | yes | All | yes |
+| pagingEnabled | 是否启用分页滚动 | boolean | yes | All | yes |
+| scrollTo | 滚动到指定项的方法 | func | yes | All | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-sound.md b/zh-cn/react-native-sound.md
new file mode 100644
index 00000000..e5c15ac0
--- /dev/null
+++ b/zh-cn/react-native-sound.md
@@ -0,0 +1,338 @@
+> 模板版本：v0.1.3
+
+
+
react-native-sound
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-sound)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-library/react-native-sound> Releases](https://github.com/react-native-oh-library/react-native-sound/releases)，并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### npm
+
+```bash
+npm install @react-native-oh-tpl/react-native-sound@file:#
+```
+
+#### yarn
+
+```bash
+yarn add @react-native-oh-tpl/react-native-sound@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { useState } from "react";
+import type { PropsWithChildren } from "react";
+import {
+ SafeAreaView,
+ ScrollView,
+ StatusBar,
+ StyleSheet,
+ Text,
+ useColorScheme,
+ View,
+ Button,
+} from "react-native";
+
+import {
+ Colors,
+ DebugInstructions,
+ Header,
+ LearnMoreLinks,
+ ReloadInstructions,
+} from "react-native/Libraries/NewAppScreen";
+
+import Sound from "react-native-sound";
+
+type SectionProps = PropsWithChildren<{
+ title: string;
+ func: () => void;
+}>;
+
+type SliderSectionProps = PropsWithChildren<{
+ duration: number;
+ value: number;
+ func: () => void;
+}>;
+
+function Section({ title, func }: SectionProps): JSX.Element {
+ const isDarkMode = useColorScheme() === "dark";
+ return (
+
+
+ );
+}
+
+function SoundDemo(): JSX.Element {
+ const isDarkMode = useColorScheme() === "dark";
+ const backgroundStyle = {
+ backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+ };
+
+ const navigationOptions = (props: {
+ navigation: { state: { params: { title: any } } };
+ }) => ({
+ title: props.navigation.state.params.title,
+ });
+
+ let sound = new Sound("whoosh.mp3");
+
+ const onPlay = () => {
+ sound.play();
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ sectionContainer: {
+ marginTop: 12,
+ paddingHorizontal: 24,
+ },
+ sectionTitle: {
+ fontSize: 24,
+ fontWeight: "600",
+ },
+ sectionDescription: {
+ marginTop: 8,
+ fontSize: 18,
+ fontWeight: "400",
+ },
+ highlight: {
+ fontWeight: "700",
+ },
+});
+
+export default SoundDemo;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-sound": "file:../../node_modules/@react-native-oh-tpl/react-native-sound/harmony/sound.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-sound": "file:../../node_modules/@react-native-oh-tpl/react-native-sound/harmony/sound"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 SoundPackge
+
+打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
+
+```diff
+txtproject(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-sound/src/main/cpp" ./sound)
+# 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_sound)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "SoundPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx),
+ };
+}
+```
+
+### 在 ArkTs 侧引入 SoundPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+...
++ import { SoundPackage } from 'rnoh-sound/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new SoundPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[<@react-native-oh-library/react-native-sound> Releases](https://github.com/react-native-oh-library/react-native-sound/releases)
+
+## 静态方法
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情请见[react-native-sound](https://github.com/react-native-oh-library/react-native-sound)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------- | -------------------------------- | ------ | -------- | ----------- | ----------------- |
+| setActive | Set the device activation status | string | No | IOS/Android | yes |
+
+## API
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情请见[react-native-sound](https://github.com/react-native-oh-library/react-native-sound)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------- | ---------------------------------------- | ------ | -------- | ----------- | ----------------- |
+| play | Start playing audio. | string | No | IOS/Android | yes |
+| pause | Pause audio playback. | string | No | IOS/Android | yes |
+| stop | Stop playing audio. | string | No | IOS/Android | yes |
+| reset | Reset Audio Status. | string | No | Android | yes |
+| release | Releasing audio resources. | string | No | IOS/Android | yes |
+| getVolume | Obtains the audio volume. | string | No | IOS/Android | yes |
+| setVolume | Setting the Relative Audio Volume. | string | No | IOS/Android | yes |
+| getCurrentTime | Obtains the current playback time point. | string | No | IOS/Android | yes |
+| setCurrentTime | Sets the playback time point. | string | No | IOS/Android | yes |
+| getSpeed | Obtains the playback speed. | string | No | IOS/Android | yes |
+| setSpeed | Setting the Playback Speed | string | No | IOS/Android | yes |
+| isPlaying | Whether the audio is being played | string | No | IOS/Android | yes |
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/zmxv/react-native-sound/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-text-size.md b/zh-cn/react-native-text-size.md
new file mode 100644
index 00000000..062d1a58
--- /dev/null
+++ b/zh-cn/react-native-text-size.md
@@ -0,0 +1,414 @@
+> 模板版本：v0.1.3
+
+
+
react-native-text-size
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-text-size)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息：[<@react-native-oh-tpl/react-native-text-size> Releases](https://github.com/react-native-oh-library/react-native-text-size/releases)，并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令：
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-text-size@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-text-size@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import React, { useState, useEffect } from 'react';
+import {
+ ScrollView,
+ Text,
+ View,
+ Dimensions,
+ TextInput
+} from 'react-native';
+
+import RTNTextSize, { TSFontSpecs, TSFontInfo } from 'react-native-text-size'
+
+export function TextSizeExample() {
+ const [res, setRes] = useState([])
+ const [res2, setRes2] = useState([])
+ const fontFamily = 'HarmonyOS Sans SC'
+ const [texts, setTexts] = useState('I rnTextSize ❤️')
+ const [texts3, setTexts3] = useState('')
+ const [width, setWidth] = useState();
+ const [height, setHeight] = useState();
+ const fontSpecs: TSFontSpecs = {
+ fontFamily: undefined,
+ fontSize: 20,
+ fontStyle: 'normal',
+ fontWeight: '700',
+ }
+ type State = { heights2: number[] }
+ const [texts2, setTexts2] = useState(['I ❤️ rnTextSize', 'I ❤️ rnTextSize using flatHeights', 'Thx for flatHeights', 'test123',])
+ const [heights2, setHeights2] = useState([]);
+ const fontSpecs2: TSFontSpecs = {
+ fontFamily: undefined,
+ fontSize: 20,
+ fontStyle: 'italic',
+ fontWeight: 'bold',
+ }
+ const [key, setKey] = useState({})
+ const [info, setInfo] = useState()
+ const fontSpecs3: TSFontSpecs = {
+ fontFamily: 'harmony',
+ textBreakStrategy: 'balanced',
+ }
+
+ useEffect(() => {
+ const myFun = async () => {
+ const resp = await RTNTextSize.fontFamilyNames();
+ setRes(resp)
+
+ const resp2 = await RTNTextSize.fontNamesForFamilyName(fontFamily);
+ setRes2(resp2)
+
+ setTexts(texts)
+ const width = Dimensions.get('window').width * 0.8
+ const newHeights = await RTNTextSize.measure({
+ text: texts, // array of texts to measure, can include symbols
+ width: width, // max-width of the "virtual" container
+ ...fontSpecs, // RN font specification
+ })
+ setHeight(newHeights.height);
+ setWidth(newHeights.width)
+
+ setTexts2(texts2)
+ const width2 = Dimensions.get('window').width * 0.8
+ const newHeights2 = await RTNTextSize.flatHeights({
+ text: texts2, // array of texts to measure, can include symbols
+ width: width2, // max-width of the "virtual" container
+ ...fontSpecs2, // RN font specification
+ })
+ setHeights2(newHeights2);
+
+ const keyp = await RTNTextSize.specsForTextStyles();
+ setKey(keyp)
+
+ const infos = await RTNTextSize.fontFromSpecs(fontSpecs3);
+ setInfo(infos)
+ }
+ myFun()
+ }, [])
+
+ return (
+
+
+
+ measure:[fontFamily: undefined,fontSize: 20,fontStyle: 'normal', 正斜fontWeight: '700']
+
+
+ {texts}
+
+ { setTexts(value) }}
+ style={{ width: '100%', height: 28, borderWidth: 2, borderColor: 'black' }}
+ />
+
+
+ flatHeights:[fontFamily: undefined,fontSize: 20,fontStyle: 'italic', fontWeight: 'bold']
+
+ {texts2.map(
+ (texts2, index) => (
+
+ {texts2}
+
+ )
+ )}
+ {
+ let value2 =value.split(",");
+ setTexts3(value)
+ setTexts2(value2)
+ }}
+ style={{ width: '100%', height: 28, borderWidth: 2, borderColor: 'black' }}
+ />
+
+ specsForTextStyles:获取系统默认配置的字体的具体信息
+
+
+ {JSON.stringify(key)}
+
+
+ fontFamilyNames:获取系统默认配置的字体
+
+
+ {res}
+
+
+ fontNamesForFamilyName:获取系统字体的属性
+
+
+ {res2}
+
+
+ fontFromSpecs:返回从给定规范中获得的字体特征
+
+
+ {JSON.stringify(info)}
+
+
+
+ )
+}
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-text-size": "file:../../node_modules/@react-native-oh-tpl/react-native-text-size/harmony/text_size.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+
+> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-text-size": "file:../../node_modules/@react-native-oh-tpl/react-native-text-size/harmony/text_size"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 RNTextSizePackage
+
+打开 `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-text-size/src/main/cpp" ./text-size)
+# 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_text_size)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "RNTextSizePackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 RNTextSizePackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+...
++ import { RNTextSizePackage } from 'rnoh-text-size/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new RNTextSizePackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[<@react-native-oh-tpl/react-native-text-size> Releases](https://github.com/react-native-oh-library/react-native-text-size/releases)
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+详情请见[react-native-text-size](https://github.com/react-native-oh-library/react-native-text-size)
+
+**TSMeasureParams**
+
+Plain JS object with this properties (only `text` is required):
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------ | -------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| text | System Name | string[] | Yes | IOS/Android | yes |
+| width | Width | number | No | IOS/Android | yes |
+| fontFamily | System Default font | string | No | IOS/Android | yes |
+| fontWeight | Font Weight | string | No | IOS/Android | yes |
+| fontSize | Font Size | number | No | IOS/Android | yes |
+| fontStyle | Font Style | string | No | IOS/Android | yes |
+| fontVariant | Default is none | array | No | IOS | yes |
+| allowFontScaling | Allow Font Scaling | boolean | No | IOS/Android | yes |
+| letterSpacing | Extra space between characters | number | No | IOS | yes |
+| includeFontPadding | Dfault is true | boolean | No | Android | yes |
+| textBreakStrategy | Dfault is highQuality | string | No | Android | yes |
+| usePreciseWidth | Result will include an exact width.Dfault is false | boolean | No | IOS/Android | yes |
+| lineInfoForLine | Result will include a lineInfo.Dfault is none | number | No | IOS/Android | yes |
+
+**TSFontSpecs**
+
+This parameter is a subset of **TSMeasureParams**, so the details are omitted here.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------- | ------------ | --------------------- | -------- | ----------- | ----------------- |
+| fontFamily | System Name | string | No | IOS/Android | yes |
+| fontWeight | Font Weight | number | No | IOS/Android | yes |
+| fontSize | Font Size | TSFontStyle | No | IOS/Android | yes |
+| fontStyle | Font Style | TSFontWeight | No | IOS/Android | yes |
+| fontVariant | Font Variant | TSFontVariant[]或null | No | IOS/Android | yes |
+| letterSpacing | Font spacing | number | No | IOS/Android | yes |
+
+**TSHeightsParams**
+
+This is an object similar to the one you pass to `measure`, but the `text` option is an array of strings and the `usePreciseWidth` and `lineInfoForLine` options are ignored.
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------ | ------------------------------ | -------- | -------- | ----------- | ----------------- |
+| text | System Name | string[] | Yes | IOS/Android | yes |
+| width | Width | number | No | IOS/Android | yes |
+| fontFamily | System Default font | string | No | IOS/Android | yes |
+| fontWeight | Font Weight | string | No | IOS/Android | yes |
+| fontSize | Font Size | number | No | IOS/Android | yes |
+| fontStyle | Font Style | string | No | IOS/Android | yes |
+| fontVariant | Default is none | array | No | IOS | yes |
+| allowFontScaling | Allow Font Scaling | boolean | No | IOS/Android | yes |
+| letterSpacing | Extra space between characters | number | No | IOS | yes |
+| includeFontPadding | Dfault is true | boolean | No | Android | yes |
+| textBreakStrategy | Dfault is highQuality | string | No | Android | yes |
+
+## API
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------------- | ------------------------------------------------------------------------------- | ------------------------------- | -------- | -------- | ----------------- |
+| measure | Measurement Text | TSMeasureResult | No | All | yes |
+| flatHeights | Measurement Text | number[] | No | All | yes |
+| specsForTextStyles | Get system font information for the running OS | {[key: string]: TSFontForStyle} | No | All | yes |
+| fontFromSpecs | Returns the characteristics of the font obtained from the given specifications. | TSFontInfo | No | All | yes |
+| fontFamilyNames | Returns a Promise for an array of font family names available on the system | string[] | No | All | yes |
+| fontNamesForFamilyName | Return the data of the corresponding font according to the name | string[] | No | All | yes |
+
+## 遗留问题
+
+- [ ] fontFamilyNames&fontNamesForFamilyName问题:需要依赖手机文件font目录下的json文件，该文件目前没有预置在手机目录下，会导致该接口调用为空。后续底层框架侧修复该问题 [issue#1](https://github.com/react-native-oh-library/react-native-text-size/issues/1)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/callstack/react-native-slider/blob/main/LICENSE.md) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-redux.md b/zh-cn/react-redux.md
new file mode 100644
index 00000000..944a3c96
--- /dev/null
+++ b/zh-cn/react-redux.md
@@ -0,0 +1,177 @@
+> 模板版本：v0.1.3
+
+
+
react-redux
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/reduxjs/react-redux?tab=readme-ov-file)
+
+## 安装与使用
+
+#### **yarn**
+
+```bash
+yarn add react-redux@^9.1.0
+```
+
+#### **npm**
+
+```bash
+npm install react-redux@^9.1.0
+```
+
+
+
+下面展示了这个库的基本使用场景：
+
+1.创建一个命名为store.ts的文件
+
+```ts
+import { configureStore } from "@reduxjs/toolkit";
+import counterReducer from "./action/counterSlice";
+import inputReducer from "./action/inputInfoReducer";
+import userReducer from "./action/UserReducer";
+
+export const store = configureStore({
+ reducer: {
+ user: userReducer,
+ },
+});
+
+//从store 本身推断 `RootState` 和 `AppDispatch` 类型
+export type RootState = ReturnType;
+// 推断类型：{posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;
+```
+
+2.创建store.ts的文件后，在<App>的外层放置一个<Provider>，并将 store 作为 prop 传递
+
+```ts
+// 导出组件
+export default function TestPage() {
+ return (
+ // 将store作为props传递给组件，这样组件就能访问到store和dispatch方法了。
+
+
+
+ );
+}
+```
+
+3.创建一个命名为Hooks.ts的文件,虽然可以将 RootState 和 AppDispatch 类型导入每个组件，但最好创建 useDispatch 和 useSelector hooks 类型化版本以供在应用程序中使用。
+
+```ts
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import type { RootState, AppDispatch } from "./store";
+
+// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook = useSelector;
+```
+
+4.定义 Slice State 和 Action Types。每个 slice 文件都应该为其初始 state 值定义一个类型，以便 createSlice 能够推断每个案例 reducer 中的 state 类型。
+
+```ts
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import type { RootState } from "../store";
+
+//定义 slice state 的类型
+interface CounterState {
+ user: {};
+}
+//使用该类型定义初始 state
+const initialState: CounterState = {
+ user: {
+ name: "zhangsna",
+ date: "2000-9-30",
+ email: "130xxxxxxx@qq.com",
+ height: "180",
+ hobby: "study",
+ },
+};
+const counterSlice = createSlice({
+ name: "initInfo",
+ initialState,
+ reducers: {
+ addUser: (state, action: PayloadAction) => {
+ state.user = action.payload;
+ },
+ },
+});
+
+export const { addUser } = counterSlice.actions;
+
+// selectors 等其他代码可以使用导入的 `RootState` 类型
+export const selectCount = (state: RootState) => state.user.user;
+
+export default counterSlice.reducer;
+```
+
+生成的 action creators 将根据你为 reducer 提供的 PayloadAction 类型正确输入以接收 payload 参数。例如，incrementByAmount 需要一个 number 作为其参数。
+
+在某些情况下，TypeScript 可能会不必要地收紧初始 state 的类型。如果发生这种情况，你可以通过使用 as 转换初始 state 来解决它，而不是声明变量的类型：
+
+```ts
+//定义 slice state 的类型
+interface CounterState {
+ user: {};
+}
+```
+
+5.在 React 组件中使用 Redux State 和 Actions
+
+```ts
+import React, { useState } from "react";
+
+import { useAppSelector, useAppDispatch } from "app/hooks";
+
+import { decrement, increment } from "./counterSlice";
+
+export function Counter() {
+ // `state` arg 已经正确被键入 `RootState`
+ const count = useAppSelector((state) => state.counter.value);
+ const dispatch = useAppDispatch();
+
+ // 省略渲染逻辑
+}
+```
+
+### 兼容性
+
+在下述版本验证通过:
+
+1. RNOH：0.72.11;
+ SDK：OpenHarmony(api11) 4.1.0.53;
+ IDE：DevEco Studio 4.1.3.412;
+ ROM：2.0.0.52;
+2. RNOH：0.72.13;
+ SDK：HarmonyOS NEXT Developer Preview1;
+ IDE：DevEco Studio 4.1.3.500;
+ ROM：2.0.0.58;
+
+## 静态方法
+
+详情查看[React Redux官方文档](https://cn.react-redux.js.org/introduction/getting-started)
+
+#### **Hooks**
+
+| Name | Description | Type | Required | HarmonyOS Support |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| useSelector() | From there, you may import any of the listed React Redux hooks APIs and use them within your function components. | function | NO | yes |
+| useDispatch() | This hook returns a reference to the dispatch function from the Redux store. You may use it to dispatch actions as needed. | function | NO | yes |
+| useStore() | This hook returns a reference to the same Redux store that was passed in to the component. | function | NO | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/reduxjs/react-redux/blob/master/LICENSE.md) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-router-dom.md b/zh-cn/react-router-dom.md
new file mode 100644
index 00000000..a14ed82e
--- /dev/null
+++ b/zh-cn/react-router-dom.md
@@ -0,0 +1,106 @@
+> 模板版本：v0.1.3
+
+
+
react-router-dom
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/remix-run/react-router)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **npm**
+
+```bash
+npm i react-router-dom@6.22.1
+```
+
+#### **yarn**
+
+```bash
+yarn add react-router-dom@6.22.1
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```tsx
+import React from "react";
+import { ScrollView } from "react-native";
+import { Route, Routes, MemoryRouter as Router } from "react-router-dom";
+
+const DomDemo = () => {
+ const initialEntries = [
+ "/",
+ { pathname: "/login", state: { stateTest: "stateTestContent" } },
+ { pathname: "/detail", state: { stateTest: "stateTestContent" } },
+ "/index3",
+ ];
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default DomDemo;
+```
+
+## 约束与限制
+
+### 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59;
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+以下属性已验证，详情见 [react-router-dom源库地址](https://github.com/remix-run/react-router)
+
+**Hooks**
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
+| useLocation | This hook returns the current [`location`](https://reactrouter.com/en/main/utils/location) object. This can be useful if you'd like to perform some side effect whenever the current location changes. | Function | NO | All | YES |
+| useNavigate | The `useNavigate` hook returns a function that lets you navigate programmatically, for example in an effect: | Function | NO | All | YES |
+| useOutlet | Returns the element for the child route at this level of the route hierarchy. This hook is used internally by < Outlet > to render child routes. | Function | NO | All | YES |
+| useRoutes | The useRoutes hook is the functional equivalent of < Routes >, but it uses JavaScript objects instead of < Route > elements to define your routes. These objects have the same properties as normal < Route > elements, but they don't require JSX. | Function | NO | All | YES |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/remix-run/react-router/blob/main/LICENSE.md) ，请自由地享受和参与开源。
diff --git a/zh-cn/redux-actions.md b/zh-cn/redux-actions.md
new file mode 100644
index 00000000..94eb2025
--- /dev/null
+++ b/zh-cn/redux-actions.md
@@ -0,0 +1,306 @@
+> 模板版本：v0.1.3
+
+
+
redux-actions
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/redux-utilities/redux-actions)
+
+## 安装与使用
+
+
+
+#### **npm**
+
+```bash
+npm install redux-actions@2.6.5
+
+// typescript 项目需下载对应包的类型声明
+npm i @types/redux-actions -D
+```
+
+#### **yarn**
+
+```bash
+yarn add redux-actions@2.6.5
+
+// typescript 项目需下载对应包的类型声明
+yarn add @types/redux-actions -D
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+运行demo还需安装以下依赖：
+
+```bash
+npm install redux
+npm install react-redux
+```
+
+1.定义state的类型
+
+// LoginType.ts
+
+```ts
+export interface IAppUser {
+ id: string;
+ name: string;
+}
+```
+
+2.定义action
+
+// loginAction.ts
+
+```ts
+import { IAppUser } from "./loginType";
+import { createActions } from "redux-actions";
+
+export const LOGIN_ACTION = {
+ LOGIN: "login",
+ LOGOUT: "logout",
+ CHANGENAME: "changName",
+};
+
+export default createActions({
+ [LOGIN_ACTION.LOGIN]: (appUser: IAppUser) => appUser,
+ [LOGIN_ACTION.LOGOUT]: () => null,
+ [LOGIN_ACTION.CHANGENAME]: (appUser: IAppUser) => appUser,
+});
+```
+
+3.定义reducer
+
+// loginReducer.ts
+
+```ts
+import { LOGIN_ACTION } from "./loginAction";
+import {
+ Action,
+ handleActions as createReducers,
+ combineActions,
+} from "redux-actions";
+import { IAppUser } from "./loginType";
+
+const defaultState = {
+ // defautl value 不能为null
+ appUser: {},
+};
+
+export default createReducers(
+ {
+ // payload 参数名固定，类型推导
+ [LOGIN_ACTION.LOGIN]: (state, { payload }: Action) => {
+ console.log("createReducers LOGIN_ACTION.LOGIN", JSON.stringify(payload));
+ return {
+ ...state,
+ appUser: payload,
+ };
+ },
+ // 异常处理
+ [LOGIN_ACTION.LOGOUT]: {
+ next(state) {
+ console.log("createReducers LOGIN_ACTION.LOGOUT", JSON.stringify({}));
+ return {
+ ...state,
+ appUser: {},
+ };
+ },
+ throw(state) {
+ return state;
+ },
+ },
+ [`${combineActions(LOGIN_ACTION.LOGIN, LOGIN_ACTION.CHANGENAME)}`]: (
+ state,
+ { payload }: Action,
+ ) => {
+ console.log(
+ "createReducers combineActions",
+ JSON.stringify(state.appUser),
+ "action" + JSON.stringify(payload),
+ );
+ return {
+ ...state,
+ appUser: payload,
+ };
+ },
+ },
+ defaultState,
+);
+```
+
+4.定义store
+
+// loginStore.ts
+
+```ts
+import { legacy_createStore as createStore, combineReducers } from "redux";
+import loginReducer from "./loginReducer";
+
+export const rootReducer = combineReducers({
+ login: loginReducer,
+});
+
+const store = createStore(rootReducer);
+
+export type RootState = ReturnType;
+export type AppDispatch = typeof store.dispatch;
+export default store;
+```
+
+5.通过connector将state和action挂载到组件
+
+// loginDemo.tsx
+
+```tsx
+import { connect, ConnectedProps } from "react-redux";
+import { Button, View, Text, StyleSheet } from "react-native";
+import { RootState } from "./loginStore";
+import actions, { LOGIN_ACTION } from "./loginAction";
+
+const mapState = (state: RootState) => ({
+ appUser: state.login.appUser,
+});
+
+const mapDispatch = {
+ onLogin: actions[LOGIN_ACTION.LOGIN],
+ onLogout: actions[LOGIN_ACTION.LOGOUT],
+ onChangeName: actions[LOGIN_ACTION.CHANGENAME],
+};
+
+const connector = connect(mapState, mapDispatch);
+type PropsFromRedux = ConnectedProps;
+
+const Login = (props: PropsFromRedux) => {
+ return (
+
+
+
+ appUser：{JSON.stringify(props.appUser)}
+
+
+
+ {
+ props.onLogin({ id: "1", userName: "123" });
+ }}
+ />
+
+
+ {
+ props.onChangeName({ id: "1", userName: "456" });
+ }}
+ />
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ viewStyle: {
+ display: "flex",
+ flexDirection: "column",
+ width: 300,
+ },
+ viewTextStyle: {
+ marginBottom: 10,
+ },
+ textStyle: {
+ fontSize: 20,
+ },
+});
+
+export default connector(Login);
+```
+
+6.使用
+
+// index.tsx
+
+```tsx
+import { Provider } from "react-redux";
+import { StyleSheet, View } from "react-native";
+import store from "./loginStore";
+import Login from "./loginDemo";
+
+// 导出组件
+export default function ReduxDemo() {
+ return (
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#F5FCFF",
+ },
+
+ counterViewStyle: {
+ backgroundColor: "pink",
+ width: 200,
+ height: 60,
+
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "space-around",
+ },
+});
+```
+
+## 约束与限制
+
+### 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52;
+2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59;
+
+## 静态方法
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| createAction(type, payloadCreator, metaCreator) | Calling createAction with a type will return an action creator for dispatching actions. type must implement toString and is the only required parameter for createAction.payloadCreator must be a function, undefined, or null. If payloadCreator is undefined or null, the identity function is used. metaCreator is an optional function that creates metadata for the payload. It receives the same arguments as the payload creator, but its result becomes the meta field of the resulting action. If metaCreator is undefined or not a function, the meta field is omitted. | Function | no | android/ios | yes |
+| createActions(actionMap[, options], ...identityActions[, options]) | Returns an object mapping action types to action creators. Returns an object mapping action types to action creators. actionMap is an object which can optionally have a recursive data structure, with action types as keys, and whose values must be either. identityActions is an optional list of positional string arguments that are action type strings; these action types will use the identity payload creator. | Function | no | android/ios | yes |
+| handleAction(type, reducer\|reducerMap, defaultState) | Wraps a reducer so that it only handles Flux Standard Actions of a certain type. If a reducer function is passed, it is used to handle both normal actions and failed actions.You can use this form if you know a certain type of action will never fail, like the increment example above. if the reducer argument (reducer) is undefined, then the identity function is used. The third parameter defaultState is required, and is used when undefined is passed to the reducer. | Function | no | android/ios | yes |
+| handleActions(reducerMap, defaultState[, options]) | Creates multiple reducers using handleAction() and combines them into a single reducer that handles multiple actions. Accepts a map where the keys are passed as the first parameter to handleAction() (the action type), and the values are passed as the second parameter (either a reducer or reducer map). The map must not be empty. | Function | no | android/ios | yes |
+| combineActions(...types) | Combine any number of action types or action creators. types is a list of positional arguments which can be action type strings, symbols, or action creators. | Function | no | android/ios | yes |
+
+## 遗留问题
+
+当前推荐使用2.6.5版本，若更新到3.0.0版本原库会有如下已知问题：
+
+- [ ] 编译错误：this package itself specifies a `main` module field that could not be resolved[issue#1967](https://github.com/pmndrs/zustand/discussions/1967)
+- [ ] 运行错误：import.meta' is currently unsupported Buffer size 12286 starts with[issue#394](https://github.com/redux-utilities/redux-actions/issues/394)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/redux-utilities/redux-actions/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/zh-cn/redux-thunk.md b/zh-cn/redux-thunk.md
new file mode 100644
index 00000000..20a017c3
--- /dev/null
+++ b/zh-cn/redux-thunk.md
@@ -0,0 +1,157 @@
+> 模板版本：v0.1.3
+
+
+
redux-thunk
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/reduxjs/redux-thunk)
+
+## 安装与使用
+
+
+
+#### **npm**
+
+```bash
+npm install redux-thunk@3.1.0
+```
+
+#### **yarn**
+
+```bash
+yarn add redux-thunk@3.1.0
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+1.在Redux store中引入redux-thunk中间件
+
+```js
+import React from "react";
+import { Provider } from "react-redux";
+import reducers from "./reducers";
+import { thunk } from "redux-thunk";
+import { legacy_createStore as createStore, applyMiddleware } from "redux";
+import App from "./components/App";
+
+const store = createStore(reducers, applyMiddleware(thunk));
+
+export const TodosExample = () => {
+ return (
+
+
+ );
+};
+```
+
+2.编写一个异步操作的action creator
+
+```
+//使用定时器
+export const addTodoasync=(text) =>{
+ return dispatch => {
+ setTimeout(() => {
+ dispatch(addTodo(text))
+ }, 3000)
+ }
+ }
+
+ //发起网路请求
+export const fetchUser = () => {
+ return (dispatch) => {
+ dispatch({ type: 'FETCH_USER_REQUEST' });
+ fetch('https://jsonplaceholder.typicode.com/users/1')
+ .then((response) => response.json())
+ .then((user) => {
+ dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });
+ }).catch((error) => {
+ dispatch({ type: 'FETCH_USER_FAILURE', payload: error.message });
+ });
+ };
+ ...
+```
+
+3.在组件中dispatch这个action
+
+```
+...
+let AddTodo = ({ dispatch }) => {
+ let input;
+ return (
+
+ ...
+
+ {
+ input = text
+ }}
+ />
+
+ {
+ dispatch(addTodoasync(input))
+ }}
+ >
+ 异步添加
+
+
+ )
+}
+...
+AddTodo = connect()(AddTodo);
+export default AddTodo
+```
+
+## 约束与限制
+
+## 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52;
+2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59;
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+>
+> 详情见 [redux-thunk 源库地址](https://github.com/reduxjs/redux-thunk)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------- | ---------------------------------------- | --------------- | -------- | -------- | ----------------- |
+| thunk | Thunk中间件实例 | ThunkMiddleware | yes | All | yes |
+| ThunkAction | ThunkAction类型继承自Redux Action | Action | no | All | yes |
+| ThunkActionDispatch | 接受一个thunk action创建器并返回一个函数 | Any | no | All | yes |
+| ThunkDispatch | Thunk重载的dispatch接口 | Interface | no | All | yes |
+| ThunkMiddleware | TThunk中间件类型 | Middleware | no | All | yes |
+
+## 静态方法
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------------------------ | ------------------- | -------- | -------- | -------- | ----------------- |
+| withExtraArgument(extraArgument?: ExtraThunkArg) | 创建Thunk中间件方法 | function | no | All | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/reduxjs/redux-thunk?tab=MIT-1-ov-file)，请自由地享受和参与开源。
--
Gitee
+
+
+ 
+
+
+
+ 
+ 
+
+