diff --git a/README.md b/README.md
deleted file mode 100644
index f704017472edd85016e8a6083eef003cdca9a6f6..0000000000000000000000000000000000000000
--- a/README.md
+++ /dev/null
@@ -1,100 +0,0 @@
-> [!WARNING] 本文档仅用于三方库使用指导,不涉及任何 React Native OpenHarmony 框架的信息,且会随着 React Native OpenHarmony 框架持续迭代更新,当前版本不代表最终展示版本。
-
-# 简介
-
-> 如果你在找如何搭建环境的文档,请移步开发文档的 [搭建开发环境](https://react-native-oh-library.gitee.io/docs/#/zh-cn/environment) 章节。
-
-## 概述
-
-该文档旨在帮助开发者在 HarmonyOS 平台使用 React Native OpenHarmony 的第三方库,并呈现每个三方库的信息。
-
-## 贡献文档
-
-欢迎您参与贡献,我们鼓励开发者以各种方式参与文档反馈和贡献。
-
-您可以对现有文档进行评价、简单更改、反馈文档质量问题、贡献您的原创内容,详细请参考[贡献文档](/zh-cn/contribute.md)。
-
-## RNOH 三方库总览
-
->[!tip] NPM 公仓坐标:@react-native-oh-tpl
-
-| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | Releases | 文档链接 |
-| :--: | :--------------------------------------: | :-----------: | :-------: | :--------------------------------------: | :--------------------------------------: |
-| 1 | [@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage) | 1.21.1 | 是 | [@react-native-oh-tpl/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](/zh-cn/react-native-async-storage-async-storage.md) |
-| 2 | [@react-native-clipboard/clipboard](https://github.com/react-native-clipboard/clipboard) | 1.13.2 | 是 | [@react-native-oh-tpl/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](/zh-cn/react-native-clipboard-clipboard.md) |
-| 3 | [@react-native-community/datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker) | 7.6.2 | 是 | [@react-native-oh-tpl/datetimepicker](https://github.com/react-native-oh-library/datetimepicker/releases) | [链接](/zh-cn/react-native-community-datetimepicker.md) |
-| 4 | [@shopify/flash-list](https://github.com/Shopify/flash-list) | 1.6.3 | 否 | [@react-native-oh-tpl/flash-list](https://github.com/react-native-oh-library/flash-list/releases) | [链接](/zh-cn/shopify-flash-list.md) |
-| 5 | [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) | 6.4.1 | 是 | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](/zh-cn/lottie-react-native.md) |
-| 6 | [@react-native-picker/picker](https://github.com/react-native-picker/picker) | 2.5.1 | 否 | [@react-native-oh-tpl/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](/zh-cn/react-native-picker-picker.md) |
-| 7 | [@react-native-community/progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android) | 1.0.4 | 是 | [@react-native-oh-tpl/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](/zh-cn/react-native-community-progress-bar-android.md) |
-| 8 | [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox) | 0.5.16 | 否 | [@react-native-oh-tpl/react-native-checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](/zh-cn/react-native-community-checkbox.md) |
-| 9 | [react-native-exception-handler](https://github.com/a7ul/react-native-exception-handler) | 2.10.10 | 否 | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](/zh-cn/react-native-exception-handler.md) |
-| 10 | [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) | 8.6.3 | 否 | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](/zh-cn/react-native-fast-image.md) |
-| 11 | [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) | 2.12.1 | 是 | [@react-native-oh-tpl/react-native-gesture-handler](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) | [链接](/zh-cn/react-native-gesture-handler.md) |
-| 12 | [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) | 7.0.3 | 是 | [@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/react-native-image-picker/releases) | [链接](/zh-cn/react-native-image-picker.md) |
-| 13 | [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) | 3.0.0-alpha.1 | 是 | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](/zh-cn/react-native-linear-gradient.md) |
-| 14 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](/zh-cn/react-native-masked-view-masked-view.md) |
-| 15 | [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) | 11.1.0 | 是 | [@react-native-oh-tpl/netinfo](https://github.com/react-native-oh-library/react-native-netinfo/releases) | [链接](/zh-cn/react-native-community-netinfo.md) |
-| 16 | [react-native-pager-view](https://github.com/callstack/react-native-pager-view) | 6.2.2 | 是 | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](/zh-cn/react-native-pager-view.md) |
-| 17 | [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) | 4.7.4 | 是 | [@react-native-oh-tpl/react-native-safe-area-context](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | [链接](/zh-cn/react-native-safe-area-context.md) |
-| 18 | [react-native-screens](https://github.com/software-mansion/react-native-screens) | 3.29.0 | 是 | [react-native-screens](https://github.com/software-mansion/react-native-screens/releases) | [链接](/zh-cn/react-native-screens.md) |
-| 19 | [@react-native-community/slider](https://github.com/callstack/react-native-slider) | 4.4.3 | 是 | [@react-native-oh-tpl/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](/zh-cn/react-native-community-slider.md) |
-| 20 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](/zh-cn/react-native-SmartRefreshLayout.md) |
-| 21 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](/zh-cn/react-native-svg.md) |
-| 22 | [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/6.x/packages/react-native-tab-view) | 3.5.2 | - | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-native-tab-view.md) |
-| 23 | [react-native-video](https://github.com/react-native-video/react-native-video) | 5.2.1 | 是 | [@react-native-oh-tpl/react-native-video](https://github.com/react-native-oh-library/react-native-video) | [链接](/zh-cn/react-native-video.md) |
-| 24 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](/zh-cn/react-native-webview.md) |
-| 25 | [@react-navigation/elements](https://github.com/react-navigation/react-navigation/tree/6.x/packages/elements) | 1.3.21 | - | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-elements.md) |
-| 26 | [crypto-js](https://github.com/brix/crypto-js/tree/4.2.0) | 4.2.0 | - | [crypto-js](https://github.com/brix/crypto-js/tree/4.2.0) | [链接](/zh-cn/crypto-js.md) |
-| 27 | [deepmerge](https://github.com/TehShrike/deepmerge) | 4.3.1 | - | [deepmerge](https://github.com/TehShrike/deepmerge/releases) | [链接](/zh-cn/deepmerge.md) |
-| 28 | [htmlparser2](https://github.com/fb55/htmlparser2) | 9.1.0 | - | [htmlparser2](https://github.com/fb55/htmlparser2/releases) | [链接](/zh-cn/htmlparser2.md) |
-| 29 | [js-beautify](https://github.com/beautifier/js-beautify) | 1.14.9 | - | [js-beautify](https://github.com/beautifier/js-beautify/releases) | [链接](/zh-cn/js-beautify) |
-| 30 | [lodash](https://github.com/lodash/lodash/tree/4.17.21) | 4.17.21 | - | [lodash](https://github.com/lodash/lodash//releases) | [链接](/zh-cn/lodash.md) |
-| 31 | [mobx-react](https://github.com/mobxjs/mobx/tree/mobx-react%407.6.0) | 7.6.0 | - | [mobx-react](https://github.com/mobxjs/mobx/tree/mobx-react%407.6.0) | [链接](/zh-cn/mobx-react.md) |
-| 32 | [mobx](https://github.com/mobxjs/mobx/tree/mobx%406.10.0) | 6.10.0 | - | [mobx](https://github.com/mobxjs/mobx/tree/mobx%406.10.0) | [链接](/zh-cn/mobx.md) |
-| 33 | [parse5](https://github.com/inikulin/parse5) | 7.1.2 | - | [parse5](https://github.com/inikulin/parse5/releases) | [链接](/zh-cn/parse5.md) |
-| 34 | [prop-types](https://github.com/facebook/prop-types/tree/v15.8.1) | 15.8.1 | - | [prop-types](https://github.com/facebook/prop-types/tree/v15.8.1) | [链接](/zh-cn/prop-types.md) |
-| 35 | [react-i18next](https://github.com/i18next/react-i18next) | 8.6.3 | - | [react-i18next](https://github.com/i18next/react-i18next/releases) | [链接](/zh-cn/react-i18next.md) |
-| 36 | [react-native-action-button](https://github.com/mastermoo/react-native-action-button) | 2.8.5 | - | [react-native-action-button](https://github.com/mastermoo/react-native-action-button/releases) | [链接](/zh-cn/react-native-action-button.md) |
-| 37 | [react-native-autoheight-webview](https://github.com/react-native-oh-library/react-native-autoheight-webview) | 1.6.5 | - | [@react-native-oh-tpl/react-native-autoheight-webview](https://github.com/react-native-oh-library/react-native-autoheight-webview/releases) | [链接](/zh-cn/react-native-autoheight-webview.md) |
-| 38 | [@react-native-camera-roll/camera-roll](https://github.com/react-native-oh-library/react-native-cameraroll) | 6.0.0 | 是 | [@react-native-oh-tpl/camera-roll](https://github.com/react-native-oh-library/react-native-cameraroll/releases) | [链接](/zh-cn/react-native-cameraroll.md) |
-| 39 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](/zh-cn/react-native-masked-view-masked-view.md) |
-| 40 | [@react-native-community/progress-view](https://github.com/react-native-progress-view/progress-view) | 1.4.2 | 是 | [@react-native-community/progress-view](https://github.com/react-native-oh-library/progress-view/releases) | [链接](/zh-cn/react-native-community-progress-view.md) |
-| 41 | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control) | 2.5.0 | - | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control/releases) | [链接](/zh-cn/react-native-community-segmented-control.md) |
-| 42 | [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv) | 3.4.9 | - | [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv/releases) | [链接](/zh-cn/react-native-dotenv.md) |
-| 43 | [@react-native-community/geolocation](https://github.com/michalchudziak/react-native-geolocation) | 3.1.0 | 是 | [@react-native-oh-tpl/react-native-geolocation](https://github.com/react-native-oh-library/react-native-geolocation/releases) | [链接](/zh-cn/react-native-geolocation.md) |
-| 44 | [react-native-qrcode-svg](https://github.com/awesomejerry/react-native-qrcode-svg) | 6.2.0 | - | [@react-native-oh-tpl/react-native-qrcode-svg](https://github.com/react-native-oh-library/react-native-qrcode-svg/releases) | [链接](/zh-cn/react-native-qrcode-svg.md) |
-| 45 | [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) | 3.6.0 | - | [@react-native-oh-tpl/react-native-reanimated](https://github.com/react-native-oh-library/react-native-reanimated/releases) | [链接](/zh-cn/react-native-reanimated.md) |
-| 46 | [react-native-render-html](https://github.com/meliorence/react-native-render-html) | 6.3.4 | - | [react-native-render-html](https://github.com/meliorence/react-native-render-html/releases) | [链接](/zh-cn/react-native-render-html.md) |
-| 47 | [react-native-section-list-get-item-layout](https://github.com/jsoendermann/rn-section-list-get-item-layout) | 2.2.3 | - | [react-native-section-list-get-item-layout](https://github.com/jsoendermann/rn-section-list-get-item-layout/releases) | [链接](/zh-cn/react-native-section-list-get-item-layout.md) |
-| 48 | [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) | 10.0.3 | - | [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons/releases) | [链接](/zh-cn/react-native-vector-icons.md) |
-| 49 | [react-native-view-shot](https://github.com/gre/react-native-view-shot) | 3.8.0 | 否 | [@react-native-oh-tpl/react-native-view-shot](https://github.com/react-native-oh-library/react-native-view-shot/releases) | [链接](/zh-cn/react-native-view-shot.md) |
-| 50 | [ @react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | 6.5.11 | - | [ @react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | [链接](/zh-cn/react-navigation-bottom-tabs.md) |
-| 51 | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native) | 6.1.9 | - | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native/) | [链接](/zh-cn/react-navigation-native.md) |
-| 52 | [@react-navigation/stack](https://github.com/react-navigation/react-navigation/tree/6.x/packages/stack) | 6.3.19 | - | [@react-navigation/stack](https://github.com/react-navigation/react-navigation/tree/6.x/packages/stack) | [链接](/zh-cn/react-navigation-stack.md) |
-| 53 | [recyclerlistview](https://github.com/Flipkart/recyclerlistview) | 4.2.0 | - | [recyclerlistview](https://github.com/Flipkart/recyclerlistview/releases) | [链接](/zh-cn/recyclerListView.md) |
-| 54 | [rn-placeholder](https://github.com/mfrachet/rn-placeholder) | 3.0.3 | - | [rn-placeholder](https://github.com/mfrachet/rn-placeholder/releases) | [链接](/zh-cn/rn-placeholder.md) |
-| 55 | [styled-components](https://github.com/styled-components/styled-components) | 6.1.8 | - | [styled-components](https://github.com/styled-components/styled-components/releases) | [链接](/zh-cn/styled-components.md) |
-| 56 | [styled-system](https://github.com/react-native-picker/picker) | 5.1.5 | - | [styled-system](https://github.com/styled-system/styled-system) | [链接](/zh-cn/styled-system.md) |
-| 57 | [jeanregisser/react-native-slider](https://github.com/react-native-oh-library/jeanregisser-react-native-slider) | 0.11.0 | - | [jeanregisser/react-native-slider](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/releases) | [链接](/zh-cn/jeanregisser-react-native-slider.md) |
-| 58 | [js-beautify](https://github.com/beautifier/js-beautify) | 1.15.1 | - | [js-beautify](https://github.com/beautifier/js-beautify/releases) | [链接](/zh-cn/js-beautify.md) |
-| 59 | [react-native-base64](https://github.com/eranbo/react-native-base64) | 0.2.1 | - | [react-native-base64](https://github.com/eranbo/react-native-base64/releases) | [链接](/zh-cn/react-native-base64.md) |
-| 60 | [react-native-check-box](https://github.com/crazycodeboy/react-native-check-box) | 2.1.0 | - | [react-native-check-box](https://github.com/crazycodeboy/react-native-check-box/releases) | [链接](/zh-cn/react-native-check-box.md) |
-| 61 | [@react-native-community/blur](https://github.com/Kureev/react-native-blur) | 4.4.0 | 是 | [@react-native-oh-tpl/blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) | [链接](/zh-cn/react-native-community-blur.md) |
-| 62 | [@react-native-community/push-notification-ios](https://github.com/react-native-push-notification/ios) | 1.11.0 | 否 | [@react-native-community/push-notification-ios](https://github.com/react-native-oh-library/react-native-push-notification-ios/releases) | [链接](/zh-cn/react-native-community-push-notification-ios.md) |
-| 63 | [@react-native-cookies/cookies](https://github.com/react-native-cookies/cookies) | 6.2.1 | 否 | [@react-native-cookies/cookies](https://github.com/react-native-oh-library/react-native-cookies/releases) | [链接](/zh-cn/react-native-cookies.md) |
-| 64 | [react-native-crypto-js](https://github.com/imchintan/react-native-crypto-js) | 1.0.0 | - | [react-native-crypto-js](https://github.com/imchintan/react-native-crypto-js/releases) | [链接](/zh-cn/react-native-crypto-js.md) |
-| 65 | [react-native-maps](https://github.com/react-native-maps/react-native-maps) | 1.10.3 | 是 | [react-native-maps](https://github.com/react-native-maps/react-native-maps/releases) | [链接](/zh-cn/react-native-maps.md) |
-| 66 | [react-native-pdf](https://github.com/wonday/react-native-pdf) | 6.7.4 | 是 | [react-native-pdf](https://github.com/react-native-oh-library/react-native-pdf/releases) | [链接](/zh-cn/react-native-pdf.md) |
-| 67 | [react-native-redash](https://github.com/wcandillon/react-native-redash/) | 18.1.3 | - | [react-native-redash](https://github.com/wcandillon/react-native-redash/releases) | [链接](/zh-cn/react-native-redash.md) |
-| 68 | [react-native-snap-carousel](https://github.com/meliorence/react-native-snap-carousel) | 3.9.1 | - | [react-native-snap-carousel](https://github.com/react-native-oh-library/react-native-snap-carousel/releases) | [链接](/zh-cn/react-native-snap-carousel.md) |
-| 69 | [react-native-transitiongroup](https://github.com/madsleejensen/react-native-transitiongroup) | 1.2.0 | - | [react-native-transitiongroup](https://github.com/react-native-oh-library/react-native-transitiongroup/releases) | [链接](/zh-cn/react-native-transitiongroup.md) |
-| 70 | [react-native-translucent-modal](https://github.com/23mf/react-native-translucent-modal) | 1.1.0 | - | [react-native-translucent-modal](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) | [链接](/zh-cn/react-native-translucent-modal.md) |
-| 71 | [redux](https://github.com/reduxjs/redux) | 5.0.1 | - | [redux](https://github.com/reduxjs/redux/releases) | [链接](/zh-cn/redux.md) |
-| 72 | [redux-logger](https://github.com/LogRocket/redux-logger) | 3.0.6 | - | [redux-logger](https://github.com/LogRocket/redux-logger/releases) | [链接](/zh-cn/redux-logger.md) |
-| 73 | [redux-persist](https://github.com/rt2zz/redux-persist) | 6.0.0 | - | [redux-persist](https://github.com/rt2zz/redux-persist/releases) | [链接](/zh-cn/redux-persist.md) |
-
-
-## 社区
-
-[Github Organization: react-native-oh-library](https://github.com/react-native-oh-library)
\ No newline at end of file
diff --git a/_sidebar.md b/_sidebar.md
deleted file mode 100644
index b2626402efc5eb63762e1f5923284e2ae3545cbc..0000000000000000000000000000000000000000
--- a/_sidebar.md
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-- [首页](/zh-cn/README.md)
-- [贡献文档](/zh-cn/contribute.md)
-- [文档模板](/zh-cn/model.md)
-- 三方库说明文档合集
- - RN原生库
- - [@react-native-async-storage/async-storage](/zh-cn/react-native-async-storage-async-storage.md)
- - [react-native-cameraroll](/zh-cn/react-native-cameraroll.md)
- - [@react-native-clipboard/clipboard](/zh-cn/react-native-clipboard-clipboard.md)
- - [@react-native-community/checkbox](/zh-cn/react-native-community-checkbox.md)
- - [@react-native-community/datetimepicker](/zh-cn/react-native-community-datetimepicker.md)
- - [@react-native-community/netinfo](/zh-cn/react-native-community-netinfo.md)
- - [@react-native-community/progress-bar-android](/zh-cn/react-native-community-progress-bar-android.md)
- - [@react-native-community/progress-view](/zh-cn/react-native-community-progress-view.md)
- - [@react-native-community/slider](/zh-cn/react-native-community-slider.md)
- - [react-native-exception-handler](/zh-cn/react-native-exception-handler.md)
- - [react-native-fast-image](/zh-cn/react-native-fast-image.md)
- - [react-native-geolocation](/zh-cn/react-native-geolocation.md)
- - [react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)
- - [react-native-image-picker](/zh-cn/react-native-image-picker.md)
- - [react-native-linear-gradient](/zh-cn/react-native-linear-gradient.md)
- - [@react-native-masked-view/masked-view](/zh-cn/react-native-masked-view-masked-view.md)
- - [react-native-pager-view](/zh-cn/react-native-pager-view.md)
- - [@react-native-picker/picker](/zh-cn/react-native-picker-picker.md)
- - [react-native-reanimated](/zh-cn/react-native-reanimated.md)
- - [react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md)
- - [react-native-SmartRefreshLayout](/zh-cn/react-native-SmartRefreshLayout.md)
- - [react-native-svg](/zh-cn/react-native-svg.md)
- - [react-native-vector-icons](/zh-cn/react-native-vector-icons.md)
- - [react-native-video](/zh-cn/react-native-video.md)
- - [react-native-view-shot](/zh-cn/react-native-view-shot.md)
- - [react-native-webview](/zh-cn/react-native-webview.md)
- - [@shopify/flash-list](/zh-cn/shopify-flash-list.md)
- - [@react-native-community/blur](/zh-cn/react-native-community-blur.md)
- - [@react-native-community/push-notification-ios](/zh-cn/react-native-community-push-notification-ios.md)
- - [react-native-cookies](/zh-cn/react-native-cookies.md)
- - [react-native-maps](/zh-cn/react-native-maps.md)
- - [react-native-pdf](/zh-cn/react-native-pdf.md)
- - RN JS库
- - [lottie-react-native](/zh-cn/lottie-react-native.md)
- - [react-i18next](/zh-cn/react-i18next.md)
- - [react-native-action-button](/zh-cn/react-native-action-button.md)
- - [react-native-autoheight-webview](/zh-cn/react-native-autoheight-webview.md)
- - [@react-native-community/segmented-control](/zh-cn/react-native-community-segmented-control.md)
- - [react-native-dotenv](/zh-cn/react-native-dotenv.md)
- - [react-native-qrcode-svg](/zh-cn/react-native-qrcode-svg.md)
- - [react-native-render-html](/zh-cn/react-native-render-html.md)
- - [react-native-screens](/zh-cn/react-native-screens.md)
- - [react-native-section-list-get-item-layout](zh-cn/react-native-section-list-get-item-layout.md)
- - [react-native-tab-view](/zh-cn/react-native-tab-view.md)
- - [@react-navigation/bottom-tabs](/zh-cn/react-navigation-bottom-tabs.md)
- - [@react-navigation/elements](/zh-cn/react-navigation-elements.md)
- - [@react-navigation/native](/zh-cn/react-navigation-native.md)
- - [@react-navigation/stack](/zh-cn/react-navigation-stack.md)
- - [react-navigation](/zh-cn/react-navigation)
- - [recyclerlistview](/zh-cn/recyclerlistview.md)
- - [rn-placeholder](/zh-cn/rn-placeholder.md)
- - [jeanregisser/react-native-slider](/zh-cn/jeanregisser-react-native-slider.md)
- - [react-native-base64](/zh-cn/react-native-base64.md)
- - [react-native-check-box](/zh-cn/react-native-check-box.md)
- - [react-native-crypto-js](/zh-cn/react-native-crypto-js.md)
- - [react-native-redash](/zh-cn/react-native-redash.md)
- - [react-native-snap-carousel](/zh-cn/react-native-snap-carousel.md)
- - [react-native-transitiongroup](/zh-cn/react-native-transitiongroup.md)
- - [react-native-translucent-modal](/zh-cn/react-native-translucent-modal.md)
- - 纯JS库
- - [crypto-js](/zh-cn/crypto-js.md)
- - [deepmerge](/zh-cn/deepmerge.md)
- - [htmlparser2](/zh-cn/htmlparser2.md)
- - [js-beautify](/zh-cn/js-beautify.md)
- - [lodash](/zh-cn/lodash.md)
- - [mobx-react](/zh-cn/mobx-react.md)
- - [mobx](/zh-cn/mobx.md)
- - [parse5](/zh-cn/parse5.md)
- - [prop-types](/zh-cn/prop-types.md)
- - [styled-components](/zh-cn/styled-components.md)
- - [styled-system](/zh-cn/styled-system.md)
- - [redux](/zh-cn/redux.md)
- - [redux-logger](/zh-cn/redux-logger.md)
- - [redux-persist](/zh-cn/redux-persist.md)
- - [qrcode-generator](/zh-cn/qrcode-generator.md)
diff --git a/zh-cn/EventBus.md b/zh-cn/EventBus.md
new file mode 100644
index 0000000000000000000000000000000000000000..9f94ec7a19fac92e19fe82564fa092a851944723
--- /dev/null
+++ b/zh-cn/EventBus.md
@@ -0,0 +1,325 @@
+模板版本:v0.1.3
+
+
+
EventBus
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/krasimir/EventBus)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm i eventbusjs@0.2.0
+```
+
+#### **yarn**
+
+```bash
+yarn add eventbusjs@0.2.0
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```tsx
+import { useState, createContext } from "react";
+import {
+ View,
+ Button,
+ StyleSheet,
+ ScrollView,
+ Text,
+ TextInput,
+} from "react-native";
+import EventBus from "eventbusjs";
+import EventBus3 from "eventbusjs";
+const TAG = "EventBus";
+const MyContext = createContext("null");
+
+const styles = StyleSheet.create({
+ main: {
+ height: "100%",
+ },
+ mainItem: {
+ marginTop: 20,
+ },
+ container: {
+ paddingTop: 10,
+ paddingBottom: 10,
+ paddingLeft: 20,
+ paddingRight: 20,
+ },
+ box: {
+ marginTop: 10,
+ marginBottom: 10,
+ marginLeft: 20,
+ marginRight: 20,
+ height: 100,
+ borderWidth: 1,
+ borderColor: "#000",
+ overflow: "scroll",
+ },
+ title: {
+ fontSize: 14,
+ fontWeight: "bold",
+ },
+ inputWrap: {
+ disPlay: "flex",
+ },
+ inputText: {
+ width: "100%",
+ height: 40,
+ borderWidth: 1,
+ borderColor: "gray",
+ marginBottom: 10,
+ },
+});
+
+function eventTest() {
+ console.warn(`${TAG}-----,成功派发test_event类型的eventTest事件`);
+}
+
+var TestParamsClass1 = function (this: any) {
+ this.className = "TestParamsClass1";
+ this.doSomeThing = function (
+ event: Event,
+ param1: number | string,
+ param2: number | string,
+ ) {
+ console.warn(
+ `${TAG},className=${this.className},event=${JSON.stringify(event)},params=${param1}--${param2}`,
+ );
+ };
+};
+var TestParamsClass2 = function (this: any) {
+ this.className = "TestParamsClass2";
+ this.ready = function (param1: number | string, param2: number | string) {
+ EventBus3.dispatch("custom_event", this, param1, param2);
+ };
+};
+var p1 = new (TestParamsClass1 as any)();
+var p2 = new (TestParamsClass2 as any)();
+
+function EventBusDemo() {
+ const [msg, setMsg] = useState("");
+ const [msgParams, setMsgParams] = useState("");
+ const [firstVal, setFirstVal] = useState("");
+ const [secondVal, setSecondVal] = useState("");
+ const [onOff, setOnOff] = useState(true);
+ function handleAdd() {
+ const has = EventBus.hasEventListener("test_event", eventTest, 0);
+ if (has) {
+ setMsg("eventBus中已经存在test_evnt类型的eventTest事件");
+ console.log(`${TAG},eventBus中已经存在test_evnt类型的eventTest事件`);
+ } else {
+ EventBus.addEventListener("test_event", eventTest, 0);
+ setMsg("成功添加test_event类型的eventTest事件");
+ console.log(`${TAG},成功添加test_event类型的eventTest事件`);
+ }
+ }
+
+ function handleHas() {
+ let has = EventBus.hasEventListener("test_event", eventTest, 0);
+ setMsg(
+ has
+ ? "已存在test_event类型的eventTest事件"
+ : "不存在test_event类型的eventTest事件",
+ );
+ console.log(
+ `${TAG},${has ? "已存在test_event类型的eventTest事件" : "不存在test_event类型的eventTest事件"}`,
+ );
+ }
+
+ function handleRemove() {
+ let has = EventBus.hasEventListener("test_event", eventTest, 0);
+ if (has) {
+ EventBus.removeEventListener("test_event", eventTest, 0);
+ setMsg("已删除test_event类型的eventTest事件");
+ console.log(`${TAG},已删除test_event类型的eventTest事件`);
+ } else {
+ setMsg("未找到test_event类型的eventTest事件");
+ console.log(`${TAG},未找到test_event类型的eventTest事件`);
+ }
+ }
+
+ function handleDispatch() {
+ let has = EventBus.hasEventListener("test_event", eventTest, 0);
+ if (has) {
+ EventBus.dispatch("test_event");
+ setMsg("成功执行test_event类型的eventTest事件");
+ console.log(`${TAG},成功执行test_event类型的eventTest事件`);
+ } else {
+ setMsg("test_event类型的eventTest事件已被删除或未找到事件");
+ console.log(`${TAG},test_event类型的eventTest事件已被删除或未找到事件`);
+ }
+ }
+
+ function handleGet() {
+ setMsg(`${JSON.stringify(EventBus.getEvents())}`);
+ console.log(`${TAG},${JSON.stringify(EventBus.getEvents())}`);
+ }
+
+ function handleAddForParams() {
+ let has = EventBus3.hasEventListener("custom_event", p1.doSomeThing, p1);
+ if (has) {
+ setMsgParams("eventBus中已存在custom_event类型的p1.doSomeThing事件");
+ console.log(
+ `${TAG},eventBus中已存在custom_event类型的p1.doSomeThing事件`,
+ );
+ } else {
+ if (firstVal.length <= 1 || secondVal.length <= 1) {
+ console.error("参数长度不符合预期");
+ } else {
+ EventBus3.addEventListener("custom_event", p1.doSomeThing, p1);
+ setMsgParams("成功添加custom_event类型的p1.doSomeThing事件");
+ console.log(`${TAG},'成功添加custom_event类型的p1.doSomeThing事件'`);
+ setOnOff(true);
+ }
+ }
+ }
+ function handleDispatchForParams() {
+ if (onOff) {
+ let has = EventBus3.hasEventListener("custom_event", p1.doSomeThing, p1);
+ if (has) {
+ p2.ready(firstVal, secondVal);
+ setMsgParams(`派发事件成功,param1=${firstVal},param2=${secondVal}`);
+ console.log(
+ `${TAG},派发事件成功,param1=${firstVal},param2=${secondVal}`,
+ );
+ setOnOff(false);
+ } else {
+ setMsgParams(
+ "custom_event类型的p1.doSomeThing事件已被删除或未找到事件",
+ );
+ console.log(
+ `${TAG},custom_event类型的p1.doSomeThing事件已被删除或未找到事件`,
+ );
+ }
+ } else {
+ setMsgParams("请先移除旧的p1.doSomeThing事件");
+ console.log(`${TAG},请先移除旧的p1.doSomeThing事件`);
+ }
+ }
+ function handleRemoveForParams() {
+ setOnOff(true);
+ let has = EventBus3.hasEventListener("custom_event", p1.doSomeThing, p1);
+ if (has) {
+ EventBus3.removeEventListener("custom_event", p1.doSomeThing, p1);
+ setMsgParams("成功删除custom_event类型的p1.doSomeThing事件");
+ console.log(`${TAG},成功删除custom_event类型的p1.doSomeThing事件`);
+ } else {
+ setMsgParams("未找到custom_event类型的p1.doSomeThing事件");
+ console.log(`${TAG},未找到custom_event类型的p1.doSomeThing事件`);
+ }
+ }
+ return (
+
+
+
+ 基础使用 & Keeping the scope
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {msg}
+
+
+
+
+ Passing additional parameters
+
+
+ setFirstVal(text)}
+ style={styles.inputText}
+ placeholder="请输入长度大于1的参数"
+ maxLength={12}
+ />
+ setSecondVal(text)}
+ style={styles.inputText}
+ placeholder="请输入长度大于1的参数"
+ maxLength={12}
+ />
+
+
+ 'add'
+
+
+
+
+
+
+
+
+
+ {msgParams}
+
+
+
+
+ );
+}
+export default EventBusDemo;
+```
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+## 方法
+
+详情见 [EventBus](https://github.com/krasimir/EventBus/blob/master/README.md)
+
+| Name | Description | Required | HarmonyOS Support |
+| ------------------- | ----------- | -------- | ----------------- |
+| addEventListener | - | - | YES |
+| removeEventListener | - | - | YES |
+| hasEventListener | - | - | YES |
+| dispatch | - | - | YES |
+| getEvents | - | - | YES |
+
+## 遗留问题
+
+## 其他
diff --git a/zh-cn/Immer.md b/zh-cn/Immer.md
new file mode 100644
index 0000000000000000000000000000000000000000..ada7f260cdac0278601d0a3ec5aaad9cdc0125d1
--- /dev/null
+++ b/zh-cn/Immer.md
@@ -0,0 +1,812 @@
+模板版本:v0.1.3
+
+
+
immer
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/immerjs/immer)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm immer@10.0.4
+```
+
+#### **yarn**
+
+```bash
+yarn add immer@10.0.4
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```js
+import React, {useState, useEffect, Component} from 'react';
+import {
+ View,
+ Text,
+ Button,
+ StyleSheet,
+ ScrollView,
+ Switch,
+ TextInput,
+} from 'react-native';
+import {
+ createDraft,
+ finishDraft,
+ current,
+ produce,
+ original,
+ isDraft,
+ enablePatches,
+ produceWithPatches,
+ enableMapSet,
+ freeze,
+ nothing,
+ setAutoFreeze,
+ isDraftable,
+ immerable,
+ Immutable,
+ castImmutable,
+ castDraft,
+ applyPatches,
+ setUseStrictShallowCopy,
+} from 'immer';
+
+// 初始状态
+const initialState = {
+ count: 0,
+ text: 'Hello from Immer!',
+};
+enablePatches();
+
+// 启用enablePatches插件
+enableMapSet();
+// 启用enableMapSet插件
+setUseStrictShallowCopy(true);
+
+const MyComponent = () => {
+ const [myMap, setMyMap] = useState(new Map([['key1', 'value1']]));
+ const [overStates, setOverStates] = useState(false);
+ const toggleSwitch = value => {
+ setOverStates(value);
+ };
+ let [states, setStates] = useState(false);
+ const [originals, setOriginals] = useState({users: [{name: 'zhansan'}]});
+ let [res, setRes] = useState('');
+ let [currentText, setCurrent] = useState('');
+ const [count, setCount] = useState({age: 0});
+ let [baseState, setBaseState] = useState([
+ {
+ title: '标题1',
+ done: true,
+ },
+ ]);
+ const [text, setText] = useState('Hello');
+ let [result, setResult] = useState({});
+ let [patches, setPatches] = useState({});
+ let [inversePatches, setInversePatches] = useState({});
+ const [data, setData] = useState({name: 'John', age: 30});
+ const [produceStatus, setProduceStatus] = useState(false);
+ const [castDraftState, setCastDraftState] = useState({
+ count: 0,
+ });
+ const [state, setState] = useState(initialState);
+ const [freezeRest, setFreezeRest] = useState({a: 1, b: {c: 2}});
+ const [stateRes, setStateRes] = useState({count: 0, text: 'hello-world'});
+ const [texts, setTexts] = useState('请输入内容');
+ const [stateNothing, setStateNothing] = useState({
+ name: 'John',
+ age: 30,
+ isStudent: false,
+ });
+ const obj = {a: 1, b: 2};
+ const arr = [1, 2, 3];
+ const str = 'Hello, immer!';
+ const num = 42;
+ const frozenObj = freeze({c: 3}, true);
+ const [objStatus, setObjStatus] = useState(false);
+ const [arrStatus, setArrStatus] = useState(false);
+ const [strStatus, setStrStatus] = useState(false);
+ const [numStatus, setNumStatus] = useState(false);
+ const [draftsStatus, setDratfStatus] = useState(false);
+ let originalRes = {
+ name: '初始数据1',
+ age: 18,
+ };
+ let fork = originalRes;
+ // 用户在向导中所作的所有更改
+ let changes = [];
+ // 与向导中所做的所有更改相反
+ let inverseChanges = [];
+ let [obj1, setObj1] = useState({});
+ let [obj2, setObj2] = useState({});
+ const incrementCount = () => {
+ if (count.age < 3) {
+ setCount(
+ produce(count, draft => {
+ draft.age += 1;
+ }),
+ );
+ } else {
+ setCount(
+ produce(count, draft => {
+ draft.age = 0;
+ }),
+ );
+ }
+ };
+ const decrement = () => {
+ if (count.age > 0) {
+ setCount(
+ produce(count, draft => {
+ draft.age -= 1;
+ }),
+ );
+ } else {
+ setCount(
+ produce(count, draft => {
+ draft.age = 3;
+ }),
+ );
+ }
+ };
+ const onAdd = () => {
+ if (baseState.length < 3) {
+ return setBaseState(
+ produce(baseState, draftState => {
+ draftState.push({title: '新增', done: states});
+ setStates((states = isDraft(draftState)));
+ }),
+ );
+ }
+ };
+ const onDelete = (e: number) => {
+ return setBaseState(
+ produce(draft => {
+ draft.splice(e, 1);
+ }),
+ );
+ };
+ const onChange = (item: object, e: number) => {
+ const res = produce(baseState, draftState => {
+ draftState[e].done = !draftState[e].done;
+ draftState[e].title = '更改后数据';
+ setStates((states = isDraft(draftState)));
+ });
+ setBaseState(res);
+ };
+ // 使用createDraft来创建一个草稿副本
+ const increment = () => {
+ const draft = createDraft(state);
+ if (state.count < 5) {
+ draft.count += 1; // 修改草稿副本
+ } else {
+ draft.count = 0;
+ }
+ const nextState = finishDraft(draft); // 获取修改后的不可变状态
+ setState(nextState); // 更新React状态
+ };
+ const updateMap = () => {
+ setMyMap(
+ produce(myMap, draftMap => {
+ draftMap.set('key1', 'updatedValue1'); // 更新键值对
+ draftMap.set('key2', 'value2'); // 添加新的键值对
+ draftMap.delete('key3'); // 尝试删除一个不存在的键值对(不会有影响)
+ }),
+ );
+ };
+ const renderMapEntries = () => {
+ return Array.from(myMap.entries()).map(([key, value]) => (
+
+ {key}: {value}
+
+ ));
+ };
+ const changeText = () => {
+ const draft = createDraft(state);
+ draft.text = 'Text updated!'; // 修改草稿副本
+ const nextState = current(draft); // 获取当前修改后的状态(与finishDraft效果相同)
+ setState(nextState); // 更新React状态
+ };
+ const clickOriginal = () => {
+ const a = setOriginals(
+ produce(originals, draft => {
+ draft.users[0].name = '4444';
+ setCurrent(current(draft).users[0].name);
+ console.log('Original state:', original(draft)?.users[0].name); // 输出原始状态
+ setRes(original(draft).users[0].name);
+ }),
+ );
+ };
+ const handleClick = () => {
+ const [result, patches, inversePatches] = produceWithPatches(
+ text,
+ draft => (draft = 'Hello-World'),
+ );
+ setResult(result);
+ setPatches(patches);
+ setInversePatches(inversePatches);
+ console.log('result:', result);
+ console.log('Patches:', patches);
+ console.log('Inverse Patches:', inversePatches);
+
+ setText(result);
+ };
+ // -----------------------------------------------
+ class MyImmerableObject extends React.Component {
+ // 声明immerable属性,告诉immer处理哪些属性
+ static [immerable] = true;
+ // 定义您的对象的属性
+ constructor(name, age) {
+ super(name, age);
+ this.name = name;
+ this.age = age;
+ }
+ /* // 不使用immerable
+ // 声明immerable属性,告诉immer处理哪些属性
+ static [immerable] = true;
+ // 定义您的对象的属性
+ constructor(name, age) {
+ super(name, age);
+ this.name = name;
+ this.age = age;
+ } */
+ }
+ const [myState, setMyState] = useState(new MyImmerableObject('Alice', 10));
+ const updateValue = () => {
+ // 使用immerable
+ const res = produce(myState, draft => {
+ draft.age = 26;
+ });
+ /* // 不使用immerable
+ const res = {...myState, age: 26}; */
+ setMyState(res);
+ };
+ // 在组件挂载时设置 immer 的自动冻结行为
+ useEffect(() => {
+ // 启用/停用自动冻结
+ setAutoFreeze(overStates);
+ }, [overStates]); // 空依赖数组确保此 effect 只运行一次
+ const incrementCountLeft = () => {
+ const res = freeze(Object.assign({}, freezeRest), true);
+ res.a = 110;
+ res.b.c = 220;
+ console.log('调用freeze-deep:', overStates, res);
+ setFreezeRest(res);
+ };
+ const tryToModifyFrozenStateLeft = () => {
+ const res = freeze(Object.assign({}, freezeRest), false);
+ res.a = 111;
+ res.b.c = 222;
+ console.log('调用freeze-deep:', overStates, res);
+ setFreezeRest(res);
+ };
+ const ClickOffFreeze = () => {
+ const res1 = Object.assign({}, freezeRest);
+ res1.a = 10;
+ res1.b.c = 20;
+ console.log('未调用freeze:', res);
+ setFreezeRest(res1);
+ };
+ const ClickOnFreeze = () => {
+ const res = freeze(Object.assign({}, freezeRest));
+ res.a = 11;
+ res.b.c = 22;
+ console.log('调用freeze:', res);
+ setFreezeRest(res);
+ };
+ const inputText = e => {
+ let nextState = produce(stateRes, draft => {});
+ setTexts(e);
+ nextState.text = e;
+ setStateRes(nextState);
+ };
+ const clickNothing = e => {
+ const nextStateNothing = produce(stateNothing, draft => e);
+ setStateNothing(nextStateNothing);
+ };
+ const isDraftObj = () => {
+ setObjStatus(isDraftable(obj));
+ };
+ const isDraftArr = () => {
+ setArrStatus(isDraftable(arr));
+ };
+ const isDraftStr = () => {
+ setStrStatus(isDraftable(str));
+ };
+ const isDraftNum = () => {
+ setNumStatus(isDraftable(num));
+ };
+ const isDrafts = () => {
+ setDratfStatus(isDraftable(frozenObj));
+ };
+ // --------------------------------------------
+ const [draftRes, setDraftRes] = useState({
+ name: 'John',
+ age: 30,
+ hobbies: ['reading', 'coding'],
+ });
+
+ const [setUseStrictShallowCopyRes, setSetUseStrictShallowCopyRes] = useState({
+ name: 'John',
+ age: 30,
+ address: {
+ city: 'New York',
+ country: 'USA',
+ },
+ });
+ const [setUseStrictShallowCopyInit, setSetUseStrictShallowCopyInit] =
+ useState();
+ const updateData = () => {
+ let newData = {};
+ if (!produceStatus) {
+ newData = produce(data, draft => {
+ if (draft.age < 40) {
+ draft.age += 1;
+ } else {
+ draft.age = 0;
+ }
+ });
+ } else {
+ newData = castImmutable(data, draft => {
+ draft.age += 1;
+ });
+ }
+
+ setData(newData);
+ };
+ const Clickfn = () => {
+ setProduceStatus(!produceStatus);
+ };
+ const AddFn = () => {
+ setCastDraftState(
+ produce(castDraftState, draftState => {
+ if (castDraftState.count < 10) {
+ draftState.count += 1;
+ } else {
+ draftState.count = 0;
+ }
+ }),
+ );
+ };
+ const doubleCount = () => {
+ setCastDraftState(
+ produce(castDraftState, draftState => {
+ if (castDraftState.count < 100) {
+ draftState.count *= 2;
+ } else {
+ draftState.count = 0;
+ }
+ }),
+ );
+ };
+ const resetCount = () => {
+ const newState = castDraft({count: 0});
+ setCastDraftState(newState);
+ };
+ const ClickChange = () => {
+ fork = produce(
+ fork,
+ draft => {
+ draft.age = 10;
+ draft.name = 'lisi';
+ },
+ // 产生的第三个参数是一个回调,patches 将从这里产生
+ (patches, inversePatches) => {
+ changes.push(...patches);
+ inverseChanges.push(...inversePatches);
+ },
+ );
+ };
+ const fn1 = () => {
+ // 当向导完成(成功)后,我们可以将 fork 中的更改重播到新的状态!
+ let originalRes2 = applyPatches(originalRes, changes);
+ setObj1(originalRes2);
+ console.log('originalRes2:', originalRes2);
+ };
+ const fn2 = () => {
+ // state 现在包含来自两个代码路径的更改!
+ // 最后,即使在完成向导之后,用户也可能会改变主意并撤消他的更改......
+ let originalRes3 = applyPatches(originalRes, inverseChanges);
+ setObj2(originalRes3);
+ };
+ const handleAddHobby = () => {
+ //不使用Draft
+ const newDraftRes = {...draftRes};
+ newDraftRes.hobbies[1] = 'swimming';
+ setDraftRes(newDraftRes);
+ // 使用Draft
+ /* const nextDraftRes = produce(draftRes, draft => {
+ draft.hobbies[1] = 'swimming';
+ });
+ setDraftRes(nextDraftRes); */
+ };
+ interface Person {
+ name: string;
+ age: number;
+ }
+ // 使用Immutable
+ const immutableObj1: Immutable = {
+ name: 'Alice',
+ age: 20,
+ };
+ // 不使用Immutable
+ // const immutableObj1 = {
+ // name: 'Alice',
+ // age: 20,
+ // };
+ const [immutableData, setImmutableData] = useState();
+ const changeObj1 = () => {
+ const res = immutableObj1;
+ res.name = 'lisi';
+ console.log('immutableObj1:', immutableObj1);
+ setImmutableData(res);
+ };
+ const useSetUseStrictShallowCopy = () => {
+ const res = produce(setUseStrictShallowCopyRes, draft => {
+ draft.age = 55;
+ draft.address.city = 'China';
+ });
+ console.log('res:', JSON.stringify(res));
+ console.log(
+ 'setSetUseStrictShallowCopyRes:',
+ JSON.stringify(setUseStrictShallowCopyRes),
+ );
+ setSetUseStrictShallowCopyInit(res);
+ };
+
+ // ----------------分割 end-------------
+ return (
+
+
+ Immer
+ {/* 验证---produce---api */}
+
+ 验证-produce-期望值不可变数据可以更改
+
+
+ Count: {count.age}
+
+
+
+
+ {baseState.map((item, index) => (
+
+
+ 标题:{item.title}
+ 状态:{item.done ? 'true' : 'false'}
+ isDraft状态:{`${states}`}
+
+
+ {
+ onChange(item, index);
+ }}
+ />
+ {
+ onDelete(index);
+ }}
+ />
+
+
+ ))}
+
+
+ {/* --------验证----createDraft--&--finishDraft---------------- */}
+
+ 验证createDraft--&--finishDraft
+ Count: {state.count}
+ Text: {state.text}
+
+
+
+ {/* -----------------验证--original-------current--------------- */}
+
+
+ 验证original--current--期望值验证original:获取修改后的原始状态
+
+ 初始数据:{JSON.stringify(originals)}
+ original:{res}
+ res:{originals.users[0].name}
+ current: {currentText}
+
+
+ {/* ------enablePatches-----produceWithPatches------------------ */}
+
+ 验证enablePatches--produceWithPatches
+ {text}
+ result:{JSON.stringify(result)}
+ patches:{JSON.stringify(patches)}
+ inversePatches:{JSON.stringify(inversePatches)}
+
+
+ {/* ----------验证--enableMapSet------------------------------- */}
+
+ 验证enableMapSet
+ Current Map:
+ {renderMapEntries()}
+
+
+ {/* -----------------验证--freeze----------------------- */}
+
+ 验证freeze
+
+ freeze(obj,deep?)obj:要冻结的对象deep(可选):一个布尔值,默认为false。如果为true,则深度冻结对象(包括其所有嵌套的对象)。如果为false或未提供,则只冻结对象的顶层属性
+
+
+
+ init:{JSON.stringify(freezeRest)}
+
+
+
+
+
+
+
+ {/* --------------验证--setAutoFreeze------------------- */}
+
+ ---验证setAutoFreeze----
+
+ setAutoFreeze为自动冻结,状态:{JSON.stringify(overStates)}
+
+
+
+ 你输入的内容是: {stateRes.text}
+ Current Count: {JSON.stringify(stateRes)}
+
+ {/* --------------验证---nothing------------------------ */}
+
+ 验证nothing
+
+ 定义的数据:
+ {JSON.stringify(stateNothing)}
+
+ Name: {typeof stateNothing}
+
+
+ {
+ clickNothing(nothing);
+ }}
+ />
+
+
+ {
+ clickNothing(undefined);
+ }}
+ />
+
+
+
+ {/* -----------验证----isDraftable---------------------- */}
+
+ 验证isDraftable
+ {/*
+ {result ? '可变对象' : '不可变对象'} */}
+
+ 状态--isDraftable({JSON.stringify(obj)})
+
+ 状态:{JSON.stringify(objStatus)}
+
+
+ 状态--isDraftable({JSON.stringify(arr)})
+
+ 状态--{JSON.stringify(arrStatus)}
+
+
+ 状态--isDraftable({JSON.stringify(str)})
+
+ 状态--{JSON.stringify(strStatus)}
+
+
+ 状态--isDraftable({JSON.stringify(num)})
+
+ 状态--{JSON.stringify(numStatus)}
+
+
+ 状态--isDraftable({JSON.stringify(frozenObj)})
+
+ 状态--{JSON.stringify(draftsStatus)}
+
+
+ {/* -----------验证---immerable-------------------- */}
+
+
+ 验证---immerable,可以添加到构造函数或原型的符号
+
+ NUM:{JSON.stringify(myState)}
+
+
+ {/* -----------------验证--castImmutable----------------------- */}
+
+ 验证castImmutable
+ castImmutable,期望值castImmutable为true时数据不可变
+ castImmutable:{produceStatus ? 'true' : 'false'}
+
+ Age: {data.age}
+
+
+ {/* -------------------验证--castDraft--- */}
+
+ 验证castDraft
+
+ castDraft,期望将任何不可变类型转换为其可变对应物。这只是一个转换,实际上并没有做任何事情
+
+ Count: {castDraftState.count}
+
+
+
+
+ {/* ---------------验证--applyPatches-------------- */}
+
+ 验证applyPatches
+ 初始数据:{JSON.stringify(originalRes)}
+
+
+ 改变后数据:{JSON.stringify(obj1)}
+
+ 恢复的数据--{JSON.stringify(obj2)}
+
+
+
+ 验证Draft暴露的 TypeScript 类型以将不可变类型转换为可变类型
+
+ {JSON.stringify(draftRes)}
+
+
+ {/* 验证Immutable */}
+ {/*
+
+ 验证Immutable暴露的 TypeScript 类型以将可变类型转换为不可变类型
+
+ 初始数据:{JSON.stringify(immutableObj1)}
+ 更改后数据:{JSON.stringify(immutableData)}
+
+ */}
+ {/* 验证setUseStrictShallowCopy */}
+
+
+ 验证setUseStrictShallowCopy
+ 可用于启用严格浅拷贝,如果启用,immer会确保不会意外的修改原始对象
+
+ 初始数据:{JSON.stringify(setUseStrictShallowCopyRes)}
+ 更改后数据:{JSON.stringify(setUseStrictShallowCopyInit)}
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ width: '100%',
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: 10,
+ marginBottom: 5,
+ borderWidth: 1,
+ },
+ text: {
+ width: '100%',
+ fontSize: 18,
+ marginBottom: 0,
+ textAlign: 'center',
+ fontWeight: '700',
+ margin: 5,
+ },
+ border: {
+ borderWidth: 1,
+ },
+});
+
+export default MyComponent;
+
+
+```
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.700; ROM:2.0.0.72;
+
+## API
+
+详情见[Immer](https://immerjs.github.io/immer/zh-CN/api/)
+
+> | Name | Description | Required | Platform | HarmonyOS Support |
+> | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- |
+> | `(default)` | Immer 核心 API,通常命名为 `produce`: `import {produce} from "immer"` | NO | Android IOS | YES |
+> | `applyPatches` | 给定一个基本 state 或 draft,以及一组 patches ,应用 patches | NO | Android IOS | YES |
+> | `castDraft` | 将任何不可变类型转换为其可变对应物。这只是一个转换,实际上并没有做任何事情。 | NO | Android IOS | YES |
+> | `castImmutable` | 将任何可变类型转换为其不可变对应物。这只是一个转换,实际上并没有做任何事情。 | NO | Android IOS | YES |
+> | `createDraft` | 给定一个基本 state,创建一个可变 draft,任何修改都将被记录下来 | NO | Android IOS | YES |
+> | `current` | 给定一个 draft 对象(不必是对象的根结点),对 draft 的当前状态进行快照 | NO | Android IOS | YES |
+> | `Draft` | 暴露的 TypeScript 类型以将不可变类型转换为可变类型 | NO | Android IOS | YES |
+> | `enableMapSet()` | 启用对 `Map` 和 `Set` 集合的支持。 | NO | Android IOS | YES |
+> | `enablePatches()` | 启用对 JSON patches 的支持 | NO | Android IOS | YES |
+> | `finishDraft` | 给定使用 `createDraft` 创建的 draft,冻结 draft 并生成并返回下一个不可变状态,该状态捕获所有更改 | NO | Android IOS | YES |
+> | `freeze(obj, deep?)` | 冻结可 draft 对象。返回原始对象。默认情况下浅冻结,但如果第二个参数为真,它将递归冻结。 | NO | Android IOS | YES |
+> | `Immer` | 可用于创建第二个“immer”实例(暴露此实例中列出的所有 API)的构造函数,它不与全局实例共享其设置 | NO | Android IOS | YES |
+> | `immerable` | 可以添加到构造函数或原型的符号,表示 Immer 应该将类视为可以安全 draft 的东西 | NO | Android IOS | YES |
+> | `Immutable` | 暴露的 TypeScript 类型以将可变类型转换为不可变类型 | NO | Android IOS | YES |
+> | `isDraft` | 如果给定对象是 draft 对象,则返回 true | NO | Android IOS | YES |
+> | `isDraftable` | 如果 Immer 能够将此对象变成 draft,则返回 true。这适用于:数组、没有原型的对象、以 `Object` 为原型的对象、在其构造函数或原型上具有 `immerable` 符号的对象 | NO | Android IOS | YES |
+> | `nothing` | 可以从 recipe 返回的值,以指示应生成 `undefined` | NO | Android IOS | YES |
+> | `original` | 给定一个 draft 对象(不必是对象的根结点),返回原始状态树中相同路径的原始对象(如果存在) | NO | Android IOS | YES |
+> | `Patch` | 暴露的 TypeScript 类型,描述(反向)patches 对象的形状 | NO | Android IOS | YES |
+> | `produce` | Immer 的核心 API,也暴露为 `default` 导出 | NO | Android IOS | YES |
+> | `produceWithPatches` | 与 `produce` 相同,但它不仅返回生成的对象,还返回一个由 `[result, patch, inversePatches]` 组成的元组 | NO | Android IOS | YES |
+> | `setAutoFreeze` | 启用/禁用递归的自动冻结。默认启用 | NO | Android IOS | YES |
+> | `setUseStrictShallowCopy` | 可用于启用严格浅拷贝,如果启用,immer将尽可能多地复制不可枚举属性 | NO | Android IOS | YES |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/immerjs/immer/blob/main/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/README.md b/zh-cn/README.md
index 7821c36ca4b21e3ae1f781909ccca7accff9de6f..36d853001c6af860cfd446b2208bed88bfc42035 100644
--- a/zh-cn/README.md
+++ b/zh-cn/README.md
@@ -16,84 +16,118 @@
## RNOH 三方库总览
-> [!tip] NPM 公仓坐标:@react-native-oh-tpl
+>[!tip] NPM 公仓坐标:@react-native-oh-tpl
-| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | Releases | 文档链接 |
-| :--: | :--------------------------------------: | :-----------: | :-------: | :--------------------------------------: | :--------------------------------------: |
-| 1 | [@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage) | 1.21.1 | 是 | [@react-native-oh-tpl/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](/zh-cn/react-native-async-storage-async-storage.md) |
-| 2 | [@react-native-clipboard/clipboard](https://github.com/react-native-clipboard/clipboard) | 1.13.2 | 是 | [@react-native-oh-tpl/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](/zh-cn/react-native-clipboard-clipboard.md) |
-| 3 | [@react-native-community/datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker) | 7.6.2 | 是 | [@react-native-oh-tpl/datetimepicker](https://github.com/react-native-oh-library/datetimepicker/releases) | [链接](/zh-cn/react-native-community-datetimepicker.md) |
-| 4 | [@shopify/flash-list](https://github.com/Shopify/flash-list) | 1.6.3 | 否 | [@react-native-oh-tpl/flash-list](https://github.com/react-native-oh-library/flash-list/releases) | [链接](/zh-cn/shopify-flash-list.md) |
-| 5 | [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) | 6.4.1 | 是 | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](/zh-cn/lottie-react-native.md) |
-| 6 | [@react-native-picker/picker](https://github.com/react-native-picker/picker) | 2.5.1 | 否 | [@react-native-oh-tpl/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](/zh-cn/react-native-picker-picker.md) |
-| 7 | [@react-native-community/progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android) | 1.0.4 | 是 | [@react-native-oh-tpl/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](/zh-cn/react-native-community-progress-bar-android.md) |
-| 8 | [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox) | 0.5.16 | 否 | [@react-native-oh-tpl/react-native-checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](/zh-cn/react-native-community-checkbox.md) |
-| 9 | [react-native-exception-handler](https://github.com/a7ul/react-native-exception-handler) | 2.10.10 | 否 | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](/zh-cn/react-native-exception-handler.md) |
-| 10 | [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) | 8.6.3 | 否 | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](/zh-cn/react-native-fast-image.md) |
-| 11 | [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) | 2.12.1 | 是 | [@react-native-oh-tpl/react-native-gesture-handler](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) | [链接](/zh-cn/react-native-gesture-handler.md) |
-| 12 | [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) | 7.0.3 | 是 | [@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/react-native-image-picker/releases) | [链接](/zh-cn/react-native-image-picker.md) |
-| 13 | [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) | 3.0.0-alpha.1 | 是 | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](/zh-cn/react-native-linear-gradient.md) |
-| 14 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](/zh-cn/react-native-masked-view-masked-view.md) |
-| 15 | [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) | 11.1.0 | 是 | [@react-native-oh-tpl/netinfo](https://github.com/react-native-oh-library/react-native-netinfo/releases) | [链接](/zh-cn/react-native-community-netinfo.md) |
-| 16 | [react-native-pager-view](https://github.com/callstack/react-native-pager-view) | 6.2.2 | 是 | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](/zh-cn/react-native-pager-view.md) |
-| 17 | [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) | 4.7.4 | 是 | [@react-native-oh-tpl/react-native-safe-area-context](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | [链接](/zh-cn/react-native-safe-area-context.md) |
-| 18 | [react-native-screens](https://github.com/software-mansion/react-native-screens) | 3.29.0 | 是 | [react-native-screens](https://github.com/software-mansion/react-native-screens/releases) | [链接](/zh-cn/react-native-screens.md) |
-| 19 | [@react-native-community/slider](https://github.com/callstack/react-native-slider) | 4.4.3 | 是 | [@react-native-oh-tpl/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](/zh-cn/react-native-community-slider.md) |
-| 20 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](/zh-cn/react-native-SmartRefreshLayout.md) |
-| 21 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](/zh-cn/react-native-svg.md) |
-| 22 | [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/6.x/packages/react-native-tab-view) | 3.5.2 | - | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-native-tab-view.md) |
-| 23 | [react-native-video](https://github.com/react-native-video/react-native-video) | 5.2.1 | 是 | [@react-native-oh-tpl/react-native-video](https://github.com/react-native-oh-library/react-native-video) | [链接](/zh-cn/react-native-video.md) |
-| 24 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](/zh-cn/react-native-webview.md) |
-| 25 | [@react-navigation/elements](https://github.com/react-navigation/react-navigation/tree/6.x/packages/elements) | 1.3.21 | - | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-elements.md) |
-| 26 | [crypto-js](https://github.com/brix/crypto-js/tree/4.2.0) | 4.2.0 | - | [crypto-js](https://github.com/brix/crypto-js/tree/4.2.0) | [链接](/zh-cn/crypto-js.md) |
-| 27 | [deepmerge](https://github.com/TehShrike/deepmerge) | 4.3.1 | - | [deepmerge](https://github.com/TehShrike/deepmerge/releases) | [链接](/zh-cn/deepmerge.md) |
-| 28 | [htmlparser2](https://github.com/fb55/htmlparser2) | 9.1.0 | - | [htmlparser2](https://github.com/fb55/htmlparser2/releases) | [链接](/zh-cn/htmlparser2.md) |
-| 29 | [js-beautify](https://github.com/beautifier/js-beautify) | 1.14.9 | - | [js-beautify](https://github.com/beautifier/js-beautify/releases) | [链接](/zh-cn/js-beautify) |
-| 30 | [lodash](https://github.com/lodash/lodash/tree/4.17.21) | 4.17.21 | - | [lodash](https://github.com/lodash/lodash//releases) | [链接](/zh-cn/lodash.md) |
-| 31 | [mobx-react](https://github.com/mobxjs/mobx/tree/mobx-react%407.6.0) | 7.6.0 | - | [mobx-react](https://github.com/mobxjs/mobx/tree/mobx-react%407.6.0) | [链接](/zh-cn/mobx-react.md) |
-| 32 | [mobx](https://github.com/mobxjs/mobx/tree/mobx%406.10.0) | 6.10.0 | - | [mobx](https://github.com/mobxjs/mobx/tree/mobx%406.10.0) | [链接](/zh-cn/mobx.md) |
-| 33 | [parse5](https://github.com/inikulin/parse5) | 7.1.2 | - | [parse5](https://github.com/inikulin/parse5/releases) | [链接](/zh-cn/parse5.md) |
-| 34 | [prop-types](https://github.com/facebook/prop-types/tree/v15.8.1) | 15.8.1 | - | [prop-types](https://github.com/facebook/prop-types/tree/v15.8.1) | [链接](/zh-cn/prop-types.md) |
-| 35 | [react-i18next](https://github.com/i18next/react-i18next) | 8.6.3 | - | [react-i18next](https://github.com/i18next/react-i18next/releases) | [链接](/zh-cn/react-i18next.md) |
-| 36 | [react-native-action-button](https://github.com/mastermoo/react-native-action-button) | 2.8.5 | - | [react-native-action-button](https://github.com/mastermoo/react-native-action-button/releases) | [链接](/zh-cn/react-native-action-button.md) |
-| 37 | [react-native-autoheight-webview](https://github.com/react-native-oh-library/react-native-autoheight-webview) | 1.6.5 | - | [@react-native-oh-tpl/react-native-autoheight-webview](https://github.com/react-native-oh-library/react-native-autoheight-webview/releases) | [链接](/zh-cn/react-native-autoheight-webview.md) |
-| 38 | [@react-native-camera-roll/camera-roll](https://github.com/react-native-oh-library/react-native-cameraroll) | 6.0.0 | 是 | [@react-native-oh-tpl/camera-roll](https://github.com/react-native-oh-library/react-native-cameraroll/releases) | [链接](/zh-cn/react-native-cameraroll.md) |
-| 39 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](/zh-cn/react-native-masked-view-masked-view.md) |
-| 40 | [@react-native-community/progress-view](https://github.com/react-native-progress-view/progress-view) | 1.4.2 | 是 | [@react-native-community/progress-view](https://github.com/react-native-oh-library/progress-view/releases) | [链接](/zh-cn/react-native-community-progress-view.md) |
-| 41 | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control) | 2.5.0 | - | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control/releases) | [链接](/zh-cn/react-native-community-segmented-control.md) |
-| 42 | [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv) | 3.4.9 | - | [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv/releases) | [链接](/zh-cn/react-native-dotenv.md) |
-| 43 | [@react-native-community/geolocation](https://github.com/michalchudziak/react-native-geolocation) | 3.1.0 | 是 | [@react-native-oh-tpl/react-native-geolocation](https://github.com/react-native-oh-library/react-native-geolocation/releases) | [链接](/zh-cn/react-native-geolocation.md) |
-| 44 | [react-native-qrcode-svg](https://github.com/awesomejerry/react-native-qrcode-svg) | 6.2.0 | - | [@react-native-oh-tpl/react-native-qrcode-svg](https://github.com/react-native-oh-library/react-native-qrcode-svg/releases) | [链接](/zh-cn/react-native-qrcode-svg.md) |
-| 45 | [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) | 3.6.0 | - | [@react-native-oh-tpl/react-native-reanimated](https://github.com/react-native-oh-library/react-native-reanimated/releases) | [链接](/zh-cn/react-native-reanimated.md) |
-| 46 | [react-native-render-html](https://github.com/meliorence/react-native-render-html) | 6.3.4 | - | [react-native-render-html](https://github.com/meliorence/react-native-render-html/releases) | [链接](/zh-cn/react-native-render-html.md) |
-| 47 | [react-native-section-list-get-item-layout](https://github.com/jsoendermann/rn-section-list-get-item-layout) | 2.2.3 | - | [react-native-section-list-get-item-layout](https://github.com/jsoendermann/rn-section-list-get-item-layout/releases) | [链接](/zh-cn/react-native-section-list-get-item-layout.md) |
-| 48 | [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) | 10.0.3 | - | [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons/releases) | [链接](/zh-cn/react-native-vector-icons.md) |
-| 49 | [react-native-view-shot](https://github.com/gre/react-native-view-shot) | 3.8.0 | 否 | [@react-native-oh-tpl/react-native-view-shot](https://github.com/react-native-oh-library/react-native-view-shot/releases) | [链接](/zh-cn/react-native-view-shot.md) |
-| 50 | [ @react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | 6.5.11 | - | [ @react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | [链接](/zh-cn/react-navigation-bottom-tabs.md) |
-| 51 | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native) | 6.1.9 | - | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native/) | [链接](/zh-cn/react-navigation-native.md) |
-| 52 | [@react-navigation/stack](https://github.com/react-navigation/react-navigation/tree/6.x/packages/stack) | 6.3.19 | - | [@react-navigation/stack](https://github.com/react-navigation/react-navigation/tree/6.x/packages/stack) | [链接](/zh-cn/react-navigation-stack.md) |
-| 53 | [recyclerlistview](https://github.com/Flipkart/recyclerlistview) | 4.2.0 | - | [recyclerlistview](https://github.com/Flipkart/recyclerlistview/releases) | [链接](/zh-cn/recyclerListView.md) |
-| 54 | [rn-placeholder](https://github.com/mfrachet/rn-placeholder) | 3.0.3 | - | [rn-placeholder](https://github.com/mfrachet/rn-placeholder/releases) | [链接](/zh-cn/rn-placeholder.md) |
-| 55 | [styled-components](https://github.com/styled-components/styled-components) | 6.1.8 | - | [styled-components](https://github.com/styled-components/styled-components/releases) | [链接](/zh-cn/styled-components.md) |
-| 56 | [styled-system](https://github.com/react-native-picker/picker) | 5.1.5 | - | [styled-system](https://github.com/styled-system/styled-system) | [链接](/zh-cn/styled-system.md) |
-| 57 | [jeanregisser/react-native-slider](https://github.com/react-native-oh-library/jeanregisser-react-native-slider) | 0.11.0 | - | [jeanregisser/react-native-slider](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/releases) | [链接](/zh-cn/jeanregisser-react-native-slider.md) |
-| 58 | [js-beautify](https://github.com/beautifier/js-beautify) | 1.15.1 | - | [js-beautify](https://github.com/beautifier/js-beautify/releases) | [链接](/zh-cn/js-beautify.md) |
-| 59 | [react-native-base64](https://github.com/eranbo/react-native-base64) | 0.2.1 | - | [react-native-base64](https://github.com/eranbo/react-native-base64/releases) | [链接](/zh-cn/react-native-base64.md) |
-| 60 | [react-native-check-box](https://github.com/crazycodeboy/react-native-check-box) | 2.1.0 | - | [react-native-check-box](https://github.com/crazycodeboy/react-native-check-box/releases) | [链接](/zh-cn/react-native-check-box.md) |
-| 61 | [@react-native-community/blur](https://github.com/Kureev/react-native-blur) | 4.4.0 | 是 | [@react-native-oh-tpl/blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) | [链接](/zh-cn/react-native-community-blur.md) |
-| 62 | [@react-native-community/push-notification-ios](https://github.com/react-native-push-notification/ios) | 1.11.0 | 否 | [@react-native-community/push-notification-ios](https://github.com/react-native-oh-library/react-native-push-notification-ios/releases) | [链接](/zh-cn/react-native-community-push-notification-ios.md) |
-| 63 | [@react-native-cookies/cookies](https://github.com/react-native-cookies/cookies) | 6.2.1 | 否 | [@react-native-cookies/cookies](https://github.com/react-native-oh-library/react-native-cookies/releases) | [链接](/zh-cn/react-native-cookies.md) |
-| 64 | [react-native-crypto-js](https://github.com/imchintan/react-native-crypto-js) | 1.0.0 | - | [react-native-crypto-js](https://github.com/imchintan/react-native-crypto-js/releases) | [链接](/zh-cn/react-native-crypto-js.md) |
-| 65 | [react-native-maps](https://github.com/react-native-maps/react-native-maps) | 1.10.3 | 是 | [react-native-maps](https://github.com/react-native-maps/react-native-maps/releases) | [链接](/zh-cn/react-native-maps.md) |
-| 66 | [react-native-pdf](https://github.com/wonday/react-native-pdf) | 6.7.4 | 是 | [react-native-pdf](https://github.com/react-native-oh-library/react-native-pdf/releases) | [链接](/zh-cn/react-native-pdf.md) |
-| 67 | [react-native-redash](https://github.com/wcandillon/react-native-redash/) | 18.1.3 | - | [react-native-redash](https://github.com/wcandillon/react-native-redash/releases) | [链接](/zh-cn/react-native-redash.md) |
-| 68 | [react-native-snap-carousel](https://github.com/meliorence/react-native-snap-carousel) | 3.9.1 | - | [react-native-snap-carousel](https://github.com/react-native-oh-library/react-native-snap-carousel/releases) | [链接](/zh-cn/react-native-snap-carousel.md) |
-| 69 | [react-native-transitiongroup](https://github.com/madsleejensen/react-native-transitiongroup) | 1.2.0 | - | [react-native-transitiongroup](https://github.com/react-native-oh-library/react-native-transitiongroup/releases) | [链接](/zh-cn/react-native-transitiongroup.md) |
-| 70 | [react-native-translucent-modal](https://github.com/23mf/react-native-translucent-modal) | 1.1.0 | - | [react-native-translucent-modal](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) | [链接](/zh-cn/react-native-translucent-modal.md) |
-| 71 | [redux](https://github.com/reduxjs/redux) | 5.0.1 | - | [redux](https://github.com/reduxjs/redux/releases) | [链接](/zh-cn/redux.md) |
-| 72 | [redux-logger](https://github.com/LogRocket/redux-logger) | 3.0.6 | - | [redux-logger](https://github.com/LogRocket/redux-logger/releases) | [链接](/zh-cn/redux-logger.md) |
-| 73 | [redux-persist](https://github.com/rt2zz/redux-persist) | 6.0.0 | - | [redux-persist](https://github.com/rt2zz/redux-persist/releases) | [链接](/zh-cn/redux-persist.md) |
+| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | Releases | 文档链接 |
+| :--: | :----------------------------------------------------------: | :-----------: | :----------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
+| 1 | [@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage) | 1.21.1 | 是 | [@react-native-oh-tpl/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](/zh-cn/react-native-async-storage-async-storage.md) |
+| 2 | [@react-native-clipboard/clipboard](https://github.com/react-native-clipboard/clipboard) | 1.13.2 | 是 | [@react-native-oh-tpl/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](/zh-cn/react-native-clipboard-clipboard.md) |
+| 3 | [@react-native-community/datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker) | 7.6.2 | 是 | [@react-native-oh-tpl/datetimepicker](https://github.com/react-native-oh-library/datetimepicker/releases) | [链接](/zh-cn/react-native-community-datetimepicker.md) |
+| 4 | [@shopify/flash-list](https://github.com/Shopify/flash-list) | 1.6.3 | 否 | [@react-native-oh-tpl/flash-list](https://github.com/react-native-oh-library/flash-list/releases) | [链接](/zh-cn/shopify-flash-list.md) |
+| 5 | [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) | 6.4.1 | 是 | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](/zh-cn/lottie-react-native.md) |
+| 6 | [@react-native-picker/picker](https://github.com/react-native-picker/picker) | 2.5.1 | 否 | [@react-native-oh-tpl/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](/zh-cn/react-native-picker-picker.md) |
+| 7 | [@react-native-community/progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android) | 1.0.4 | 是 | [@react-native-oh-tpl/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](/zh-cn/react-native-community-progress-bar-android.md) |
+| 8 | [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox) | 0.5.16 | 否 | [@react-native-oh-tpl/react-native-checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](/zh-cn/react-native-community-checkbox.md) |
+| 9 | [react-native-exception-handler](https://github.com/a7ul/react-native-exception-handler) | 2.10.10 | 否 | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](/zh-cn/react-native-exception-handler.md) |
+| 10 | [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) | 8.6.3 | 否 | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](/zh-cn/react-native-fast-image.md) |
+| 11 | [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) | 2.12.1 | 是 | [@react-native-oh-tpl/react-native-gesture-handler](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) | [链接](/zh-cn/react-native-gesture-handler.md) |
+| 12 | [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) | 7.0.3 | 是 | [@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/react-native-image-picker/releases) | [链接](/zh-cn/react-native-image-picker.md) |
+| 13 | [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) | 3.0.0-alpha.1 | 是 | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](/zh-cn/react-native-linear-gradient.md) |
+| 14 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](/zh-cn/react-native-masked-view-masked-view.md) |
+| 15 | [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) | 11.1.0 | 是 | [@react-native-oh-tpl/netinfo](https://github.com/react-native-oh-library/react-native-netinfo/releases) | [链接](/zh-cn/react-native-community-netinfo.md) |
+| 16 | [react-native-pager-view](https://github.com/callstack/react-native-pager-view) | 6.2.2 | 是 | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](/zh-cn/react-native-pager-view.md) |
+| 17 | [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) | 4.7.4 | 是 | [@react-native-oh-tpl/react-native-safe-area-context](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | [链接](/zh-cn/react-native-safe-area-context.md) |
+| 18 | [react-native-screens](https://github.com/software-mansion/react-native-screens) | 3.29.0 | 是 | [react-native-screens](https://github.com/software-mansion/react-native-screens/releases) | [链接](/zh-cn/react-native-screens.md) |
+| 19 | [@react-native-community/slider](https://github.com/callstack/react-native-slider) | 4.4.3 | 是 | [@react-native-oh-tpl/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](/zh-cn/react-native-community-slider.md) |
+| 20 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](/zh-cn/react-native-SmartRefreshLayout.md) |
+| 21 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](/zh-cn/react-native-svg.md) |
+| 22 | [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/6.x/packages/react-native-tab-view) | 3.5.2 | - | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-native-tab-view.md) |
+| 23 | [react-native-video](https://github.com/react-native-video/react-native-video) | 5.2.1 | 是 | [@react-native-oh-tpl/react-native-video](https://github.com/react-native-oh-library/react-native-video) | [链接](/zh-cn/react-native-video.md) |
+| 24 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](/zh-cn/react-native-webview.md) |
+| 25 | [@react-navigation/elements](https://github.com/react-navigation/react-navigation/tree/6.x/packages/elements) | 1.3.21 | - | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-elements.md) |
+| 26 | [crypto-js](https://github.com/brix/crypto-js/tree/4.2.0) | 4.2.0 | - | [crypto-js](https://github.com/brix/crypto-js/tree/4.2.0) | [链接](/zh-cn/crypto-js.md) |
+| 27 | [deepmerge](https://github.com/TehShrike/deepmerge) | 4.3.1 | - | [deepmerge](https://github.com/TehShrike/deepmerge/releases) | [链接](/zh-cn/deepmerge.md) |
+| 28 | [htmlparser2](https://github.com/fb55/htmlparser2) | 9.1.0 | - | [htmlparser2](https://github.com/fb55/htmlparser2/releases) | [链接](/zh-cn/htmlparser2.md) |
+| 29 | [js-beautify](https://github.com/beautifier/js-beautify) | 1.14.9 | - | [js-beautify](https://github.com/beautifier/js-beautify/releases) | [链接](/zh-cn/js-beautify) |
+| 30 | [lodash](https://github.com/lodash/lodash/tree/4.17.21) | 4.17.21 | - | [lodash](https://github.com/lodash/lodash//releases) | [链接](/zh-cn/lodash.md) |
+| 31 | [mobx-react](https://github.com/mobxjs/mobx/tree/mobx-react%407.6.0) | 7.6.0 | - | [mobx-react](https://github.com/mobxjs/mobx/tree/mobx-react%407.6.0) | [链接](/zh-cn/mobx-react.md) |
+| 32 | [mobx](https://github.com/mobxjs/mobx/tree/mobx%406.10.0) | 6.10.0 | - | [mobx](https://github.com/mobxjs/mobx/tree/mobx%406.10.0) | [链接](/zh-cn/mobx.md) |
+| 33 | [parse5](https://github.com/inikulin/parse5) | 7.1.2 | - | [parse5](https://github.com/inikulin/parse5/releases) | [链接](/zh-cn/parse5.md) |
+| 34 | [prop-types](https://github.com/facebook/prop-types/tree/v15.8.1) | 15.8.1 | - | [prop-types](https://github.com/facebook/prop-types/tree/v15.8.1) | [链接](/zh-cn/prop-types.md) |
+| 35 | [react-i18next](https://github.com/i18next/react-i18next) | 8.6.3 | - | [react-i18next](https://github.com/i18next/react-i18next/releases) | [链接](/zh-cn/react-i18next.md) |
+| 36 | [react-native-action-button](https://github.com/mastermoo/react-native-action-button) | 2.8.5 | - | [react-native-action-button](https://github.com/mastermoo/react-native-action-button/releases) | [链接](/zh-cn/react-native-action-button.md) |
+| 37 | [react-native-autoheight-webview](https://github.com/react-native-oh-library/react-native-autoheight-webview) | 1.6.5 | - | [@react-native-oh-tpl/react-native-autoheight-webview](https://github.com/react-native-oh-library/react-native-autoheight-webview/releases) | [链接](/zh-cn/react-native-autoheight-webview.md) |
+| 38 | [@react-native-camera-roll/camera-roll](https://github.com/react-native-oh-library/react-native-cameraroll) | 6.0.0 | 是 | [@react-native-oh-tpl/camera-roll](https://github.com/react-native-oh-library/react-native-cameraroll/releases) | [链接](/zh-cn/react-native-cameraroll.md) |
+| 39 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](/zh-cn/react-native-masked-view-masked-view.md) |
+| 40 | [@react-native-community/progress-view](https://github.com/react-native-progress-view/progress-view) | 1.4.2 | 是 | [@react-native-community/progress-view](https://github.com/react-native-oh-library/progress-view/releases) | [链接](/zh-cn/react-native-community-progress-view.md) |
+| 41 | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control) | 2.5.0 | - | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control/releases) | [链接](/zh-cn/react-native-community-segmented-control.md) |
+| 42 | [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv) | 3.4.9 | - | [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv/releases) | [链接](/zh-cn/react-native-dotenv.md) |
+| 43 | [@react-native-community/geolocation](https://github.com/michalchudziak/react-native-geolocation) | 3.1.0 | 是 | [@react-native-oh-tpl/react-native-geolocation](https://github.com/react-native-oh-library/react-native-geolocation/releases) | [链接](/zh-cn/react-native-geolocation.md) |
+| 44 | [react-native-qrcode-svg](https://github.com/awesomejerry/react-native-qrcode-svg) | 6.2.0 | - | [@react-native-oh-tpl/react-native-qrcode-svg](https://github.com/react-native-oh-library/react-native-qrcode-svg/releases) | [链接](/zh-cn/react-native-qrcode-svg.md) |
+| 45 | [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) | 3.6.0 | - | [@react-native-oh-tpl/react-native-reanimated](https://github.com/react-native-oh-library/react-native-reanimated/releases) | [链接](/zh-cn/react-native-reanimated.md) |
+| 46 | [react-native-render-html](https://github.com/meliorence/react-native-render-html) | 6.3.4 | - | [react-native-render-html](https://github.com/meliorence/react-native-render-html/releases) | [链接](/zh-cn/react-native-render-html.md) |
+| 47 | [react-native-section-list-get-item-layout](https://github.com/jsoendermann/rn-section-list-get-item-layout) | 2.2.3 | - | [react-native-section-list-get-item-layout](https://github.com/jsoendermann/rn-section-list-get-item-layout/releases) | [链接](/zh-cn/react-native-section-list-get-item-layout.md) |
+| 48 | [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) | 10.0.3 | - | [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons/releases) | [链接](/zh-cn/react-native-vector-icons.md) |
+| 49 | [react-native-view-shot](https://github.com/gre/react-native-view-shot) | 3.8.0 | 否 | [@react-native-oh-tpl/react-native-view-shot](https://github.com/react-native-oh-library/react-native-view-shot/releases) | [链接](/zh-cn/react-native-view-shot.md) |
+| 50 | [ @react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | 6.5.11 | - | [ @react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | [链接](/zh-cn/react-navigation-bottom-tabs.md) |
+| 51 | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native) | 6.1.9 | - | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native/) | [链接](/zh-cn/react-navigation-native.md) |
+| 52 | [@react-navigation/stack](https://github.com/react-navigation/react-navigation/tree/6.x/packages/stack) | 6.3.19 | - | [@react-navigation/stack](https://github.com/react-navigation/react-navigation/tree/6.x/packages/stack) | [链接](/zh-cn/react-navigation-stack.md) |
+| 53 | [recyclerlistview](https://github.com/Flipkart/recyclerlistview) | 4.2.0 | - | [recyclerlistview](https://github.com/Flipkart/recyclerlistview/releases) | [链接](/zh-cn/recyclerListView.md) |
+| 54 | [rn-placeholder](https://github.com/mfrachet/rn-placeholder) | 3.0.3 | - | [rn-placeholder](https://github.com/mfrachet/rn-placeholder/releases) | [链接](/zh-cn/rn-placeholder.md) |
+| 55 | [styled-components](https://github.com/styled-components/styled-components) | 6.1.8 | - | [styled-components](https://github.com/styled-components/styled-components/releases) | [链接](/zh-cn/styled-components.md) |
+| 56 | [styled-system](https://github.com/react-native-picker/picker) | 5.1.5 | - | [styled-system](https://github.com/styled-system/styled-system) | [链接](/zh-cn/styled-system.md) |
+| 57 | [jeanregisser/react-native-slider](https://github.com/react-native-oh-library/jeanregisser-react-native-slider) | 0.11.0 | - | [jeanregisser/react-native-slider](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/releases) | [链接](/zh-cn/jeanregisser-react-native-slider.md) |
+| 58 | [js-beautify](https://github.com/beautifier/js-beautify) | 1.15.1 | - | [js-beautify](https://github.com/beautifier/js-beautify/releases) | [链接](/zh-cn/js-beautify.md) |
+| 59 | [react-native-base64](https://github.com/eranbo/react-native-base64) | 0.2.1 | - | [react-native-base64](https://github.com/eranbo/react-native-base64/releases) | [链接](/zh-cn/react-native-base64.md) |
+| 60 | [react-native-check-box](https://github.com/crazycodeboy/react-native-check-box) | 2.1.0 | - | [react-native-check-box](https://github.com/crazycodeboy/react-native-check-box/releases) | [链接](/zh-cn/react-native-check-box.md) |
+| 61 | [@react-native-community/blur](https://github.com/Kureev/react-native-blur) | 4.4.0 | 是 | [@react-native-oh-tpl/blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) | [链接](/zh-cn/react-native-community-blur.md) |
+| 62 | [@react-native-community/push-notification-ios](https://github.com/react-native-push-notification/ios) | 1.11.0 | 否 | [@react-native-community/push-notification-ios](https://github.com/react-native-oh-library/react-native-push-notification-ios/releases) | [链接](/zh-cn/react-native-community-push-notification-ios.md) |
+| 63 | [@react-native-cookies/cookies](https://github.com/react-native-cookies/cookies) | 6.2.1 | 否 | [@react-native-cookies/cookies](https://github.com/react-native-oh-library/react-native-cookies/releases) | [链接](/zh-cn/react-native-cookies.md) |
+| 64 | [react-native-crypto-js](https://github.com/imchintan/react-native-crypto-js) | 1.0.0 | - | [react-native-crypto-js](https://github.com/imchintan/react-native-crypto-js/releases) | [链接](/zh-cn/react-native-crypto-js.md) |
+| 65 | [react-native-maps](https://github.com/react-native-maps/react-native-maps) | 1.10.3 | 是 | [react-native-maps](https://github.com/react-native-maps/react-native-maps/releases) | [链接](/zh-cn/react-native-maps.md) |
+| 66 | [react-native-pdf](https://github.com/wonday/react-native-pdf) | 6.7.4 | 是 | [react-native-pdf](https://github.com/react-native-oh-library/react-native-pdf/releases) | [链接](/zh-cn/react-native-pdf.md) |
+| 67 | [react-native-redash](https://github.com/wcandillon/react-native-redash/) | 18.1.3 | - | [react-native-redash](https://github.com/wcandillon/react-native-redash/releases) | [链接](/zh-cn/react-native-redash.md) |
+| 68 | [react-native-snap-carousel](https://github.com/meliorence/react-native-snap-carousel) | 3.9.1 | - | [react-native-snap-carousel](https://github.com/react-native-oh-library/react-native-snap-carousel/releases) | [链接](/zh-cn/react-native-snap-carousel.md) |
+| 69 | [react-native-transitiongroup](https://github.com/madsleejensen/react-native-transitiongroup) | 1.2.0 | - | [react-native-transitiongroup](https://github.com/react-native-oh-library/react-native-transitiongroup/releases) | [链接](/zh-cn/react-native-transitiongroup.md) |
+| 70 | [react-native-translucent-modal](https://github.com/23mf/react-native-translucent-modal) | 1.1.0 | - | [react-native-translucent-modal](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) | [链接](/zh-cn/react-native-translucent-modal.md) |
+| 71 | [redux](https://github.com/reduxjs/redux) | 5.0.1 | - | [redux](https://github.com/reduxjs/redux/releases) | [链接](/zh-cn/redux.md) |
+| 72 | [redux-logger](https://github.com/LogRocket/redux-logger) | 3.0.6 | - | [redux-logger](https://github.com/LogRocket/redux-logger/releases) | [链接](/zh-cn/redux-logger.md) |
+| 73 | [redux-persist](https://github.com/rt2zz/redux-persist) | 6.0.0 | - | [redux-persist](https://github.com/rt2zz/redux-persist/releases) | [链接](/zh-cn/redux-persist.md) |
+| 74 | [axios](https://github.com/axios/axios) | 1.6.7 | - | [axios](https://github.com/axios/axios/releases) | [链接](/zh-cn/axios.md) |
+| 75 | [dayJs](https://github.com/iamkun/dayjs?tab=readme-ov-file) | 1.11.1 | - | [dayJs](https://github.com/iamkun/dayjs/releases) | [链接](/zh-cn/dayjs.md) |
+| 76 | [EventBus](https://github.com/krasimir/EventBus) | 0.2.0 | - | [EventBus](https://github.com/krasimir/EventBus/releases) | [链接](/zh-cn/EventBus.md) |
+| 77 | [immer](https://github.com/immerjs/immer) | 10.0.4 | - | [immer](https://github.com/immerjs/immer/releases) | [链接](/zh-cn/immer.md) |
+| 78 | [JsBarCode](https://github.com/lindell/JsBarcode) | 3.11.6 | - | [JsBarCode](https://github.com/lindell/JsBarcode/releases) | [链接](/zh-cn/jsbarcode.md) |
+| 79 | [Moment](https://github.com/moment/moment) | 2.30.1 | - | [Moment](https://github.com/moment/moment/releases) | [链接](/zh-cn/moment.md) |
+| 80 | [qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) | 1.4.4 | - | [qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator/releases) | [链接](/zh-cn/qrcode-generator.md) |
+| 81 | [react-ahooks](https://github.com/alibaba/hooks) | 3.7.11 | - | [react-ahooks](https://github.com/alibaba/hooks/releases) | [链接](/zh-cn/react-ahooks.md) |
+| 82 | [react-lifecycles-compat](https://github.com/reactjs/react-lifecycles-compat) | 3.0.4 | - | [react-lifecycles-compat](https://github.com/reactjs/react-lifecycles-compat/releases) | [链接](/zh-cn/react-lifecycles-compat.md) |
+| 83 | [react-native-animate-number](https://github.com/wkh237/react-native-animate-number) | 0.1.2 | - | [react-native-animate-number](https://github.com/wkh237/react-native-animate-number/releases) | [链接](/zh-cn/react-native-animate-number.md) |
+| 84 | [react-native-blob-util](https://github.com/react-native-oh-library/react-native-blob-util) | 0.19.6 | 是 | [react-native-blob-util](https://github.com/react-native-oh-library/react-native-blob-util/releases) | [链接](/zh-cn/react-native-blob-util.md) |
+| 85 | [react-native-canvas](https://github.com/iddan/react-native-canvas) | 0.1.39 | - | [react-native-canvas](https://github.com/iddan/react-native-canvas/releases) | [链接](/zh-cn/react-native-canvas.md) |
+| 86 | [react-native-confirmation-code-field](https://github.com/retyui/react-native-confirmation-code-field) | 7.4.0 | - | [react-native-confirmation-code-field](https://github.com/retyui/react-native-confirmation-code-field/releases) | [链接](/zh-cn/react-native-confirmation-code-field.md) |
+| 87 | [react-native-drawer-layout-polyfill](https://github.com/rnc-archive/react-native-drawer-layout-polyfill) | 2.0.0 | - | [react-native-drawer-layout-polyfill](https://github.com/rnc-archive/react-native-drawer-layout-polyfill/releases) | [链接](/zh-cn/react-native-drawer-layout-polyfill.md) |
+| 88 | [react-native-echarts-pro](https://github.com/supervons/react-native-echarts-pro) | 1.9.1 | - | [react-native-echarts-pro](https://github.com/supervons/react-native-echarts-pro/releases) | [链接](/zh-cn/react-native-echarts-pro.md) |
+| 89 | [react-native-fit-Image](https://github.com/huiseoul/react-native-fit-image) | 1.5.5 | - | [react-native-fit-Image](https://github.com/huiseoul/react-native-fit-image/releases) | [链接](/zh-cn/react-native-fit-Image.md) |
+| 90 | [react-native-image-editor](https://github.com/react-native-oh-library/react-native-image-editor) | 3.2.0 | 是 | [react-native-image-editor](https://github.com/react-native-oh-library/react-native-image-editor/releases) | [链接](/zh-cn/react-native-image-editor.md) |
+| 91 | [react-native-image-viewer](https://github.com/react-native-oh-library/react-native-image-viewer) | 3.0.1 | - | [react-native-image-viewer](https://github.com/react-native-oh-library/react-native-image-viewer/releases) | [链接](/zh-cn/react-native-image-viewer.md) |
+| 92 | [react-native-image-zoom](https://github.com/react-native-oh-library/react-native-image-zoom) | 2.1.12 | - | [react-native-image-zoom](https://github.com/react-native-oh-library/react-native-image-zoom/releases) | [链接](/zh-cn/react-native-image-zoom.md) |
+| 93 | [react-native-intersection-observer](https://github.com/react-native-oh-library/react-native-intersection-observer) | 0.2.0 | - | [react-native-intersection-observer](https://github.com/react-native-oh-library/react-native-intersection-observer/releases) | [链接](/zh-cn/react-native-intersection-observer.md) |
+| 94 | [react-native-image-viewing](https://github.com/react-native-oh-library/react-native-image-viewing) | 0.2.2 | | [react-native-image-viewing](https://github.com/react-native-oh-library/react-native-image-viewing/releases) | [链接](/zh-cn/react-native-image-viewing.md) |
+| 95 | [react-native-markdown-display](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig) | 7.0.2 | - | [react-native-markdown-display](https://github.com/react-native-oh-library/react-native-markdown-display/releases) | [链接](/zh-cn/react-native-markdown-display.md) |
+| 96 | [react-native-marquee](https://github.com/react-native-oh-library/react-native-marquee) | 0.5.0 | - | [react-native-marquee](https://github.com/react-native-oh-library/react-native-marquee/releases) | [链接](/zh-cn/react-native-marquee.md) |
+| 97 | [react-native-popover-view](https://github.com/react-native-oh-library/react-native-popover-view) | 5.1.7 | - | [react-native-popover-view](https://github.com/react-native-oh-library/react-native-popover-view/releases) | [链接](/zh-cn/react-native-popover-view.md) |
+| 98 | [react-native-popup-menu](https://github.com/instea/react-native-popup-menu) | 0.16.0 | - | [react-native-popup-menu](https://github.com/instea/react-native-popup-menu/releases) | [链接](/zh-cn/react-native-popup-menu.md) |
+| 99 | [react-native-pull](https://github.com/react-native-oh-library/react-native-pull) | 2.0.4 | - | [react-native-pull](https://github.com/react-native-oh-library/react-native-pull/releases) | [链接](/zh-cn/react-native-pull.md) |
+| 100 | [react-native-reanimated-table](https://github.com/dohooo/react-native-reanimated-table) | 0.2.0 | - | [react-native-reanimated-table](https://github.com/dohooo/react-native-reanimated-table/releases) | [链接](/zh-cn/react-native-reanimated-table.md) |
+| 101 | [react-native-scrollable-tab-view](https://github.com/react-native-oh-library/react-native-scrollable-tab-view) | 1.0.0 | - | [react-native-scrollable-tab-view](https://github.com/react-native-oh-library/react-native-scrollable-tab-view/releases) | [链接](/zh-cn/react-native-scrollable-tab-view.md) |
+| 102 | [react-native-stickyheader](https://github.com/react-native-oh-library/react-native-stickyheader) | 1.1.3 | - | [react-native-stickyheader](https://github.com/react-native-oh-library/react-native-stickyheader/releases) | [链接](/zh-cn/react-native-stickyheader.md) |
+| 103 | [react-native-swipe-list-view](https://github.com/rnc-archive/react-native-drawer-layout-polyfill) | 3.2.9 | - | [react-native-swipe-list-view](https://github.com/rnc-archive/react-native-drawer-layout-polyfill/releases) | [链接](/zh-cn/react-native-swipe-list-view.md) |
+| 104 | [react-native-swiper](https://github.com/leecade/react-native-swiper) | 1.6.0 | - | [react-native-swiper](https://github.com/leecade/react-native-swiper/releases) | [链接](/zh-cn/react-native-swiper.md) |
+| 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 | [toolbar-android](https://github.com/react-native-oh-library/toolbar-android/releases) | 2.0.1 | - | [toolbar-android](https://github.com/react-native-oh-library/toolbar-android/releases) | [链接](/zh-cn/toolbar-android.md) |
## 社区
-[Github Organization: react-native-oh-library](https://github.com/react-native-oh-library)
+[Github Organization: react-native-oh-library](https://github.com/react-native-oh-library)
\ No newline at end of file
diff --git a/zh-cn/axios.md b/zh-cn/axios.md
new file mode 100644
index 0000000000000000000000000000000000000000..906de3b6017a2664918f9877fb8d6a5f0102cf18
--- /dev/null
+++ b/zh-cn/axios.md
@@ -0,0 +1,153 @@
+> 模板版本:v0.1.3
+
+
+
axios
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/axios/axios)
+
+## 安装与使用
+
+#### **npm**
+
+```bash
+npm install axios@1.6.7
+```
+
+#### **bower**
+
+```bash
+bower install axios@1.6.7
+```
+
+#### **yarn**
+
+```bash
+yarn add axios@1.6.7
+```
+
+Once the package is installed, you can import the library using `import` or `require` approach:
+
+```js
+import axios, { isCancel, AxiosError } from "axios";
+```
+
+You can also use the default export, since the named export is just a re-export from the Axios factory:
+
+```js
+import axios from "axios";
+
+console.log(axios.isCancel("something"));
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import axios from "axios";
+//const axios = require('axios'); // legacy way
+
+// Make a request for a user with a given ID
+axios
+ .get("/user?ID=12345")
+ .then(function (response) {
+ // handle success
+ console.log(response);
+ })
+ .catch(function (error) {
+ // handle error
+ console.log(error);
+ })
+ .finally(function () {
+ // always executed
+ });
+
+// Optionally the request above could also be done as
+axios
+ .get("/user", {
+ params: {
+ ID: 12345,
+ },
+ })
+ .then(function (response) {
+ console.log(response);
+ })
+ .catch(function (error) {
+ console.log(error);
+ })
+ .finally(function () {
+ // always executed
+ });
+
+// Want to use async/await? Add the `async` keyword to your outer function/method.
+async function getUser() {
+ try {
+ const response = await axios.get("/user?ID=12345");
+ console.log(response);
+ } catch (error) {
+ console.error(error);
+ }
+}
+```
+
+## 约束与限制
+
+## 兼容性
+
+本文档内容基于以下版本验证通过:
+
+1. 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 的效果。
+
+| Name | Description | Type | Required | HarmonyOS Support |
+| :--------------------------------- | -------------------------- | :------: | :------: | :---------------: |
+| axios.request(config) | 别名发送request请求 | function | / | yes |
+| axios.get(url[, config]) | 别名发送get请求 | function | / | yes |
+| axios.delete(url[, config]) | 别名发送delete请求 | function | / | yes |
+| axios.head(url[, config]) | 别名发送head请求 | function | / | yes |
+| axios.options(url[, config]) | 别名发送options请求 | function | / | yes |
+| axios.post(url[, data[, config]]) | 别名发送post请求 | function | / | yes |
+| axios.put(url[, data[, config]]) | 别名发送put请求 | function | / | yes |
+| axios.patch(url[, data[, config]]) | 别名发送patch请求 | function | / | yes |
+| axios#request(config) | 实例发送request请求 | function | / | yes |
+| axios#get(url[, config]) | 实例发送get请求 | function | / | yes |
+| axios#delete(url[, config]) | 实例发送delete请求 | function | / | yes |
+| axios#head(url[, config]) | 实例发送head请求 | function | / | yes |
+| axios#options(url[, config]) | 实例发送options请求 | function | / | yes |
+| axios#post(url[, data[, config]]) | 实例发送post请求 | function | / | yes |
+| axios#put(url[, data[, config]]) | 实例发送put请求 | function | / | yes |
+| axios#patch(url[, data[, config]]) | 实例发送patch请求 | function | / | yes |
+| url | 配置中请求的地址 | function | / | yes |
+| method | 配置中请求时使用的方法 | function | / | yes |
+| baseURL | 配置中自动加在url地址前 | function | / | yes |
+| headers | 配置中自定义请求头 | function | / | yes |
+| params | 配置中请求一起发送时的参数 | function | / | yes |
+| data | 配置中请求体发送的数据 | function | / | yes |
+| timeout | 配置中请求超时的毫秒数 | function | / | yes |
+| proxy | 配置中设置代理 | function | / | yes |
+| Response Schema | 响应类型 | function | / | yes |
+| Config Defaults | 默认配置 | function | / | yes |
+| requestInterceptors | 请求拦截器 | function | / | yes |
+| responseInterceptors | 响应拦截器 | function | / | yes |
+| Handling Errors | 错误处理 | function | / | yes |
+| AbortController | 中止控制器 | function | / | yes |
+| CancelToken | 取消令牌 | function | / | yes |
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/Kureev/react-native-blur/blob/master/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/dayJs.md b/zh-cn/dayJs.md
new file mode 100644
index 0000000000000000000000000000000000000000..ce936d6b1d46dff396610dc37d2c7333abf8a5f1
--- /dev/null
+++ b/zh-cn/dayJs.md
@@ -0,0 +1,341 @@
+> 模板版本:v0.1.3
+
+
+
DayJs
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/iamkun/dayjs?tab=readme-ov-file)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install dayjs --save
+```
+
+#### **yarn**
+
+```bash
+yarn dayjs --save
+```
+
+
+
+快速使用:
+
+```bash
+import dayjs from 'dayjs'
+
+dayjs().format()
+```
+
+## 约束与限制
+
+## 兼容性
+
+本文档内容基于以下版本验证通过:
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.59;
+
+## API
+
+详情请查看[DayJs官方文档](https://dayjs.gitee.io/zh-CN/)
+
+以下dayjs为day.js导出的对象,即:
+
+```bash
+import dayjs from 'dayjs';
+```
+
+下面的代码展示了这个库的基本使用示例:
+
+```tsx
+import React, { useState, useEffect, useRef } from "react";
+import { View, Text, Button, StyleSheet } from "react-native";
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+
+const DayJsDemo = () => {
+ dayjs.extend(duration);
+
+ return (
+
+ ValueAssignmentDemo: 取值/赋值
+
+ 获取或设置毫秒:{dayjs().millisecond()}
+
+ 获取或设置秒:{dayjs().second()}
+ 获取或设置分钟:{dayjs().minute()}
+ 获取或设置小时:{dayjs().hour()}
+
+ 获取或设置月份里的日期:{dayjs().date()}
+
+ 获取或设置星期几:{dayjs().day()}
+ 获取或设置月份:{dayjs().month()}
+ 获取或设置年份。:{dayjs().year()}
+
+ 从Dayjs对象中获取相应信息的 getter:年{dayjs().get("year")} 月
+ {dayjs().get("month")}
+
+
+ 格式化{dayjs().format("YYYY-MM-DD")}
+
+ 时长{dayjs.duration(100)}
+
+ 时间比较{dayjs().isSame("2011-01-01", "year") ? "相等" : "不相等"}
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ paddingTop: 50,
+ padding: 8,
+ },
+ navigationContainer: {
+ flex: 1,
+ paddingTop: 50,
+ padding: 8,
+ },
+ textCommon: {
+ marginBottom: 10,
+ fontSize: 15,
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ interval: {
+ marginBottom: 10,
+ },
+ viewBox: {
+ width: "100%",
+ borderWidth: 1,
+ marginBottom: 2,
+ padding: 5,
+ },
+ viewButtonBox: {
+ width: "100%",
+ flexDirection: "row",
+ alignItems: "center",
+ marginBottom: 10,
+ },
+ formatLabel: {
+ marginRight: 2,
+ fontSize: 16,
+ fontWeight: "700",
+ },
+ flexRowCenter: {
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ flexColCenter: {
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ headerTitle: {
+ fontSize: 18,
+ fontWeight: "700",
+ },
+ componentTitle: {
+ fontSize: 25,
+ fontWeight: "700",
+ marginBottom: 20,
+ },
+ inputStyle: {
+ width: 200,
+ height: 40,
+ borderWidth: 1,
+ borderRadius: 10,
+ },
+});
+export default DayJsDemo;
+```
+
+如下是已验证接口展示:
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+#### **Get + Set**
+
+| Name | Description | Type | Required | HarmonyOS Support | note |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | ------------------------------------------------- |
+| millisecond | Gets or sets the milliseconds. | function | no | yes | |
+| second | Gets or sets the seconds. | function | no | yes | |
+| minute | Gets or sets the minutes. | function | no | yes | |
+| hour | Gets or sets the hour. | function | no | yes | |
+| date | Gets or sets the day of the month | function | no | yes | |
+| day | Gets or sets the day of the week. | function | no | yes | |
+| weekday | Gets or sets the day of the week according to the locale. | function | no | yes | This requires the `Weekday` plugin to work |
+| isoWeekday | Gets or sets the ISO day of the week with 1 being Monday and 7 being Sunday. | function | no | yes | This requires the `IsoWeek` plugin to work |
+| dayOfYear | Gets or sets the day of the year. | function | no | yes | This requires the `DayOfYear` plugin to work |
+| week | Gets or sets the week of the year. | function | no | yes | This requires the `WeekOfYear` plugin to work |
+| isoWeek | Gets or sets the ISO week of the year. | function | no | yes | This requires the `IsoWeek` plugin to work |
+| month | Gets or sets the month. | function | no | yes | |
+| quarter | Gets or sets the quarter. | function | no | yes | This requires the `QuarterOfYear` plugin to work |
+| year | Gets or sets the year. | function | no | yes | |
+| weekYear | Gets the week-year according to the locale. | function | no | yes | This requires the `WeekYear` plugin to work |
+| isoWeekYear | Gets the ISO week-year. | function | no | yes | This requires the `IsoWeek` plugin to work |
+| isoWeeksInYear | Gets the number of weeks in the current year, according to ISO weeks. | function | no | yes | This requires the `IsoWeeksInYear` plugin to work |
+| get | String getter, returns the corresponding information getting from Day.js object. Units are case insensitive, and support plural and short forms. Note, short forms are case sensitive. | function | no | yes | |
+| set | Generic setter, accepting unit as first argument, and value as second, returns a new instance with the applied changes. | function | no | yes | |
+
+#### **Manipulate**
+
+| Name | Description | Type | Required | HarmonyOS Support | note |
+| --------- | -------------------------------------------------------------------------- | -------- | -------- | ----------------- | -------------------------------------- |
+| add | Returns a cloned Day.js object with a specified amount of time added. | function | no | yes | |
+| subtract | Returns a cloned Day.js object with a specified amount of time subtracted. | function | no | yes | |
+| startOf | Returns a cloned Day.js object and set it to the start of a unit of time. | function | no | yes | |
+| endOf | Returns a cloned Day.js object and set it to the end of a unit of time. | function | no | yes | |
+| local | This returns a Day.js object with a flag to use local time. | function | no | yes | This requires the `UTC` plugin to work |
+| utc | This returns a Day.js object with a flag to use UTC time. | function | no | yes | This requires the `UTC` plugin to work |
+| utcOffset | Get the UTC offset in minutes. | function | no | yes | This requires the `UTC` plugin to work |
+
+#### **Display**
+
+| Name | Description | Type | Required | HarmonyOS Support | note |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | ----------------------------------------------- |
+| format | Get the formatted date according to the string of tokens passed in. | function | no | yes | |
+| fromNow | Returns the string of relative time from now.If you pass true, you can get the value without the suffix. | function | no | yes | This requires the `RelativeTime` plugin to work |
+| from | Returns the string of relative time from X.If you pass true, you can get the value without the suffix. | function | no | yes | This requires the `RelativeTime` plugin to work |
+| toNow | Returns the string of relative time to now.If you pass true, you can get the value without the suffix. | function | no | yes | This requires the `RelativeTime` plugin to work |
+| to | Returns the string of relative time to X.If you pass true, you can get the value without the suffix. | function | no | yes | This requires the `RelativeTime` plugin to work |
+| calendar | Calendar time displays time relative to a given reference time (defaults to now) but does so slightly differently than dayjs#fromNow. | function | no | yes | This requires the `Calendar` plugin to work |
+| diff | This indicates the difference between two date-time in the specified unit.To get the difference in milliseconds, use dayjs#diff.To get the difference in another unit of measurement, pass that measurement as the second argument. | function | no | yes | |
+| valueOf | This returns the number of milliseconds since the Unix Epoch of the Day.js object. | function | no | yes | |
+| unix | This returns the Unix timestamp (the number of seconds since the Unix Epoch) of the Day.js object. | function | no | yes | |
+| daysInMonth | Get the number of days in the current month. | function | no | yes | |
+| toDate | To get a copy of the native Date object parsed from the Day.js object use dayjs#toDate. | function | no | yes | |
+| toArray | Returns an array that mirrors the parameters | function | no | yes | This requires the `ToArray` plugin to work |
+| toJSON | To serialize as an ISO 8601 string. | function | no | yes | |
+| toISOString | To format as an ISO 8601 string. | function | no | yes | |
+| toObject | Returns an object with the date's properties. | function | no | yes | This requires the `ToObject` plugin to work |
+| toString | Returns a string representation of the date. | function | no | yes | |
+
+#### **Query**
+
+| Name | Description | Type | Required | HarmonyOS Support | note |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | ----------------- | ------------------------------------------------- |
+| isBefore | This indicates whether the Day.js object is before the other supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. In that case, the comparison respects the given unit and the units above. | function | no | yes | |
+| isSame | This indicates whether the Day.js object is the same as the other supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. | function | no | yes | |
+| isAfter | This indicates whether the Day.js object is after the other supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. In that case the comparision respects the given unit and the units above. | function | no | yes | |
+| isSameOrBefore | This indicates whether the Day.js object is the same or before another supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. | function | no | yes | This requires the `IsSameOrBefore` plugin to work |
+| isSameOrAfter | This indicates whether the Day.js object is the same or after another supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. | function | no | yes | This requires the `IsSameOrAfter` plugin to work |
+| isBetween | This indicates whether the Day.js object is between two other supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the third parameter. In that case the comparision respects the given unit and the units above. | function | no | yes | This requires the `IsBetween` plugin to work |
+| isDayjs | This indicates whether a variable is a Day.js object or not. | function | no | yes | |
+| isLeapYear | This indicates whether the Day.js object's year is a leap year or not. | function | no | yes | This requires the `IsLeapYear` plugin to work |
+
+#### **Durations**
+
+| Name | Description | Type | Required | HarmonyOS Support | note |
+| -------- | ------------------------------------------------------------------------------------ | -------- | -------- | ----------------- | ------------------------------------------- |
+| duration | To create a duration, call dayjs.duration() with the length of time in milliseconds. | function | no | yes | This requires the `Duration` plugin to work |
+
+#### **Plugins**
+
+加载插件:
+
+```bash
+import duration from 'dayjs/plugin/duration'
+
+dayjs.extend(duration)
+```
+
+| Name | Description | Required | HarmonyOS Support |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------- |
+| advancedFormat | AdvancedFormat extends dayjs().format API to supply more format options. | no | yes |
+| arraySupport | ArraySupport extends dayjs(), dayjs.utc APIs to support array argument. | no | yes |
+| bigIntSupport | BigIntSupport extends dayjs(), dayjs.unix APIs to support BigInt argument. | no | yes |
+| buddhistEra | BuddhistEra extends dayjs().format API to supply Buddhist Era (B.E.) format options. | no | yes |
+| calendar | Calendar adds .calendar API to return a string to display calendar time | no | yes |
+| customParseFormat | CustomParseFormat extends dayjs() constructor to support custom formats of input strings. | no | yes |
+| dayOfYear | DayOfYear adds .dayOfYear() API to returns a number indicating the Dayjs's day of the year, or to set the day of the year. | no | yes |
+| devHelper | DevHelper adds some helper function to give you more hints and warnings while using Day.js. | no | yes |
+| duration | Duration adds .duration .isDuration APIs to support duration. | no | yes |
+| isBetween | IsBetween adds .isBetween() API to returns a boolean indicating if a date is between two other dates. | no | yes |
+| isLeapYear | IsLeapYear adds .isLeapYear API to returns a boolean indicating whether the Dayjs's year is a leap year or not. | no | yes |
+| isSameOrAfter | IsSameOrAfter adds .isSameOrAfter() API to return a boolean indicating if a date is the same or after another date. | no | yes |
+| isSameOrBefore | IsSameOrBefore adds .isSameOrBefore() API to returns a boolean indicating if a date is same or before another date. | no | yes |
+| isToday | IsToday adds .isToday() API to indicates whether the Day.js object is today or not. | no | yes |
+| isTomorrow | IsTomorrow adds .isTomorrow() API to indicates whether the Day.js object is tomorrow or not. | no | yes |
+| isYesterday | IsYesterday adds .isYesterday() API to indicates whether the Day.js object is yesterday or not. | no | yes |
+| isoWeek | IsoWeek adds .isoWeek() API to get or set the ISO week of the year. And adds .isoWeekday() to get or set ISO day of the week and .isoWeekYear() to get ISO week-year, and extends .startOf .endOf APIs to support unit isoWeek. | no | yes |
+| isoWeeksInYear | IsoWeeksInYear adds .isoWeeksInYear() API to return a number to get the number of weeks in year, according to ISO weeks. | no | yes |
+| localeData | LocaleData extends dayjs().localeData API to supply locale data. | no | yes |
+| localizedFormat | LocalizedFormat extends dayjs().format API to supply localized format options. | no | yes |
+| minMax | MinMax adds .min .max APIs to return a dayjs to compare given dayjs instances. This accepts both multiple arguments and array that contains Day.js instance. | no | yes |
+| objectSupport | ObjectSupport extends dayjs(), dayjs.utc, dayjs().set, dayjs().add, dayjs().subtract APIs to support object argument. | no | yes |
+| pluralGetSet | PluralGetSet adds plural getter & setter APIs .milliseconds(), .seconds(), .minutes(), .hours(), .days(), .weeks(), .isoWeeks(), .months(), .quarters(), .years(), .dates(). | no | yes |
+| quarterOfYear | QuarterOfYear adds .quarter() API to return to which quarter of the year belongs a date, and extends .add .subtract .startOf .endOf APIs to support unit quarter. | no | yes |
+| relativeTime | RelativeTime adds .from .to .fromNow .toNow APIs to formats date to relative time strings (e.g. 3 hours ago). | no | yes |
+| timezone | Timezone adds dayjs.tz .tz .tz.guess .tz.setDefault APIs to parse or display between time zones. | no | yes |
+| toArray | ToArray adds .toArray() API to return an array that mirrors the parameters | no | yes |
+| toObject | ToObject adds .toObject() API to return an object with the date's properties. | no | yes |
+| updateLocale | UpdateLocale adds .updateLocale API to update a locale's properties. | no | yes |
+| utc | UTC adds .utc .local .isUTC APIs to parse or display in UTC. | no | yes |
+| weekOfYear | WeekOfYear adds .week() API to returns a number indicating the Dayjs's week of the year. | no | yes |
+| weekYear | WeekYear adds .weekYear() API to get locale aware week of the year. | no | yes |
+| weekday | Weekday adds .weekday() API to get or set locale aware day of the week. | no | yes |
+
+#### **格式化时间**
+
+| **Format** | **Description** | **Output** |
+| ---------- | --------------------------------------------------------- | --------------------- |
+| YY | Two-digit year | 18 |
+| YYYY | Four-digit year | 2018 |
+| M | The month, beginning at 1 | 1-12 |
+| MM | The month, 2-digits | 01-12 |
+| MMM | The abbreviated month name | Jan-Dec |
+| MMMM | The full month name | January-December |
+| D | The day of the month | 1-31 |
+| DD | The day of the month, 2-digits | 01-31 |
+| d | The day of the week, with Sunday as 0 | 0-6 |
+| dd | The min name of the day of the week | Su-Sa |
+| ddd | The short name of the day of the week | Sun-Sat |
+| dddd | The name of the day of the week | Sunday-Saturday |
+| H | The hour | 0-23 |
+| HH | The hour, 2-digits | 00-23 |
+| h | The hour, 12-hour clock | 1-12 |
+| hh | The hour, 12-hour clock, 2-digits | 01-12 |
+| m | The minute | 0-59 |
+| mm | The minute, 2-digits | 00-59 |
+| s | The second | 0-59 |
+| ss | The second, 2-digits | 00-59 |
+| SSS | The millisecond, 3-digits | 000-999 |
+| Z | The offset from UTC, ±HH:mm | +05:00 |
+| ZZ | The offset from UTC, ±HHmm | +0500 |
+| A | | AM PM |
+| a | | am pm |
+| Q | Quarter | 1-4 |
+| Do | Day of Month with ordinal | 1st 2nd ... 31st |
+| k | The hour, beginning at 1 | 1-24 |
+| kk | The hour, 2-digits, beginning at 1 | 01-24 |
+| X | Unix Timestamp in second | 1360013296 |
+| x | Unix Timestamp in millisecond | 1360013296123 |
+| w | Week of year ( dependent WeekOfYear plugin ) | 1 2 ... 52 53 |
+| ww | Week of year, 2-digits ( dependent WeekOfYear plugin ) | 01 02 ... 52 53 |
+| W | ISO Week of year ( dependent IsoWeek plugin ) | 1 2 ... 52 53 |
+| WW | ISO Week of year, 2-digits ( dependent IsoWeek plugin ) | 01 02 ... 52 53 |
+| wo | Week of year with ordinal ( dependent WeekOfYear plugin ) | 1st 2nd ... 52nd 53rd |
+| gggg | Week Year ( dependent WeekYear plugin ) | 2017 |
+| GGGG | ISO Week Year ( dependent IsoWeek plugin ) | 2017 |
+| z | Abbreviated named offset ( dependent Timezone plugin ) | EST |
+| zzz | Unabbreviated named offset ( dependent Timezone plugin ) | Eastern Standard Time |
+
+## 其他
+
+## 开源协议
diff --git a/zh-cn/jsbarcode.md b/zh-cn/jsbarcode.md
new file mode 100644
index 0000000000000000000000000000000000000000..47ca93b509bf36bf1bb7a1578c629f9b0bb18654
--- /dev/null
+++ b/zh-cn/jsbarcode.md
@@ -0,0 +1,239 @@
+> 模板版本:v0.1.3
+
+
+
JsBarCode
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/lindell/JsBarcode)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install jsbarcode --save@3.11.6
+```
+
+#### **yarn**
+
+```bash
+yarn add jsbarcode@3.11.6
+```
+
+
+
+快速使用:
+
+```bash
+import JsBarCode from 'jsbarcode';
+```
+
+> [!WARNING] 使用时 import 的库名不变。
+
+下面的代码展示了这个库的基本使用示例:
+
+### **With svg:**
+
+> [!tip] [jsbarcode库依赖react-native-svg库进行条形码展示, svg 当前仅实现部分属性,其余还未实现鸿蒙化] > [!tip] [详见react-native-svg](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg.md)
+
+```js
+import { useMemo } from 'react';
+import JsBarcode from 'jsbarcode';
+import { SvgXml } from 'react-native-svg';
+import { DOMImplementation, XMLSerializer } from 'xmldom';
+
+export const Barcode = (props: Props) => {
+ const [jsbarcodeInfo, setJsbarcodeInfo] = useState('');
+ const {
+ width ,
+ height,
+ format,
+ ... // options
+ } = props.options;
+
+ const svgText = useMemo(() => {
+ const doc = new DOMImplementation().createDocument(null, 'html');
+ const svgNode = doc.createElementNS(null, 'svg');
+
+ JsBarcode(svgNode, props.value, {
+ xmlDocument: doc,
+ width,
+ height,
+ format,
+ ... // options
+ });
+
+ svgNode.removeAttribute('style')
+ setJsbarcodeInfo(new XMLSerializer().serializeToString(svgNode));
+
+ return new XMLSerializer().serializeToString(svgNode);
+ }, [props]);
+
+ return ;
+};
+
+// 页面展示条形码
+import { Barcode } from 'XXXX';
+function JsbarcodeSvgDemo() {
+ return (
+
+ )
+}
+```
+
+### **With canvas:**
+
+> [!tip] [react-native-canvas库暂未鸿蒙化,当前无法使用canvas渲染,下面用法仅供参考]
+
+```js
+var JsBarcode = require("jsbarcode");
+
+// Canvas v1
+var Canvas = require("canvas");
+// Canvas v2
+var { createCanvas } = require("canvas");
+
+// Canvas v1
+var canvas = new Canvas();
+// Canvas v2
+var canvas = createCanvas();
+
+JsBarcode(canvas, "Hello");
+```
+
+如下是Options使用示例展示:
+
+```js
+// format
+JsBarcode("#barcode", "123456789012", {
+ format: "EAN13",
+});
+JsBarcode("#barcode", "123456789012", {
+ format: "CODE39",
+});
+
+// width
+JsBarcode("#barcode", "Wider barcode", {
+ width: 3,
+});
+
+// height
+JsBarcode("#barcode", "Tall barcode", {
+ height: 150,
+});
+
+// Text
+JsBarcode("#barcode", "Hello", {
+ text: "Hi!",
+});
+
+// fontOptions
+JsBarcode("#barcode", "Bold text", {
+ fontOptions: "bold",
+});
+
+// font
+JsBarcode("#barcode", "Fantasy font", {
+ font: "fantasy",
+});
+
+// textAlign
+JsBarcode("#barcode", "Left text", {
+ textAlign: "left",
+});
+
+// textPosition
+JsBarcode("#barcode", "Top text", {
+ textPosition: "top",
+});
+
+// textMargin
+JsBarcode("#barcode", "Text margin", {
+ textMargin: 25,
+});
+
+// fontSize
+JsBarcode("#barcode", "Bigger text", {
+ fontSize: 40,
+});
+
+// background
+JsBarcode("#barcode", "Blue background", {
+ background: "#ccffff",
+});
+
+// lineColor
+JsBarcode("#barcode", "Red lines", {
+ lineColor: "#990000",
+});
+
+// margins
+JsBarcode("#barcode", "Bigger margins", {
+ margin: 30,
+ background: "#dddddd",
+});
+
+JsBarcode("#barcode", "Left/Top margin", {
+ marginLeft: 30,
+ marginTop: 50,
+ background: "#dddddd",
+});
+
+// flat
+JsBarcode("#barcode", "29012343", {
+ format: "EAN8",
+ flat: false,
+});
+
+JsBarcode("#barcode", "29012343", {
+ format: "EAN8",
+ flat: true,
+});
+```
+
+#### **All Options**
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | HarmonyOS Support | Remark |
+| ------------ | ----------------- | ------------------ | -------- | ----------------- | --------------------------------------------------------------------- |
+| format | "auto" (CODE128) | String | no | yes | |
+| width | 2 | Number | no | yes | |
+| height | 100 | Number | no | yes | |
+| displayValue | true | Boolean | no | yes | |
+| text | undefined | String | no | yes | |
+| fontOptions | "" | String | no | yes | react-native-svg目前不支持fontOptions: 'italic',导致条形码效果不生效 |
+| font | "monospace" | String | no | yes | react-native-svg目前不支持font设置,导致条形码效果不生效 |
+| textAlign | "center" | String | no | yes | |
+| textPosition | "bottom" | String | no | yes | |
+| textMargin | 2 | Number | no | yes | |
+| fontSize | 20 | Number | no | yes | |
+| background | "#ffffff" | String (CSS color) | no | yes | |
+| lineColor | "#000000" | String (CSS color) | no | yes | |
+| margin | 10 | Number | no | yes | |
+| marginTop | undefined | Number | no | yes | |
+| marginBottom | undefined | Number | no | yes | |
+| marginLeft | undefined | Number | no | yes | |
+| marginRight | undefined | Number | no | yes | |
+| flat | false | Boolean | no | yes | 仅支持format:EAN8/EAN13 |
+| valid | function(valid){} | Function | no | yes | |
+
+## 遗留问题
+
+jsbarcode库依赖react-native-svg库进行条形码展示, 因svg 当前仅实现部分属性,其余还未实现鸿蒙化,目前在HarmonyOS上条形码的文本位置效果不对,fontSize显示比较小。
+
+## 其他
+
+## 开源协议
diff --git a/zh-cn/moment.md b/zh-cn/moment.md
new file mode 100644
index 0000000000000000000000000000000000000000..3b0902769810652e8945900629cae20aee8a478e
--- /dev/null
+++ b/zh-cn/moment.md
@@ -0,0 +1,260 @@
+> 模板版本:v0.1.3
+
+
+
Moment
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/moment/moment)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install moment@2.30.1
+```
+
+#### **yarn**
+
+```bash
+yarn add moment@2.30.1
+```
+
+
+
+快速使用:
+
+```bash
+import moment from 'moment';
+moment().format();
+```
+
+设定moment区域:
+
+```bash
+// import 方式
+import 'moment/locale/zh-cn';
+moment.locale('zh-cn');
+```
+
+## 约束与限制
+
+## 兼容性
+
+本文档内容基于以下版本验证通过:
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.59;
+
+## API
+
+详情请查看[moment官方文档](https://momentjs.com/docs/#/use-it/)
+
+以下moment为moment.js导出的对象,即:
+
+```bash
+import moment from 'moment';
+```
+
+下面的代码展示了这个库的基本使用示例:
+
+```js
+// 获取今天0时0分0秒
+moment().startOf("day");
+// 获取当前月第一天0时0分0秒
+moment().startOf("month");
+// 获取当前月的总天数
+moment().daysInMonth();
+// 获取时间戳(以秒为单位)
+moment().format("X"); // 返回值为字符串类型
+moment().unix(); // 返回值为数值型
+// 获取时间戳(以毫秒为单位)
+moment().format("x"); // 返回值为字符串类型
+moment().valueOf(); // 返回值为数值型
+// 获取年份
+moment().year();
+moment().get("year");
+// 获取月份
+moment().month(); // (0~11, 0: January, 11: December)
+moment().get("month");
+// 获取一个星期中的某一天
+moment().date();
+moment().get("date");
+// 获取小时
+moment().hours();
+moment().get("hours");
+// 获取分钟
+moment().minutes();
+moment().get("minutes");
+// 获取当前的年月日时分秒
+moment().toArray(); // [years, months, date, hours, minutes, seconds, milliseconds]
+moment().toObject(); // {years: xxxx, months: x, date: xx ...}
+
+// 设置年份
+moment().year(2019);
+moment().set("year", 2019);
+moment().set({ year: 2019 });
+// 设置月份
+moment().month(11); // (0~11, 0: January, 11: December)
+moment().set("month", 11);
+// 设置某个月中的某一天
+moment().date(15);
+moment().set("date", 15);
+// 设置某个星期中的某一天
+moment().weekday(0); // 设置日期为本周第一天(周日)
+moment().isoWeekday(1); // 设置日期为本周周一
+moment().set("weekday", 0);
+moment().set("isoWeekday", 1);
+// 设置小时
+moment().hours(12);
+moment().set("hours", 12);
+// 年份+1
+moment().add(1, "years");
+moment().add({ years: 1 });
+
+// 获取两个日期之间的时间差
+let start_date = moment().subtract(1, "weeks");
+let end_date = moment();
+end_date.diff(start_date); // 返回毫秒数
+end_date.diff(start_date, "months"); // 0
+end_date.diff(start_date, "weeks"); // 1
+end_date.diff(start_date, "days"); // 7
+start_date.diff(end_date, "days"); // -7
+// 转化为JavaScript原生Date对象
+moment().toDate();
+new Date(moment());
+
+// 格式化年月日: 'xxxx年xx月xx日'
+moment().format("YYYY年MM月DD日");
+// 格式化年月日: 'xxxx-xx-xx'
+moment().format("YYYY-MM-DD");
+// 格式化时分秒(24小时制): 'xx时xx分xx秒'
+moment().format("HH时mm分ss秒");
+// 格式化时分秒(12小时制):'xx:xx:xx am/pm'
+moment().format("hh:mm:ss a");
+```
+
+如下是已验证接口展示:
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+#### **Get + Set**
+
+| Name | Description | Type | Required | HarmonyOS Support |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| millisecond | Gets or sets the milliseconds. | function | no | yes |
+| second | Gets or sets the seconds. | function | no | yes |
+| minute | Gets or sets the minutes. | function | no | yes |
+| hour | Gets or sets the hour. | function | no | yes |
+| date | Gets or sets the day of the month | function | no | yes |
+| day | Gets or sets the day of the week. | function | no | yes |
+| weekday | Gets or sets the day of the week according to the locale. | function | no | yes |
+| isoWeekday | Gets or sets the ISO day of the week with 1 being Monday and 7 being Sunday. | function | no | yes |
+| dayOfYear | Gets or sets the day of the year. | function | no | yes |
+| week | Gets or sets the week of the year. | function | no | yes |
+| isoWeek | Gets or sets the ISO week of the year. | function | no | yes |
+| month | Gets or sets the month. | function | no | yes |
+| quarter | Gets the quarter (1 to 4). | function | no | yes |
+| year | Gets or sets the year. | function | no | yes |
+| weekYear | Gets or sets the week-year according to the locale. | function | no | yes |
+| isoWeekYear | Gets or sets the ISO week-year. | function | no | yes |
+| weeksInYear | Gets the number of weeks according to locale in the current moment's year. | function | no | yes |
+| isoWeeksInYea | Gets the number of weeks in the current moment's year, according to ISO weeks. | function | no | yes |
+| get | String getter. In general Units are case insensitive, and support plural and short forms: year (years, y), month (months, M), date (dates, D), hour (hours, h), minute (minutes, m), second (seconds, s), millisecond (milliseconds, ms). | function | no | yes |
+| set | Generic setter, accepting unit as first argument, and value as second: Units are case insensitive, and support plural and short forms: year (years, y), month (months, M), date (dates, D), hour (hours, h), minute (minutes, m), second (seconds, s), millisecond (milliseconds, ms). | function | no | yes |
+
+#### **Manipulate**
+
+| Name | Description | Type | Required | HarmonyOS Support |
+| --------- | --------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| add | Mutates the original moment by adding time. | function | no | yes |
+| subtract | Mutates the original moment by subtracting time. | function | no | yes |
+| startOf | Mutates the original moment by setting it to the start of a unit of time. | function | no | yes |
+| endOf | Mutates the original moment by setting it to the end of a unit of time. | function | no | yes |
+| local | Sets a flag on the original moment to use local time to display a moment instead of the original moment's time. | function | no | yes |
+| utc | Sets a flag on the original moment to use UTC to display a moment instead of the original moment's time. | function | no | yes |
+| utcOffset | Get or set the UTC offset in minutes. | function | no | yes |
+
+#### **Display**
+
+| Name | Description | Type | Required | HarmonyOS Support |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| format | This is the most robust display option. It takes a string of tokens and replaces them with their corresponding values. | function | no | yes |
+| fromNow | A common way of displaying time is handled by moment#fromNow. This is sometimes called timeago or relative time. | function | no | yes |
+| from | You may want to display a moment in relation to a time other than now. In that case, you can use moment#from. | function | no | yes |
+| toNow | A common way of displaying time is handled by moment#toNow. This is sometimes called timeago or relative time. | function | no | yes |
+| to | You may want to display a moment in relation to a time other than now. In that case, you can use moment#to. | function | no | yes |
+| calendar | Calendar time displays time relative to a given referenceDay (defaults to the start of today), but does so slightly differently than moment#fromNow. | function | no | yes |
+| diff | To get the difference in milliseconds, use moment#diff like you would use moment#from. | function | no | yes |
+| valueOf | moment#valueOf simply outputs the number of milliseconds since the Unix Epoch, just like Date#valueOf. | function | no | yes |
+| unix | moment#unix outputs a Unix timestamp (the number of seconds since the Unix Epoch). | function | no | yes |
+| daysInMonth | Get the number of days in the current month. | function | no | yes |
+| toDate | To get a copy of the native Date object that Moment.js wraps, use moment#toDate. | function | no | yes |
+| toArray | This returns an array that mirrors the parameters from new Date(). | function | no | yes |
+| toJSON | When serializing an object to JSON, if there is a Moment object, it will be represented as an ISO8601 string, adjusted to UTC. | function | no | yes |
+| toISOString | Formats a string to the ISO8601 standard. | function | no | yes |
+| toObject | This returns an object containing year, month, day-of-month, hour, minute, seconds, milliseconds. | function | no | yes |
+| toString | Returns an english string in a similar format to JS Date's .toString(). | function | no | yes |
+| inspect | Returns a machine readable string, that can be evaluated to produce the same moment. Because of the name it's also used in node interactive shell to display objects. | function | no | yes |
+
+#### **Query**
+
+| Name | Description | Type | Required | HarmonyOS Support |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| isBefore | Check if a moment is before another moment. The first argument will be parsed as a moment, if not already so. | function | no | yes |
+| isSame | Check if a moment is the same as another moment. The first argument will be parsed as a moment, if not already so. | function | no | yes |
+| isAfter | Check if a moment is after another moment. The first argument will be parsed as a moment, if not already so. | function | no | yes |
+| isSameOrBefore | Check if a moment is before or the same as another moment. The first argument will be parsed as a moment, if not already so. | function | no | yes |
+| isSameOrAfter | Check if a moment is after or the same as another moment. The first argument will be parsed as a moment, if not already so. | function | no | yes |
+| isBetween | Check if a moment is between two other moments, optionally looking at unit scale (minutes, hours, days, etc). | function | no | yes |
+| isDST | moment#isDST checks if the current moment is in daylight saving time. | function | no | yes |
+| isLeapYear | moment#isLeapYear returns true if that year is a leap year, and false if it is not. | function | no | yes |
+| isMoment | To check if a variable is a moment object, use moment.isMoment(). | function | no | yes |
+| isDate | To check if a variable is a native js Date object, use moment.isDate(). | function | no | yes |
+
+#### **Durations**
+
+| Name | Description | Type | Required | HarmonyOS Support |
+| -------- | ------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| duration | To create a duration, call moment.duration() with the length of time in milliseconds. | function | no | yes |
+
+#### **格式化时间**
+
+| **格式代码** | **说明** | **返回值例子** |
+| ------------ | -------------------------- | -------------------------- |
+| M | 数字表示的月份,没有前导零 | 1到12 |
+| MM | 数字表示的月份,有前导零 | 01到12 |
+| MMM | 三个字母缩写表示的月份 | Jan到Dec |
+| MMMM | 月份,完整的文本格式 | January到December |
+| Q | 季度 | 1到4 |
+| D | 月份中的第几天,没有前导零 | 1到31 |
+| DD | 月份中的第几天,有前导零 | 01到31 |
+| d | 星期中的第几天,数字表示 | 0到6,0表示周日,6表示周六 |
+| ddd | 三个字母表示星期中的第几天 | Sun到Sat |
+| dddd | 星期几,完整的星期文本 | 从Sunday到Saturday |
+| w | 年份中的第几周 | 如42:表示第42周 |
+| YYYY | 四位数字完整表示的年份 | 如:2014 或 2000 |
+| YY | 两位数字表示的年份 | 如:14 或 98 |
+| A | 大写的AM PM | AM PM |
+| a | 小写的am pm | am pm |
+| HH | 小时,24小时制,有前导零 | 00到23 |
+| H | 小时,24小时制,无前导零 | 0到23 |
+| hh | 小时,12小时制,有前导零 | 00到12 |
+| h | 小时,12小时制,无前导零 | 0到12 |
+| m | 没有前导零的分钟数 | 0到59 |
+| mm | 有前导零的分钟数 | 00到59 |
+| s | 没有前导零的秒数 | 1到59 |
+| ss | 有前导零的描述 | 01到59 |
+| X | Unix时间戳 | 1411572969 |
+
+## 其他
+
+## 开源协议
diff --git a/zh-cn/react-ahooks.md b/zh-cn/react-ahooks.md
new file mode 100644
index 0000000000000000000000000000000000000000..5bd375133a098445ed5c66dc2c142f1fa06ef1f8
--- /dev/null
+++ b/zh-cn/react-ahooks.md
@@ -0,0 +1,158 @@
+
+
+
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/alibaba/hooks)
+
+## 📚 文档
+
+- [English](https://ahooks.js.org/)
+- [中文](https://ahooks.js.org/zh-CN/)
+
+## ✨ 特性
+
+- 易学易用
+- 支持 SSR
+- 对输入输出函数做了特殊处理,避免闭包问题
+- 包含大量提炼自业务的高级 Hooks
+- 包含丰富的基础 Hooks
+- 使用 TypeScript 构建,提供完整的类型定义文件
+
+## 📦 安装
+
+```bash
+$ npm install --save ahooks
+# or
+$ yarn add ahooks
+# or
+$ pnpm add ahooks
+# or
+$ bun add ahooks
+# or
+$ npm install @types/mockjs --legacy-peer-deps
+# or
+$ npm install @ahooksjs/use-url-state --legacy-peer-deps
+# or
+$ npm install react-json-view@1.21.3
+```
+
+## 兼容性
+
+在以下版本验证通过:
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+以下属性已验证,详情见 [ahooks官方文档](https://ahooks.js.org/zh-CN/)
+
+| Name | Description | Type | Platform | HarmonyOS Support |
+| :------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------: | :------: | :---------------: |
+| 快速上手 | `useRequest` 的第一个参数是一个异步函数,在组件初次加载时,会自动触发该函数执行 | Function | All | yes |
+| 基础用法 | 同时自动管理该异步函数的 `loading` , `data` , `error` 等状态 | Function | All | yes |
+| Loading Delay | 通过设置 `options.loadingDelay` ,可以延迟 `loading` 变成 `true` 的时间,有效防止闪烁 | Function | All | yes |
+| 轮询 | 通过设置 `options.pollingInterval`,进入轮询模式,`useRequest` 会定时触发 service 执行 | Function | All | yes |
+| Ready | 通过设置 `options.ready`,可以控制请求是否发出,当其值为 `false` 时,请求永远都不会发出 | Function | All | yes |
+| 依赖刷新 | 通过设置 `options.refreshDeps`,在依赖变化时, `useRequest` 会自动调用 [refresh](https://ahooks.js.org/zh-CN/hooks/use-request/basic/#result) 方法,实现[刷新(重复上一次请求)](https://ahooks.js.org/zh-CN/hooks/use-request/basic/#刷新重复上一次请求) | Function | All | yes |
+| 屏幕聚焦重新请求 | 通过设置 `options.refreshOnWindowFocus`,在浏览器窗口 `refocus` 和 `revisible` 时,会重新发起请求 | Function | All | yes |
+| 防抖 | 通过设置 `options.debounceWait`,进入防抖模式,此时如果频繁触发 `run` 或者 `runAsync`,则会以防抖策略进行请求 | Function | All | yes |
+| 节流 | 通过设置 `options.throttleWait`,进入节流模式,此时如果频繁触发 `run` 或者 `runAsync`,则会以节流策略进行请求 | Function | All | yes |
+| 缓存 & SWR | 通过 `options.staleTime` 设置数据保持新鲜时间,在该时间内,我们认为数据是新鲜的,不会重新发起请求 | Function | All | yes |
+| 错误重试 | 通过设置 `options.retryCount`,指定错误重试次数,则 useRequest 在失败后会进行重试 | Function | All | yes |
+| useHistoryTravel | 管理状态历史变化记录,方便在历史记录中前进与后退 | Function | All | yes |
+| useCountDown | 一个用于管理倒计时的 Hook | Function | All | yes |
+| useCounter | 管理计数器的 Hook | Function | All | yes |
+| useWebSocket | 用于处理 WebSocket 的 Hook | Function | All | yes |
+| useMount | 只在组件初始化时执行的 Hook | Function | All | yes |
+| useUnmount | 在组件卸载(unmount)时执行的 Hook | Function | All | yes |
+| useUnmountedRef | 获取当前组件是否已经卸载的 Hook | Function | All | yes |
+| useSetState | 管理 object 类型 state 的 Hooks,用法与 class 组件的 `this.setState` 基本一致 | Function | All | yes |
+| useBoolean | 优雅的管理 boolean 状态的 Hook | Function | All | yes |
+| useToggle | 用于在两个状态值间切换的 Hook | Function | All | yes |
+| useCookieState | 一个可以将状态存储在 Cookie 中的 Hook | Function | All | yes |
+| useSessionStorageState | 将状态存储在 sessionStorage 中的 Hook | Function | All | yes |
+| useDebounce | 用来处理防抖值的 Hook | Function | All | yes |
+| useThrottle | 用来处理节流值的 Hook | Function | All | yes |
+| useMap | 管理 Map 类型状态的 Hook | Function | All | yes |
+| useSet | 管理 Set 类型状态的 Hook | Function | All | yes |
+| usePrevious | 保存上一次状态的 Hook | Function | All | yes |
+| useRafState | 只在 [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) callback 时更新 state,一般用于性能优化 | Function | All | yes |
+| useSafeState | 用法与 `React.useState` 完全一样,但是在组件卸载后异步回调内的 `setState` 不再执行,避免因组件卸载后更新状态而导致的内存泄漏 | Function | All | yes |
+| useGetState | 给 `React.useState` 增加了一个 getter 方法,以获取当前最新值 | Function | All | yes |
+| useResetState | 提供重置 state 方法的 Hooks,用法与 `React.useState` 基本一致 | Function | All | yes |
+| useUpdateEffect | `useUpdateEffect` 用法等同于 `useEffect`,但是会忽略首次行,只在依赖更新时执行 | Function | All | yes |
+| useUpdateLayoutEffect | `useUpdateLayoutEffect` 用法等同于 `useLayoutEffect`,但是会忽略首次执行,只在依赖更新时执行 | Function | All | yes |
+| useAsyncEffect | useEffect 支持异步函数 | Function | All | yes |
+| useDebounceEffect | 为 `useEffect` 增加防抖的能力 | Function | All | yes |
+| useDebounceFn | 用来处理防抖函数的 Hook | Function | All | yes |
+| useThrottleFn | 用来处理函数节流的 Hook | Function | All | yes |
+| useThrottleEffect | 为 `useEffect` 增加节流的能力 | Function | All | yes |
+| useDeepCompareEffect | 用法与 useEffect 一致,但 deps 通过 [lodash isEqual](https://lodash.com/docs/4.17.15#isEqual) 进行深比较 | Function | All | yes |
+| useDeepCompareLayoutEffect | 用法与 useLayoutEffect 一致,但 deps 通过 [lodash isEqual](https://lodash.com/docs/4.17.15#isEqual) 进行深比较 | Function | All | yes |
+| useInterval | 一个可以处理 setInterval 的 Hook | Function | All | yes |
+| useRafInterval | 用 `requestAnimationFrame` 模拟实现 `setInterval`,API 和 `useInterval` 保持一致,好处是可以在页面不渲染的时候停止执行定时器,比如页面隐藏或最小化等 | Function | All | yes |
+| useTimeout | 一个可以处理 setTimeout 计时器函数的 Hook | Function | All | yes |
+| useRafTimeout | 用 `requestAnimationFrame` 模拟实现 `setTimeout`,API 和 `useTimeout` 保持一致,好处是可以在页面不渲染的时候不触发函数执行,比如页面隐藏或最小化等 | Function | All | yes |
+| useLockFn | 用于给一个异步函数增加竞态锁,防止并发执行 | Function | All | yes |
+| useUpdate | useUpdate 会返回一个函数,调用该函数会强制组件重新渲染 | Function | All | yes |
+| useControllableValuet | 在某些组件开发时,我们需要组件的状态既可以自己管理,也可以被外部控制,`useControllableValue` 就是帮你管理这种状态的 Hook | Function | All | yes |
+| useCreation | `useCreation` 是 `useMemo` 或 `useRef` 的替代品,因为 `useMemo` 不能保证被 memo 的值一定不会被重新计算,而 `useCreation` 可以保证这一点 | Function | All | yes |
+| useEventEmitter | 在组件中调用 `useEventEmitter` 可以获得一个 `EventEmitter` | Function | All | yes |
+| useLatest | 返回当前最新值的 Hook,可以避免闭包问题 | Function | All | yes |
+| useMemoizedFn | 持久化 function 的 Hook,一般情况下,可以使用 useMemoizedFn 完全代替 useCallback,特殊情况见 [FAQ](https://ahooks.js.org/zh-CN/hooks/use-memoized-fn#faq) | Function | All | yes |
+| useReactive | 提供一种数据响应式的操作体验,定义数据状态不需要写`useState`,直接修改属性即可刷新视图 | Function | All | yes |
+| useTrackedEffect | 追踪是哪个依赖变化触发了 `useEffect` 的执行 | Function | All | yes |
+| useWhyDidYouUpdate | 帮助开发者排查是哪个属性改变导致了组件的 rerender | Function | All | yes |
+
+## 手机端不支持方法澄清
+
+| title | hook-name | 解释 | 问题描述 | HarmonyOS Support |
+| -------- | --------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------: |
+| Dom | useDrop & useDrag | 处理元素拖拽的 Hook | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Dom | useEventListener | 优雅的使用 addEventListener | 基础用法:无报错 监听 keydown 事件:无物理键盘 | NO |
+| Dom | useEventListener | 优雅的使用 addEventListener | 报错,无物理键盘 | NO |
+| Dom | useClickAway | 监听目标元素外的点击事件 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Dom | useDocumentVisibility | 监听页面是否可见 | 无报错,无法监听到state状态变化,获取不到手机窗口 | NO |
+| Dom | useEventTarget | 常见表单控件(通过 e.target.value 获取表单值) 的 onChange 跟 value 逻辑封装,支持自定义值转换和重置功能 | Cannot read property ‘value’of undefined | NO |
+| Dom | useExternal | 动态注入 JS 或 CSS 资源,useExternal 可以保证资源全局唯一 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Dom | useTitle | 用于设置页面标题 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Dom | useFavicon | 设置页面的 favicon | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Dom | useFullscreen | 管理 DOM 全屏的 Hook | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Dom | useHover | 监听 DOM 元素是否有鼠标悬停 | 无报错,点击按钮无反应,监听不到属性变化 | NO |
+| Dom | useInViewport | 观察元素是否在可见区域,以及元素可见比例 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Dom | useKeyPress | 监听键盘按键,支持组合键,支持按键别名 | 无报错,没有物理键盘,无法操作属性 | NO |
+| Dom | useLongPress | 监听目标元素的长按事件 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Dom | useMouse | 监听鼠标位置 | 无报错,点击按钮无反应,监听不到属性变化 | NO |
+| Dom | useResponsive | 获取响应式信息 | Cannot convert undefined value to object | NO |
+| Dom | useScroll | 监听元素的滚动位置 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Dom | useSize | 监听 DOM 节点尺寸变化的 Hook | 无报错,无法获取到document | NO |
+| Dom | useFocusWithin | 监听当前焦点是否在某个区域之内 | 无报错,无法监听到state变化 | NO |
+| Advanced | useReactive | 提供一种数据响应式的操作体验,定义数据状态不需要写useState,直接修改属性即可刷新视图 | input输入框中无法输入文字,只能输入数字 Cannot read property 'map' of undefined | NO |
+| State | useUrlState | 通过 url query 来管理 state 的 Hook | 无报错,不生效 | NO |
+| State | useLocalStorageState | 将状态存储在 localStorage 中的 Hook | 无报错,不生效 | NO |
+| Scene | useAntdTable | useAntdTable 会自动管理 Table 分页数据,你只需要把返回的 tableProps 传递给 Table 组件 | ui组件无法使用,document”不存在 | NO |
+| Scene | useFusionTable | useFusionTable 会自动管理 Table 分页数据,你只需要把返回的 tableProps 与 paginationProps 传递给相应组件 | ui组件无法使用,document”不存在 | NO |
+| Scene | useInfiniteScroll | useInfiniteScroll 封装了常见的无限滚动逻辑 | 滚动自动加载:在无限滚动场景中数据加载变多Scroll无响应 | NO |
+| Scene | usePagination | 用法与 useRequest 一致,但会多返回一个 pagination 参数,包含所有分页信息,及操作分页的函数 | 报错,不支持mockjs | NO |
+| Scene | useDynamicList | 一个帮助你管理动态列表状态,并能生成唯一 key 的 Hook | 报错,Render ErrorView config getter callback for component path mustbe a function (recelved undefined). Make sure to startcomponent names with a capital letter. | NO |
+| Scene | useVirtualList | 提供虚拟化列表能力的 Hook,用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题 | 无报错,不生效 | NO |
+| Scene | useNetwork | 管理网络连接状态的 Hook | 报错,window.addEventListener is not a function | NO |
+| Scene | useSelections | 常见联动 Checkbox 逻辑封装,支持多选,单选,全选逻辑,还提供了是否选择,是否全选,是否半选的状态 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Scene | useTextSelection | 实时获取用户当前鼠标选取的文本内容及位置 | 无报错,没有鼠标,无法操作属性 | NO |
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Foblador%2Freact-native-progress%2Fblob%2Fmaster%2FLICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-lifecycles-compat.md b/zh-cn/react-lifecycles-compat.md
new file mode 100644
index 0000000000000000000000000000000000000000..1093ae357fcc379cc5348332b27644a9b9046df8
--- /dev/null
+++ b/zh-cn/react-lifecycles-compat.md
@@ -0,0 +1,165 @@
+> 模板版本:v0.1.3
+
+
+
react-lifecycles-compat
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/reactjs/react-lifecycles-compat)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install react-lifecycles-compat@3.0.4
+```
+
+#### **yarn**
+
+```bash
+yarn add react-lifecycles-compat@3.0.4
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```js
+import React from "react";
+import { Text, View, Button } from "react-native";
+import { polyfill } from "react-lifecycles-compat";
+import { State } from "react-native-gesture-handler";
+class ShowComponent extends React.Component {
+ render() {
+ return (
+
+
+ 新组件
+
+
+ );
+ }
+}
+class ExampleComponent extends React.Component {
+ state = {
+ Text1: "未执行",
+ count1: 0,
+ Text2: "未执行",
+ visible: false,
+ };
+ static getDerivedStateFromProps = (nextProps, prevState) => {
+ // Normally this method would only work for React 16.3 and newer,
+ // But the polyfill will make it work for older versions also!
+ return { Text1: "已执行", count1: prevState.count1 + 1 };
+ };
+
+ getSnapshotBeforeUpdate(prevProps, prevState) {
+ // Normally this method would only work for React 16.3 and newer,
+ // But the polyfill will make it work for older versions also!
+ return true;
+ }
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if (snapshot) {
+ if (this.state.Text2 !== "已执行") {
+ this.setState({
+ Text2: "已执行",
+ });
+ }
+ }
+ }
+ // render() and other methods ...
+ handleClick = () => {
+ this.setState({ visible: true });
+ };
+ render() {
+ const { visible, Text1, Text2, count1 } = this.state;
+ return (
+
+
+ {visible ? : {visible} }
+
+
+ getDerivedStateFromProps生命周期会在React初始化挂载和后续更新时调用render之前调用,返回一个对象来更新state,或者返回null就不更新任何内容
+
+
+ getSnapshotBeforeUpdate生命周期会在React更新DOM之前时直接调用,使你的组件能够在DOM发生更改之前捕获一些信息
+
+
+
+ 生命周期getDerivedStateFromProps{this.state.Text1}+{this.state.count1}
+
+
+ 生命周期getSnapshotBeforeUpdate{this.state.Text2}
+
+
+ );
+ }
+}
+
+// Polyfill your component so the new lifecycles will work with older versions of React:
+polyfill(ExampleComponent);
+
+export default ExampleComponent;
+```
+
+### 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+| Name | Description | Required | Platform | HarmonyOS Support |
+| ------------------------ | -------------------------------------- | -------- | -------- | ----------------- |
+| getDerivedStateFromProps | Initialize the mount. | NO | Android | YES |
+| getSnapshotBeforeUpdate | Call directly before updating the DOM. | NO | Android | YES |
+
+## 遗留问题
+
+## 其他
+
+以下事项与原库保持一致需注意遵循:
+
+为了使polyfill工作,您的组件不能定义以下生命周期:componentWillMount,componentWillReceiveProps,componentWillUpdate.
+
+如果您的组件包含getSnapshotBeforeUpdate,那么也必须定义componentDidUpdate,如果不满足上述任何条件,将抛出错误.
diff --git a/zh-cn/react-native-animate-number.md b/zh-cn/react-native-animate-number.md
new file mode 100644
index 0000000000000000000000000000000000000000..7e5e885dc2046f3ea88b626121e93ded69a71898
--- /dev/null
+++ b/zh-cn/react-native-animate-number.md
@@ -0,0 +1,161 @@
+模板版本:v0.1.3
+
+
+
react-native-animate-number
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/wkh237/react-native-animate-number)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install react-native-animate-number@0.1.2
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-animate-number@0.1.2
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```tsx
+import React, { useState } from "react";
+import { StyleSheet, Text, View, Button } from "react-native";
+import AnimateNumber from "react-native-animate-number";
+
+const App = () => {
+ const [value, setValue] = useState(0);
+ const onPress = () => {
+ setValue(100);
+ };
+ const [finish, setFinish] = useState("");
+ const [progress, setProgress] = useState("");
+ const onProgress = () => {
+ setProgress("动画正在更新...");
+ };
+ const onFinish = () => {
+ setFinish("动画更新完成");
+ };
+ return (
+
+
+
+
+
+ linear:
+
+
+
+ easeOut:
+
+
+
+ easeIn:
+
+
+
+ steps:
+
+
+
+ Formate Example:
+ {
+ return "$ " + parseFloat(val).toFixed(2);
+ }}
+ />
+
+
+ {progress}
+
+
+
+
+
+ {finish}
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ justifyContent: "center",
+ flex: 1,
+ alignItems: "center",
+ },
+ row: {
+ fontSize: 20,
+ fontWeight: "bold",
+ flexDirection: "row",
+ marginBottom: 20,
+ },
+ button: {
+ marginBottom: 20,
+ },
+});
+
+export default App;
+```
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+## 属性
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| `value` | The value of AnimateNumber component. | number | yes | Android IOS | YES |
+| `countBy` | Set this property to force the component's value increase/decrease by this number. | number | No | Android IOS | YES |
+| `interval` | Base interval of each animation frame, in `ms`. | number | No | Android IOS | YES |
+| `steps` | Set total frame number of animation, say, if interval is 14 and steps is 30, the animation will take 14x30ms to finish when it uses linear timing function. | number | No | Android IOS | YES |
+| `timing` | A style object that allow you to customize the WebView style. | number | No | Android IOS | YES |
+| `formatter` | The custom css content will be added to the page's . | string | No | Android IOS | YES |
+| `onProgress` | Either updated height or width will trigger onSizeUpdated. | function | No | Android IOS | YES |
+| `onFinish` | Boolean value that determines whether a horizontal scroll indicator is shown in the WebView. | function | No | Android IOS | YES |
+
+## 遗留问题
+
+## 其他
diff --git a/zh-cn/react-native-blob-util.md b/zh-cn/react-native-blob-util.md
new file mode 100644
index 0000000000000000000000000000000000000000..9f099a101ea742c402ee1e556bd9579286b252fb
--- /dev/null
+++ b/zh-cn/react-native-blob-util.md
@@ -0,0 +1,646 @@
+> 模板版本:v0.1.3
+
+
+
react-native-blob-util
+
+
+
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-blob-util)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-blob-util@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-blob-util@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import React, { useState } from "react";
+import {
+ ScrollView,
+ StyleSheet,
+ Button,
+ View,
+ Text,
+ NativeEventEmitter,
+} from "react-native";
+import ReactNativeBlobUtil from "react-native-blob-util";
+
+export default function BlobUtilDemo() {
+ const [result, setResult] = (useState < string) | (null > null);
+ const [mkdirParam, setMkdirParam] = useState("");
+
+ const createFile = async () => {
+ await ReactNativeBlobUtil.fs.createFile(
+ result + "/text.txt",
+ "123456",
+ "utf8",
+ );
+ };
+
+ const ls = async () => {
+ await ReactNativeBlobUtil.fs.ls(ReactNativeBlobUtil.fs.dirs.CacheDir);
+ };
+
+ const createFileASCII = async () => {
+ await ReactNativeBlobUtil.fs.createFile(
+ result + "/text.txt",
+ [102, 111, 111],
+ "ascii",
+ );
+ };
+
+ const unlink = () => {
+ ReactNativeBlobUtil.fs.unlink(result + "/text.txt");
+ };
+
+ const getConstants = () => {
+ let obj = ReactNativeBlobUtil.fs.dirs.CacheDir;
+ setResult(obj);
+ };
+
+ const writeFile = () => {
+ ReactNativeBlobUtil.fs.writeFile(
+ result + "/text.txt",
+ "Try to write str",
+ "utf8",
+ );
+ };
+
+ const writeStream = () => {
+ ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false);
+ };
+
+ const writeArrayChunk = () => {
+ ReactNativeBlobUtil.fs
+ .writeStream(result + "/text.txt", "ascii", false)
+ .then((reactNativeBlobUtilWriteStream) => {
+ reactNativeBlobUtilWriteStream.encoding = "ascii";
+ reactNativeBlobUtilWriteStream.write(["101", "32", "97"]);
+ });
+ };
+
+ const writeChunk = () => {
+ ReactNativeBlobUtil.fs
+ .writeStream(result + "/text.txt", "utf8", false)
+ .then((reactNativeBlobUtilWriteStream) => {
+ reactNativeBlobUtilWriteStream.write("Zm9vIChXcml0ZSBCYXNlNjQpMQ==");
+ });
+ };
+
+ const closeStream = () => {
+ ReactNativeBlobUtil.fs
+ .writeStream(result + "/text.txt", "utf8", false)
+ .then((reactNativeBlobUtilWriteStream) => {
+ setTimeout(() => {
+ reactNativeBlobUtilWriteStream.close();
+ }, 1000);
+ });
+ };
+ const readStream = () => {
+ ReactNativeBlobUtil.fs.readStream(result + "/text.txt", "utf8", 4000, 200);
+ };
+
+ const mkdir = () => {
+ ReactNativeBlobUtil.fs.mkdir(
+ ReactNativeBlobUtil.fs.dirs.DocumentDir + "/" + mkdirParam,
+ );
+ };
+
+ const stat = () => {
+ ReactNativeBlobUtil.fs.stat(result + "/text.txt");
+ };
+
+ const copyFileToCache = () => {
+ ReactNativeBlobUtil.fs.cp(result + "/text.txt", result + "/text1.txt");
+ };
+
+ const writeFileArray = () => {
+ ReactNativeBlobUtil.fs.writeFile(
+ result + "/text.txt",
+ [102, 111, 111],
+ "ascii",
+ );
+ };
+
+ const exists = () => {
+ ReactNativeBlobUtil.fs.exists(result + "/text.txt");
+ };
+
+ const lstat = () => {
+ ReactNativeBlobUtil.fs.lstat(result + "/text.txt");
+ };
+
+ const mv = () => {
+ ReactNativeBlobUtil.fs.mv(result + "/text.txt", result + "/text1.txt");
+ };
+
+ const hash = () => {
+ ReactNativeBlobUtil.fs.hash(result + "/text.txt", "md5");
+ };
+
+ const readFile = () => {
+ ReactNativeBlobUtil.fs.readFile(result + "/text.txt", "utf8", 4000);
+ };
+
+ const slice = () => {
+ ReactNativeBlobUtil.fs.slice(
+ result + "/text.txt",
+ result + "/text1.txt",
+ 2,
+ 5,
+ );
+ };
+
+ const df = () => {
+ ReactNativeBlobUtil.fs.df();
+ };
+
+ const addListener = () => {
+ let obj = "addListener是空实现";
+ setResult(obj);
+ };
+
+ const removeListeners = () => {
+ let obj = "removeListeners是空实现";
+ setResult(obj);
+ };
+
+ const emitExpiredEvent = () => {
+ let obj = "emitExpiredEvent是空实现,三方库没有调用";
+ setResult(obj);
+ };
+
+ return (
+
+
+ BlobUtil
+
+
+ {result}
+
+
+
+
+ BlobUtilTurboModule.getConstants()
+
+
+
+ BlobUtilTurboModule.createFile()
+
+
+
+ BlobUtilTurboModule.unlink()
+
+
+
+
+ BlobUtilTurboModule.copyFileToCache()
+
+
+
+
+ BlobUtilTurboModule.writeFile()
+
+
+
+ BlobUtilTurboModule.stat()
+
+
+
+ BlobUtilTurboModule.mkdir()
+
+
+
+ BlobUtilTurboModule.writeStream()
+
+
+
+ BlobUtilTurboModule.ls()
+
+
+
+
+ BlobUtilTurboModule.createFileASCII()
+
+
+
+
+
+ BlobUtilTurboModule.writeFileArray()
+
+
+
+
+ BlobUtilTurboModule.exists()
+
+
+
+ BlobUtilTurboModule.lstat()
+
+
+
+ BlobUtilTurboModule.hash()
+
+
+
+ BlobUtilTurboModule.readFile()
+
+
+
+ BlobUtilTurboModule.slice()
+
+
+
+ BlobUtilTurboModule.df()
+
+
+
+ BlobUtilTurboModule.closeStream()
+
+
+
+
+ BlobUtilTurboModule.writeArrayChunk()
+
+
+
+
+ BlobUtilTurboModule.writeChunk()
+
+
+
+ BlobUtilTurboModule.readStream()
+
+
+
+ BlobUtilTurboModule.mv()
+
+
+
+ addListener()
+
+
+
+ removeListeners()
+
+
+
+ emitExpiredEvent()
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ width: "100%",
+ height: "100%",
+ flexDirection: "column",
+ alignItems: "center",
+ backgroundColor: "#F1F3F5",
+ },
+ baseText: {
+ width: "100%",
+ height: "100%",
+ fontWeight: "bold",
+ textAlign: "center",
+ fontSize: 16,
+ ellipsizeMode: "tail",
+ numberOfLines: 2,
+ },
+ titleArea: {
+ width: "90%",
+ height: "8%",
+ alignItems: "center",
+ flexDirection: "row",
+ },
+ title: {
+ width: "90%",
+ color: "#000000",
+ textAlign: "left",
+ fontSize: 30,
+ },
+ scrollView: {
+ width: "90%",
+ marginHorizontal: 10,
+ },
+
+ inputArea: {
+ width: "90%",
+ height: "10%",
+ borderWidth: 2,
+ borderColor: "#000000",
+ marginTop: 8,
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ baseArea: {
+ width: "100%",
+ height: 60,
+ borderRadius: 4,
+ borderColor: "#000000",
+ marginTop: 6,
+ backgroundColor: "#FFFFFF",
+ flexDirection: "row",
+ alignItems: "center",
+ paddingLeft: 8,
+ paddingRight: 8,
+ },
+});
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink,所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法:
+
+1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法);
+2. 直接链接源码。
+
+方法一:通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`,添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行:
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二:直接链接源码
+
+> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`,添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil"
+ }
+```
+
+打开终端,执行:
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 BlobUtilPackage
+
+打开 `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-blob-util/src/main/cpp" ./blobUtil)
+# 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_blob_util)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`,添加:
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "BlobUtilPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 BlobUtilPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加:
+
+```diff
+...
++ import {BlobUtilPackage} from 'rnoh-blob-util/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new BlobUtilPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行:
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-blob-util/releases)
+
+## API
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+#### Android API
+
+##### ReactNativeBlobUtil.android
+
+| Name | Description | Required | Platform | HarmonyOS Support |
+| :-----------------: | :----------: | :------: | :------: | :---------------: |
+| actionViewIntent | 动作视图意图 | No | Android | No |
+| getContentIntent | 获取内容意图 | No | Android | No |
+| addCompleteDownload | 添加完整下载 | No | Android | No |
+
+#### File System Access API
+
+##### ReactNativeBlobUtil.fs
+
+| Name | Description | Required | Platform | HarmonyOS Support |
+| :---------: | :--------------------------------: | :------: | :---------: | :---------------: |
+| dirs | 目录 | NO | IOS/Android | Yes |
+| createFile | 创建文件 | NO | IOS/Android | Yes |
+| writeFile | 写文件 | NO | IOS/Android | Yes |
+| writeStream | 写流 | NO | IOS/Android | Yes |
+| appendFile | 追加文件 | NO | IOS/Android | Yes |
+| readFile | 读取文件 | NO | IOS/Android | Yes |
+| hash | 哈希 | NO | IOS/Android | Yes |
+| readStream | 读流 | NO | IOS/Android | Yes |
+| mkdir | 创建目录 | NO | IOS/Android | Yes |
+| ls | 查看当下的文件和目录 | NO | IOS/Android | Yes |
+| mv | 移动文件位置 | NO | IOS/Android | Yes |
+| cp | 复制文件 | NO | IOS/Android | Yes |
+| exists | 检查文件是否存在 | NO | IOS/Android | Yes |
+| isDir | 是否是目录 | NO | IOS/Android | Yes |
+| unlink | 删除文件 | NO | IOS/Android | Yes |
+| lstat | 获取目录下文件的统计数据 | NO | IOS/Android | Yes |
+| stat | 类似地获取数据或目录的统计信息 | NO | IOS/Android | Yes |
+| scanFile | 扫描文件 | NO | Android | No |
+| asset | 资产 | NO | IOS/Android | Yes |
+| df | 获取设备的可用磁盘空间和总磁盘空间 | NO | IOS/Android | Yes |
+
+#### iOS API
+
+#### ReactNativeBlobUtil.ios
+
+| Name | Description | Required | Platform | HarmonyOS Support |
+| --------------- | -------------------------------------- | -------- | -------- | ----------------- |
+| previewDocument | 文档查看器--需要系统权限 | No | iOS | No |
+| openDocument | 显示与文件交互的选项菜单--需要系统权限 | No | iOS | No |
+
+#### Network Utils
+
+##### ReactNativeBlobUtil.net
+
+| Name | Description | Required | Platform | HarmonyOS Support |
+| ------------- | ----------- | -------- | ----------- | ----------------- |
+| getCookies | 获取cookie | No | IOS/Android | No |
+| removeCookies | 删除cookie | No | IOS/Android | No |
+
+#### Session API
+
+##### ReactNativeBlobUtil.session
+
+| Name | Description | Required | Platform | HarmonyOS Support |
+| ------- | ----------- | -------- | ----------- | ----------------- |
+| session | 会话 | No | IOS/Android | No |
+
+#### MediaStore(Android Media Storage)
+
+##### ReactNativeBlobUtil.MediaCollection
+
+| Name | Description | Required | Platform | HarmonyOS Support |
+| ---------------- | -------------- | -------- | -------- | ----------------- |
+| CopyToMediaStore | 复制到媒体存储 | No | Android | No |
+| createMediaFile | 创建媒体文件 | No | Android | No |
+| writeMediaFile | 写媒体文件 | No | Android | No |
+| copyToInternal | 复制到内部 | No | Android | No |
+
+#### Utils API
+
+| Name | Description | Required | Platform | HarmonyOS Support |
+| ------ | ----------- | -------- | ----------- | ----------------- |
+| wrap | | No | Android/IOS | No |
+| base64 | | No | Android/IOS | No |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-blob-util/blob/master/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-canvas.md b/zh-cn/react-native-canvas.md
new file mode 100644
index 0000000000000000000000000000000000000000..4d75fe54ba7d1a58f95a2d1d434b2de7387ac577
--- /dev/null
+++ b/zh-cn/react-native-canvas.md
@@ -0,0 +1,152 @@
+模板版本:v0.1.3
+
+
+
react-native-canvas
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/iddan/react-native-canvas)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install react-native-canvas@0.1.39
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-canvas@0.1.39
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```tsx
+import React, { useRef, useEffect } from "react";
+import { View, StyleSheet, Text, ScrollView } from "react-native";
+import Canvas, {
+ Image as CanvasImage,
+ CanvasRenderingContext2D,
+ Path2D,
+} from "react-native-canvas";
+
+const CanvasDemo = () => {
+ const canvasRef = useRef(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (canvas) {
+ canvas.width = 300;
+ canvas.height = 500;
+ const context = canvas.getContext("2d") as CanvasRenderingContext2D;
+
+ // 绘制背景
+ context.fillStyle = "gray";
+ context.fillRect(0, 0, 1000, 1000);
+
+ //绘制矩形
+ context.fillStyle = "blue";
+ context.fillRect(10, 10, 100, 100);
+
+ //绘制椭圆
+ const ellipse = new Path2D(canvas);
+ ellipse.ellipse(200, 60, 50, 30, 0, 0, 2 * Math.PI);
+ context.fillStyle = "green";
+ context.fill(ellipse);
+
+ //绘制线条
+ context.beginPath();
+ context.moveTo(10, 150);
+ context.lineTo(150, 150);
+ context.strokeStyle = "red";
+ context.stroke();
+
+ // 绘制文字
+ context.font = "bold 24px Arial";
+ context.fillStyle = "orange";
+ context.fillText("Hello World", 20, 200);
+
+ //绘制图片
+ const image = new CanvasImage(canvas);
+ image.src =
+ "https://upload.wikimedia.org/wikipedia/commons/6/63/Biho_Takashi._Bat_Before_the_Moon%2C_ca._1910.jpg";
+ image.addEventListener("load", () => {
+ context.drawImage(image, 10, 250, 100, 100);
+ });
+ }
+ }, []);
+
+ return (
+
+
+ Canvas Demo Start
+
+ Canvas Demo End
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ paddingVertical: 50,
+ },
+ title: {
+ fontSize: 24,
+ fontWeight: "bold",
+ marginBottom: 20,
+ },
+ canvas: {
+ width: 300,
+ height: 500,
+ backgroundColor: "blue",
+ },
+});
+
+export default CanvasDemo;
+```
+
+## Link
+
+本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-webview 的原生端代码,如已在鸿蒙工程中引入过该库,则无需再次引入,可跳过本章节步骤,直接使用。
+
+如未引入请参照[@react-native-oh-tpl/react-native-webview 文档的 Link 章节](https://gitee.com/zhanghao2519/usage-docs/blob/master/zh-cn/react-native-webview.md)进行引入
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.700; ROM:2.0.0.72;
+
+## 属性
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| `heigth` | Reflects the height of the canvas in pixels. | number | yes | Android IOS | YES |
+| `width` | Reflects the width of the canvas in pixels. | number | yes | Android IOS | YES |
+| `getContext()` | Standard CanvasRenderingContext2D. [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D). Only difference is `await` should be used to retrieve values from methods.. | function | yes | Android IOS | YES |
+| `Image()` | WebView Image constructor. Unlike in the browsers accepts canvas as first argument. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) | function | No | Android IOS | YES |
+| `Path2D()` | Path2D API constructor. Unlike in the browsers, this requires the canvas as first argument. See also https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D.. | function | No | Android IOS | YES |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/iddan/react-native-canvas/blob/master/license.txt) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-confirmation-code-field.md b/zh-cn/react-native-confirmation-code-field.md
new file mode 100644
index 0000000000000000000000000000000000000000..63c2213f3a2c82a72963be0c5e57cfd72c19faca
--- /dev/null
+++ b/zh-cn/react-native-confirmation-code-field.md
@@ -0,0 +1,156 @@
+> 模板版本:v0.1.3
+
+
+
react-native-confirmation-code-field
+
+
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/retyui/react-native-confirmation-code-field)
+
+## 安装与使用
+
+#### **npm**
+
+```bash
+npm install react-native-confirmation-code-field@7.3.2
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-confirmation-code-field@7.3.2
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import React, { useState } from "react";
+import { SafeAreaView, Text, StyleSheet } from "react-native";
+
+import {
+ CodeField,
+ Cursor,
+ useBlurOnFulfill,
+ useClearByFocusCell,
+} from "react-native-confirmation-code-field";
+
+const styles = StyleSheet.create({
+ root: { flex: 1, padding: 20 },
+ title: { textAlign: "center", fontSize: 30 },
+ codeFieldRoot: { marginTop: 20 },
+ cell: {
+ width: 40,
+ height: 40,
+ lineHeight: 38,
+ fontSize: 24,
+ borderWidth: 2,
+ borderColor: "#00000030",
+ textAlign: "center",
+ },
+ focusCell: {
+ borderColor: "#000",
+ },
+});
+
+const CELL_COUNT = 6;
+
+const App = () => {
+ const [value, setValue] = useState("");
+ const ref = useBlurOnFulfill({ value, cellCount: CELL_COUNT });
+ const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+ value,
+ setValue,
+ });
+
+ return (
+
+ Verification
+ (
+
+ {symbol || (isFocused ? : null)}
+
+ )}
+ />
+
+ );
+};
+
+export default App;
+```
+
+## 约束与限制
+
+## 兼容性
+
+本文档内容基于以下版本验证通过:
+
+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 的效果。
+
+| Name | Description | Type | Platform | HarmonyOS Support |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------- | ----------------- |
+| `CodeField` | This a base component that render RootComponent (default: View) with cells that would be returned by renderCell() and a that will be invisible and over all cells within root component | component | All | yes |
+| `Cursor` | It's a help component for simulation a cursor blinking animation in | components | component | All | yes |
+
+## CodeField属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | -------- | ----------------- |
+| `cellCount` | Number of characters in input (optional, default: 4) | number | yes | All | yes |
+| `renderCell?` | Required function for Cell rendering, will be invoke with next options:{index: number, symbol: string, isFocused: boolean} | ReactElement | No | All | yes |
+| `RootComponent?` | if you want change root component for example using animations RootComponent={Animated.View} (optional, default View) | ComponentType | No | All | yes |
+| `InputComponent?` | If you want to provide a custom TextInput component that can receive the same props (optional, default TextInput) | ComponentType | No | All | yes |
+| `rootStyle?` | Styles for root component (optional) | StyleProp | No | All | yes |
+| `RootProps?` | Any props that will applied for root component | Object | No | All | yes |
+| `textInputStyle?` | Styles for invisible , can be used for testing or debug (optional) | StyleProp | No | All | yes |
+
+## Hooks
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------- | -------- | ----------------- |
+| `useClearByFocusCell` | Simple hook that add functionality that trim value by pressed cell,After invoke this hook wil return array with two values `[props,getCellOnLayout]`; -`props`- an object that you should spreed to ` ` - `getCellOnLayout(index: number): Function` - helper method that returns `onLayout` handler - If you need to style only one borderX (example `borderBottom`) you need to know about React Native issue with [border styles for ` ` on iOS](https://github.com/facebook/react-native/issues/23537). - To fix it need ` ` wrapper for Cell, but don't forger to move `onLayout={getCellOnLayoutHandler(index)` to ` ` | Function | yes | All | yes |
+| `useBlurOnFulfill` | This hook include a logic to blurring` `when value fulfilled You should pass two params: - `value?: string` - a string value that; - `cellCount: number`; Returned value will be a TextInput ref that you should pass to` `component.And when a value length would equal cellCount will be called `.blur()` method.It work perfectly with `useClearByFocusCell` hook | Ref | yes | All | yes |
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/Kureev/react-native-blur/blob/master/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-drawer-layout-polyfill.md b/zh-cn/react-native-drawer-layout-polyfill.md
new file mode 100644
index 0000000000000000000000000000000000000000..ed6d5f373f347d5bc388e8c23f31a40f171aa5b4
--- /dev/null
+++ b/zh-cn/react-native-drawer-layout-polyfill.md
@@ -0,0 +1,256 @@
+模板版本:v0.1.3
+
+
+
react-native-drawer-layout-polyfill
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/rnc-archive/react-native-drawer-layout-polyfill)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install react-native-drawer-layout-polyfill@2.0.0
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-drawer-layout-polyfill@2.0.0
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```tsx
+import React, { useState, useRef } from "react";
+import { Button, Text, StyleSheet, View, TextInput } from "react-native";
+import DrawerLayout from "react-native-drawer-layout-polyfill";
+
+const App = () => {
+ const drawerLayoutRef = useRef(null);
+ const [drawerPosition, setDrawerPosition] = useState("left");
+ const [keyboardDismissMode, setKeyboardDismissMode] = useState("none");
+ const [drawerLockMode, setDrawerLockMode] = useState("unlocked ");
+ const [isOpen, setIsOpen] = useState("关闭 ");
+ const [drawerSlideOutput, setDrawerSlideOutput] = useState("");
+ const [drawerStateChangedOutput, setDrawerStateChangedOutput] = useState("");
+ const [drawerWidth, setDrawerWidth] = useState(300);
+ const [value, onChangeText] = useState("");
+
+ const open = () => {
+ drawerLayoutRef.current.openDrawer();
+ };
+
+ const close = () => {
+ drawerLayoutRef.current.closeDrawer();
+ };
+
+ const changeDrawerPosition = () => {
+ console.log("drawerPosition-修改弹框位置", drawerPosition);
+ if (drawerPosition === "left") {
+ setDrawerPosition("right");
+ } else {
+ setDrawerPosition("left");
+ }
+ };
+
+ const changeDrawerHideKeyboard = () => {
+ console.log("keyboardDismissMode-是否隐藏软键盘", keyboardDismissMode);
+ if (keyboardDismissMode === "none") {
+ setKeyboardDismissMode("on-drag");
+ } else {
+ setKeyboardDismissMode("none");
+ }
+ };
+
+ const changeDrawerWidth = () => {
+ console.log("drawerWidth-修改弹框宽度", drawerWidth);
+ if (value && Number(value) >= 100) {
+ setDrawerWidth(Number(value));
+ }
+ };
+
+ const changeDrawerLockMode = (type) => {
+ console.log("drawerLockMode-修改弹框锁定模式", type);
+ setDrawerLockMode(type);
+ };
+
+ const handleDrawerOpen = (e) => {
+ console.log("onDrawerOpen-打开弹框的回调");
+ setIsOpen("打开");
+ };
+
+ const handleDrawerClose = (e) => {
+ console.log("onDrawerClose-关闭弹框的回调");
+ setIsOpen("关闭");
+ };
+
+ const handleDrawerSlide = (e) => {
+ console.log("onDrawerSlide-导航视图发生交互时的回调函数");
+ setDrawerSlideOutput(JSON.stringify(e.nativeEvent));
+ };
+
+ const handleDrawerStateChanged = (e) => {
+ console.log("onDrawerStateChanged-导航视图的状态发生变化时的回调函数");
+ setDrawerStateChangedOutput(JSON.stringify(e));
+ };
+
+ const navigationView = (
+
+ I'm in the Drawer!
+ 弹框状态:{isOpen}
+
+ 弹框打开关闭过程中触发:{drawerSlideOutput}
+
+
+ 弹框状态切换触发:{drawerStateChangedOutput}
+
+ close()}
+ />
+
+ );
+
+ return (
+ navigationView}
+ keyboardDismissMode={keyboardDismissMode}
+ drawerLockMode={drawerLockMode}
+ drawerBackgroundColor="red"
+ statusBarBackgroundColor="blue"
+ onDrawerOpen={handleDrawerOpen}
+ onDrawerClose={handleDrawerClose}
+ onDrawerSlide={handleDrawerSlide}
+ onDrawerStateChanged={handleDrawerStateChanged}
+ >
+
+
+ 设置导航视图的锁定模式:{drawerLockMode}
+
+
+ 是否隐藏软键盘:{keyboardDismissMode}
+
+ 弹框状态:{isOpen}
+
+ 弹框打开关闭过程中触发:{drawerSlideOutput}
+
+
+ 弹框状态切换触发:{drawerStateChangedOutput}
+
+ open()} />
+
+ changeDrawerPosition()} />
+
+ changeDrawerHideKeyboard()}
+ />
+
+ changeDrawerLockMode("unlocked")}
+ />
+
+ changeDrawerLockMode("locked-closed")}
+ />
+
+ changeDrawerLockMode("locked-open")}
+ />
+
+ onChangeText(text)}
+ value={value}
+ />
+
+ changeDrawerWidth()} />
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ paddingTop: 50,
+ padding: 8,
+ },
+ navigationContainer: {
+ flex: 1,
+ paddingTop: 50,
+ padding: 8,
+ },
+ textCommon: {
+ marginBottom: 10,
+ fontSize: 15,
+ },
+ buttonMargin: {
+ marginBottom: 5,
+ },
+});
+
+export default App;
+```
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+## 属性
+
+详情见[react-native-drawer-layout-polyfill](https://reactnative.dev/docs/drawerlayoutandroid)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support | note |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | ------------------------------------------------------ |
+| renderNavigationView | The navigation view that will be rendered to the side of the screen and can be pulled in. | function | YES | Android IOS | YES | |
+| drawerPosition | Specifies the side of the screen from which the drawer will slide in. By default it is set to left. enum('left', 'right') | string | NO | Android IOS | YES | |
+| drawerWidth | Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window. | number | NO | Android IOS | YES | |
+| keyboardDismissMode | Determines whether the keyboard gets dismissed in response to a drag. 'none' (the default), drags do not dismiss the keyboard. 'on-drag', the keyboard is dismissed when a drag begins. | string | NO | Android IOS | YES | |
+| drawerLockMode | Specifies the lock mode of the drawer. The drawer can be locked in 3 states: unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. locked-closed, meaning that the drawer will stay closed and not respond to gestures. locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (openDrawer/closeDrawer). | string | NO | Android IOS | YES | |
+| drawerBackgroundColor | Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. | string | NO | Android IOS | YES | |
+| statusBarBackgroundColor | Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+. IOS and harmony are not supported. | string | NO | Android | NO | The original library only does the function of Android |
+| onDrawerOpen | Function called whenever the navigation view has been opened. | function | NO | Android IOS | YES | |
+| onDrawerClose | Function called whenever the navigation view has been closed. | function | NO | Android IOS | YES | |
+| onDrawerSlide | Function called whenever there is an interaction with the navigation view. | function | NO | Android IOS | YES | |
+| onDrawerStateChanged | Function called when the drawer state has changed. The drawer can be in 3 states: idle, meaning there is no interaction with the navigation view happening at the time | function | NO | Android IOS | YES | |
+
+## 方法
+
+| Name | Description | Required | Platform | HarmonyOS Support |
+| ----------- | ------------------ | -------- | ----------- | ----------------- |
+| openDrawer | Closes the drawer. | NO | Android IOS | YES |
+| closeDrawer | Opens the drawer. | NO | Android IOS | YES |
+
+## 遗留问题
+
+## 其他
diff --git a/zh-cn/react-native-echarts-pro.md b/zh-cn/react-native-echarts-pro.md
new file mode 100644
index 0000000000000000000000000000000000000000..aa90bee927d1b6ee532fee05958b3c2a7decbdf1
--- /dev/null
+++ b/zh-cn/react-native-echarts-pro.md
@@ -0,0 +1,129 @@
+模板版本:v0.1.3
+
+
+
react-native-echarts-pro
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/supervons/react-native-echarts-pro)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### npm
+
+```bash
+npm install react-native-echarts-pro@^1.9.1
+```
+
+#### yarn
+
+```bash
+yarn add react-native-echarts-pro@^1.9.1
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React from "react";
+import { View } from "react-native";
+import RNEChartsPro from "react-native-echarts-pro";
+
+export default function RNEPDemo() {
+ const pieOption = {
+ series: [
+ {
+ name: "Source",
+ type: "pie",
+ legendHoverLink: true,
+ hoverAnimation: true,
+ avoidLabelOverlap: true,
+ startAngle: 180,
+ radius: "55%",
+ center: ["50%", "35%"],
+ data: [
+ { value: 105.2, name: "android" },
+ { value: 310, name: "iOS" },
+ { value: 234, name: "web" },
+ { value: 134, name: "harmony" },
+ ],
+ label: {
+ normal: {
+ show: true,
+ textStyle: {
+ fontSize: 12,
+ color: "#23273C",
+ },
+ },
+ },
+ },
+ ],
+ };
+ return (
+
+
+
+ );
+}
+```
+
+## Link
+
+本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-webview 的原生端代码,如已在鸿蒙工程中引入过该库,则无需再次引入,可跳过本章节步骤,直接使用。
+
+如未引入请参照[@react-native-oh-tpl/react-native-webview 文档的 Link 章节](/zh-cn/react-native-webview.md)进行引入
+
+## 兼容性
+
+本文档内容基于以下版本验证通过:
+
+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-echarts-pro](https://github.com/supervons/react-native-echarts-pro/tree/master)
+
+### Properties for all react-native-echarts-pro components:
+
+| Name | Description | **Type** | Platform | Required | HarmonyOS Support |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ----------- | -------- | ----------------- |
+| height | Chart area height | Number | All | Y | Yes |
+| width | Chart area auto | Number | All | N | Yes |
+| option | Chart configuration, see more:[Apache ECharts - options](https://echarts.apache.org/en/option.html#title) | Object | All | Y | Yes |
+| backgroundColor | Chart background color | String | All | N | Yes |
+| themeName | There are only six officially available themes: `vintage` `dark` `macarons` `infographic` `shine` `roma` | String | All | N | Yes |
+| webViewSettings | Customize WebView container properties | Object | All | N | Yes |
+| formatterVariable | If option’formatter function need variable,can use this. | Object | All | N | Yes |
+| extension | Dynamic support for tripartite expansion, such as word cloud, water polo map, etc. example. | object | All | N | Yes |
+| customMapData | For custom maps, null is a world map. See the following usage examples | Object | All | N | Yes |
+| eventActions | Custom charts events. | Object | All | N | Yes |
+| fontFamilies | Custom font families. | Array | Android/ios | N | No |
+| enableParseStringFunction | If enabled, function are parse as strings | Boolean | All | N | Yes |
+
+## 遗留问题
+
+- [ ] setNewOption/getInstance/dispatchAction 这三个实例方法依赖于 react-native-webview 的 postMessage 方法,react-native-webview暂未实现这个方法,所以暂不支持 [issue#17](https://github.com/react-native-oh-library/react-native-webview/issues/17)
+- [ ] fontFamilies自定义字体属性未生效,该属性需要将字体文件转为base64字符串,拼接在html中的style标签中使用,经验证,这种用法在react-native-webview的最小化demo也不生效,一旦有base64字体加载,就会白屏并无法触发loadEnd,而原生鸿蒙webview上显示正常 [issues#20](https://github.com/react-native-oh-library/react-native-webview/issues/20)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/oblador/react-native-progress/blob/master/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-fit-Image.md b/zh-cn/react-native-fit-Image.md
new file mode 100644
index 0000000000000000000000000000000000000000..f7a6d046c661dc9ee8515218aef50656535bf444
--- /dev/null
+++ b/zh-cn/react-native-fit-Image.md
@@ -0,0 +1,440 @@
+模板版本:v0.1.3
+
+
+
react-native-fit-image
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/huiseoul/react-native-fit-image)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install react-native-fit-image@1.5.5
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-fit-image@1.5.5
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```tsx
+import React, { useState, useEffect } from "react";
+import {
+ View,
+ StyleSheet,
+ Text,
+ ScrollView,
+ SafeAreaView,
+ Image,
+ Button,
+} from "react-native";
+import FitImage from "react-native-fit-image";
+var styles = StyleSheet.create({
+ fitImage: {
+ borderRadius: 20,
+ borderColor: "red",
+ borderWidth: 1,
+ },
+ fitImageWithSize: {
+ height: 200,
+ width: "100%",
+ },
+});
+const FitImageDemo = () => {
+ // 测试onLoad
+ const [onLoadDatea, setOnLoad] = useState("初始onLoad未执行");
+ // 测试onError
+ const [onErrorDatea, setOnError] = useState("初始onError未执行");
+ // 测试onLoadStart
+ const [onLoadStartDatea, setOnLoadStart] =
+ useState("未执行前onLoadStart未执行");
+ // 测试onLayOut
+ const [onLayOutData, setOnLayout] = useState("未执行前onLayout未执行");
+ // 刷新按钮
+ const [refLoadData, setRefLoadBtn] = useState(true);
+ // 获取本地图片尺寸
+ const [imgSizeNum, getImageSizeNum] = useState({ width: 0, height: 0 });
+ const img1 = require("./assets/expo.png");
+ const getImageSize = () => {
+ let res = Image.resolveAssetSource(img1);
+ getImageSizeNum({ width: res.width, height: res.height });
+ };
+ // 获取网络图片尺寸
+ const imgHttp = {
+ uri: "https://octodex.github.com/images/stormtroopocat.jpg",
+ };
+ const [imgHttpSize, getHttpSizeNum] = useState({ width: 0, height: 0 });
+ // 刷新
+ const [reshUiData, setReshUi] = useState(0);
+ useEffect(() => {
+ getReloadFres();
+ }, []);
+ const getReloadFres = () => {
+ // http远程文件
+ Image.getSize(
+ imgHttp.uri,
+ (width, height) => {
+ getHttpSizeNum({ width, height });
+ },
+ (failure) => {
+ console.log("failure", failure);
+ },
+ );
+ };
+ // 刷新
+ const reLoadFun = () => {
+ setRefLoadBtn(false);
+ setReshUi(reshUiData + 1);
+ getImageSizeNum({ width: 0, height: 0 });
+ getHttpSizeNum({ width: 0, height: 0 });
+ setRefLoadBtn(true);
+ getReloadFres();
+ };
+ return (
+
+
+ {/* button刷新按钮方便压力测试 */}
+ {
+ reLoadFun();
+ }}
+ title="刷新"
+ >
+ {refLoadData && (
+
+ 刷新了{reshUiData}次
+
+ 测试onLoad
+ {onLoadDatea}
+ {
+ console.log("执行了onLoad");
+ setOnLoad("执行了onLoad");
+ }}
+ style={styles.fitImageWithSize}
+ source={require("./assets/expo.png")}
+ />
+
+
+ 测试base64图片
+
+
+
+
+ 测试属性originalWidth,originalHeight(在不加宽度高度的情况下)
+
+
+
+
+
+ 不加originalWidth,originalHeight和不加宽度高度的情况下
+
+
+
+
+
+ 不加originalWidth,originalHeight但是加宽度高度的情况下
+
+
+
+
+
+ 不加originalWidth,originalHeight但是加宽度高度的情况下的网络图片
+
+
+
+
+
+ 加originalWidth,originalHeight但是不加宽度高度的情况下的网络图片
+
+
+
+
+ 同时加originalWidth,originalHeight和宽度高度的情况下
+
+
+
+
+
+ indicator(加载器 为true) indicatorColor(加载器颜色)
+ indicatorSize(值:large small number)
+
+ 值为:large
+
+
+
+
+ indicator(加载器 为true) indicatorColor(加载器颜色)
+ indicatorSize(值:large small number)
+
+ small
+
+
+
+
+ indicator(加载器 为true) indicatorColor(加载器颜色)
+ indicatorSize(值:large small number)
+
+ number:值越大指示器越大
+
+
+
+ indicator(加载器 为false)
+ number:值越大指示器越大
+
+
+
+
+ 验证网络图片
+
+
+
+ 获取本地图片宽高
+
+
+ 宽度:{imgSizeNum.width},高度:{imgSizeNum.height}
+
+ {
+ getImageSize();
+ }}
+ title="调用image图片宽高"
+ >
+
+
+ 验证网络图片宽高
+
+ 宽度:{imgHttpSize.width},高度:{imgHttpSize.height}
+
+
+
+
+ 验证图片圆角
+
+
+
+
+ 测试resizeMode(cover contain stretch repeat center),值为cover
+
+
+
+
+
+ 测试resizeMode(cover contain stretch repeat center),值为contain
+
+
+
+
+
+ 测试resizeMode(cover contain stretch repeat center),值为stretch
+
+
+
+
+
+ 测试resizeMode(cover contain stretch repeat center),值为repeat
+
+
+
+
+
+ 测试resizeMode(cover contain stretch repeat center),值为center
+
+
+
+
+
+ 测试onError
+ {onErrorDatea}
+ {
+ console.log("执行了onError");
+ setOnError("执行了onError");
+ }}
+ style={styles.fitImageWithSize}
+ source={{ uri: "https://ok.gitHub.io123.png" }}
+ />
+
+
+ 测试onLoadStart
+ {onLoadStartDatea}
+ {
+ console.log("执行了onLoadStart");
+ setOnLoadStart("执行了onLoadStart");
+ }}
+ style={{ ...styles.fitImageWithSize, borderRadius: 20 }}
+ source={require("./assets/expo.png")}
+ />
+
+
+ 测试onLayOut
+ {onLayOutData}
+ {
+ console.log("执行了onLayout");
+ setOnLayout("执行了onLayout");
+ }}
+ style={{ ...styles.fitImageWithSize, borderRadius: 20 }}
+ source={require("./assets/expo.png")}
+ />
+
+
+ 测试blurRadius(模糊滤镜,值越大越模糊)
+
+
+
+ )}
+ {!refLoadData && (
+
+ 加载中。。。。。。
+
+ )}
+
+
+ );
+};
+export default FitImageDemo;
+```
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.5; SDK:HarmonyOS NEXT DP2; IDE:DevEco Studio 4.1.3.700; ROM:204.1.0.72(SP2DEVC00E72R1P1);
+
+## 属性
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support | 备注 |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------- | ----------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `style` | 图片宽(width)高(height),边框等样式 | object | yes | Android IOS | YES | 在不加orginalWidth与orginalHeight属性时,style里面必须设置宽width,高height才能把图片加载出来 |
+| `source` | 图片文件源: 本地图片 source={require('./assets/expo.png')}; 网略图片 source={{uri:"https://octodex.github.com/images/stormtroopocat.jpg"}} | string | yes | Android IOS | YES | |
+| `width` | 图片style中属性 | number | yes | Android IOS | YES | |
+| `height` | 图片style中属性 | number | yes | Android IOS | YES | |
+| `borderRadius` | 图片样式(圆角) | number | No | Android IOS HarmonyOS都不支持 | NO | 此属性在HarmonyOS,Android ,IOS均不生效;[issues](https://github.com/huiseoul/react-native-fit-image/issues/111) |
+| `indicator` | 加载器值为true/false (默认true) | boolean | No | Android IOS | YES | |
+| `indicatorColor` | 加载器颜色 | string | No | Android IOS | YES | |
+| `indicatorSize` | 加载器大小 值:`large` `small` number(例: indicatorSize={20} ) | string/number | No | Android IOS | YES | |
+| resizeMode | 图片布局 值(cover contain stretch repeat center) `cover`: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有 padding 内衬的话,则相应减去)。**译注**:这样图片完全覆盖甚至超出容器,容器中不留任何空白。 `contain`: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有 padding 内衬的话,则相应减去)。**译注**:这样图片完全被包裹在容器中,容器中可能留有空白。 `stretch`: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。 `repeat`: 重复平铺图片直到填满容器。图片会维持原始尺寸,但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。 `center`: 居中不拉伸。 | string | No | Android IOS | YES | |
+| blurRadius | 图片模糊滤镜(值越大越模糊) | number | No | Android IOS | YES | |
+| onLoad | 图片加载成功回调 | Function | No | Android IOS | YES | |
+| resolveAssetSource | 获取本地图片宽高 用法:const img1 = require('./assets/expo.png') let res = Image.resolveAssetSource(img1) | Function | No | Android IOS | YES | |
+| getSize | 获取网略图片尺寸:Image.getSize(uri,(width,height)=>{},(fail)=>{}) | Function | No | Android IOS | YES | |
+| onError | 获取图片资源出错 | Function | No | Android IOS HarmonyOS都不支持 | NO | [issues](https://github.com/huiseoul/react-native-fit-image/issues/76);在原库中作者已经说明Some props are not working |
+| onLoadStart | 资源刚加载时候 | Function | NO | Android IOS HarmonyOS都不支持 | NO | [issues](https://github.com/huiseoul/react-native-fit-image/issues/76);在原库中作者已经说明Some props are not working |
+| onLayout | 资源改变尺寸或者加载时 | Function | NO | Android IOS HarmonyOS都不支持 | NO | [issues](https://github.com/huiseoul/react-native-fit-image/issues/76);在原库中作者已经说明Some props are not working |
+| orginalWidth | 图片原始宽度 | number | NO | Android IOS | YES | |
+| orginalHeight | 图片原始高度 | number | NO | Android IOS | YES | |
+
+## 原库已知问题
+
+1. 在react-native-fit-image三方库中`onError`.`onLoadStart`.`onLayout`回调方法,在原库文档(react-native-fit-image)作者已说明并没有适配(Some props are not working),有待开发[issues](https://github.com/huiseoul/react-native-fit-image/issues/76)
+2. `borderRadius`图片圆角属性,在鸿蒙,ios,安卓均不支持,官方文档互动有提到borderRadius不生效;[issues](https://github.com/huiseoul/react-native-fit-image/issues/111)
+
+## 其他
diff --git a/zh-cn/react-native-image-editor.md b/zh-cn/react-native-image-editor.md
new file mode 100644
index 0000000000000000000000000000000000000000..322f5cc7652aa36d7ea58b6213beee201e3fe21e
--- /dev/null
+++ b/zh-cn/react-native-image-editor.md
@@ -0,0 +1,211 @@
+> 模板版本:v0.1.3
+
+
+
@react-native-community/image-editor
+
+
+
+
+
+
+
+
+
+
+
+> [Github 地址](https://github.com/react-native-oh-library/react-native-image-editor)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/image-editor Releases](https://github.com/react-native-oh-library/react-native-image-editor/releases),并下载适用版本的 tgz 包。
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/image-editor@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/image-editor@file:#
+```
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!TIP] 使用时 import 的库名不变。
+
+```js
+import ImageEditor from "@react-native-community/image-editor";
+
+ImageEditor.cropImage(uri, cropData).then((result) => {
+ console.log("Cropped image uri:", result);
+});
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink,所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法:
+
+1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法);
+2. 直接链接源码。
+
+方法一:通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`,添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-image-editor": "file:../../node_modules/@react-native-oh-tpl/image-editor/harmony/image_editor.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行:
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二:直接链接源码
+
+> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`,添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-image-editor": "file:../../node_modules/@react-native-oh-tpl/image-editor/harmony/image_editor"
+ }
+```
+
+打开终端,执行:
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入ImageEditorPackage
+
+打开 `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-image-editor/src/main/cpp" ./image-editor)
+# 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_image_editor)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`,添加:
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "ImageEditorPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 ImageEditorPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加:
+
+```diff
+...
++ import {ImageEditorPackage} from "rnoh-image-editor/ts";
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new ImageEditorPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行:
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[Releases](https://github.com/react-native-oh-library/react-native-image-editor/releases)
+
+## API
+
+| Name | Description | Platform | HarmonyOS Support |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------- |
+| cropImage | Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the promise will be rejected. If the cropping process is successful, the resultant cropped image will be stored in the cache path, and the CropResult returned in the promise will point to the image in the cache path. ⚠️ Remember to delete the cropped image from the cache path when you are done with it. | ios/Android | yes |
+
+cropData
+
+| 名称 | 类型 | 说明 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- |
+| `offset` | { x: number, y: number } | The top-left corner of the cropped image, specified in the original image's coordinate space | yes | All | yes |
+| `size` | { width: number, height: number } | Size (dimensions) of the cropped image | yes | All | yes |
+| `displaySize` | { width: number, height: number } | Size to which you want to scale the cropped image | no | All | yes |
+| `resizeMode` | 'contain' \| 'cover' \| 'stretch' | Resizing mode to use when scaling the image**Default value**: `'cover'` | no | All | yes |
+| `quality` | number | A value in range `0.0` - `1.0` specifying compression level of the result image. `1` means no compression (highest quality) and `0` the highest compression (lowest quality) **Default value**: `0.9` | no | All | yes |
+| `format` | 'jpeg' \| 'png' \| 'webp' | The format of the resulting image. **Default value**: based on the provided image; if value determination is not possible, `'jpeg'` will be used as a fallback. | no | All | yes |
+
+##
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [ [The MIT License (MIT)]](https://github.com/callstack/react-native-image-editor/blob/master/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-image-viewer.md b/zh-cn/react-native-image-viewer.md
new file mode 100644
index 0000000000000000000000000000000000000000..107b91fcd025d8e1a408ac5b372f3f4c023a23c0
--- /dev/null
+++ b/zh-cn/react-native-image-viewer.md
@@ -0,0 +1,277 @@
+> 模板版本:v0.1.3
+
+
+
react-native-image-viewer
+
+
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-image-viewer)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-image-viewer> Releases](https://github.com/react-native-oh-library/react-native-image-viewer/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### npm
+
+```bash
+npm install @react-native-oh-tpl/react-native-image-viewer@file:#
+```
+
+#### yarn
+
+```bash
+yarn add @react-native-oh-tpl/react-native-image-viewer@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```tsx
+import React, { useState } from "react";
+import {
+ Text,
+ View,
+ Button,
+ Image,
+ ScrollView,
+ StyleSheet,
+} from "react-native";
+import ImageViewer from "react-native-image-zoom-viewer";
+
+const ReactImageZoon = () => {
+ // 向下滑动的阈值
+ const [flipThreshold, setFlipThreshold] = useState(0);
+ // 页脚位置
+ const [footerContainerStyle, setFlexooterContainerStyle] = useState(100);
+ // 翻页动画时间
+ const [pageAnimateTimeA, setPageAnimateTime] = useState(0);
+
+ const [changeStatus, setChangeStatus] = useState("");
+ const renderHeaderFun = () => {
+ return (
+
+
+ 自定义页头或页脚
+
+
+ );
+ };
+
+ const renderArrowLeftFun = () => {
+ return (
+
+
+
+ );
+ };
+ const renrenderArrowRightFun = () => {
+ return (
+
+
+
+ );
+ };
+
+ const renderIndicatorFn = (currentIndex?: number, allSize?: number) => {
+ return (
+
+ {`${currentIndex}/${allSize}`}
+
+ );
+ };
+
+ const images = [
+ {
+ url: "",
+ props: {
+ // headers: ...
+ source: require("./assets/1.png"),
+ },
+ },
+ {
+ url: "https://octodex.github.com/images/godotocat.png",
+ props: {
+ // headers: ...
+ },
+ },
+ {
+ url: "",
+ props: {},
+ },
+ ];
+
+ const clearBtn = () => {
+ setChangeStatus("");
+ setFlexooterContainerStyle(100);
+ setPageAnimateTime(0);
+ };
+ return (
+
+
+
+
+ imageUrls enableImageZoom;index;saveToLocalByLongPress;
+ backgroundColor,onChange;
+ flipThreshold;renderIndicator;renderArrowRight
+ renderArrowLeft;pageAnimateTime;renderHeader;renderFooter;
+ onClick;footerContainerStyle;failImageSource
+
+ 保存到相机的回调onSaveToCamera
+ 查看更改的状态{changeStatus}
+
+
+ {
+ setChangeStatus("onSaveToCamera");
+ }}
+ onChange={() => {
+ setChangeStatus("onChange");
+ }}
+ onClick={() => {
+ setChangeStatus("onClick");
+ }}
+ flipThreshold={flipThreshold}
+ renderArrowLeft={renderArrowLeftFun}
+ renderArrowRight={renrenderArrowRightFun}
+ pageAnimateTime={pageAnimateTimeA}
+ renderHeader={renderHeaderFun}
+ renderFooter={renderHeaderFun}
+ renderIndicator={renderIndicatorFn}
+ footerContainerStyle={{
+ bottom: footerContainerStyle,
+ position: "absolute",
+ zIndex: 9999,
+ }}
+ failImageSource={{
+ width: 300,
+ height: 300,
+ url: "https://octodex.github.com/images/Robotocat.png",
+ }}
+ />
+
+
+ setFlipThreshold(0)} />
+ setFlipThreshold(1000)}
+ />
+ setFlexooterContainerStyle(200)}
+ />
+
+
+
+ setPageAnimateTime(500)}
+ >
+
+
+ );
+};
+const styles = StyleSheet.create({
+ container: {
+ flexDirection: "row",
+ justifyContent: "space-around",
+ },
+});
+
+export default ReactImageZoon;
+```
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+## 属性
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support | Remark |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- | ----------------- | ---------------------------------------- |
+| imageUrls | Image Source | array | yes | Android IOS | YES | |
+| enableImageZoom | Enable image zoom | boolean | no | Android IOS | NO | |
+| onShowModal | The callback for show modal | function (content?: JSX.Element) => void | no | NO | NO | 此属性在HarmonyOS,Android ,IOS均不生效 |
+| onCancel | The callback for cancel modal | function () => void | no | Android IOS | YES | |
+| flipThreshold | Swipe threshold of the next page | number | no | Android IOS | YES | |
+| maxOverflow | The X position maximum, that current page can slide to the next page | number | no | Android IOS | YES | |
+| index | Init index of images | number | no | Android IOS | YES | |
+| failImageSource | placeholder for fail | string, object {url: string} | no | Android IOS | YES | |
+| loadingRender | placeholder for loading | function () => React.ReactElement | no | Android IOS | YES | |
+| onSaveToCamera | The callback for save to camera | function (index?: number => void | no | Android IOS | YES | |
+| onChange | When the image changed | function (index?: number => void | no | Android IOS | YES | |
+| onMove | ()=> {} | ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void | reports movement position data (helpful to build overlays) | Android IOS | YES | |
+| saveToLocalByLongPress | Enable save to camera when long press | boolean | no | Android IOS | YES | |
+| onClick | Onclick | function (onCancel?: function) => void | no | Android IOS | YES | |
+| onDoubleClick | OnDoubleClick | function (onCancel?: function) => void | no | Android IOS | YES | |
+| onSave | The picture is saved to the local method, if you write this method will not call the system default method for Android does not support saveToCameraRoll remote picture, you can call this callback in Android call native interface | function (url: string) => void | no | Android IOS | YES | |
+| renderHeader | Custom header | function (currentIndex?: number) => React.ReactElement | no | Android IOS | YES | |
+| renderFooter | Custom footer | function (currentIndex?: number) => React.ReactElement | no | Android IOS | YES | |
+| renderIndicator | Custom indicator | function `(currentIndex?: number, allSize?) => React.ReactElement`: number | no | Android IOS | YES | |
+| renderImage | Custom image component | function (props: any) => React.ReactElement | no | Android IOS | YES | |
+| renderArrowLeft | Custom left arrow | function () => React.ReactElement | no | Android IOS | YES | |
+| renderArrowRight | Custom right arrow | function () => React.ReactElement | no | Android IOS | YES | |
+| onSwipeDown | Callback for swipe down | function () => void | no | Android IOS | YES | |
+| footerContainerStyle | custom style props for container that will be holding your footer that you pass | object {someStyle: someValue} | no | Android IOS | YES | |
+| backgroundColor | Component background color | string white | no | Android IOS | YES | |
+| enableSwipeDown | Enable swipe down to close image viewer. When swipe down, will trigger onCancel. | boolean | no | Android IOS | YES | |
+| swipeDownThreshold | Threshold for firing swipe down function | number | no | Android IOS | YES | |
+| doubleClickInterval | Double click interval. | number | no | Android IOS | YES | |
+| pageAnimateTime | Set the animation time for page flipping. | number | no | Android IOS | YES | |
+| enablePreload | Preload the next image | boolean | no | Android IOS | YES | |
+| useNativeDriver | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver) | boolean | no | Android IOS | YES | |
+| menus | Custom menus, with 2 methods:`cancel` to hide menus and `saveToLocal` to save image to camera | function ({cancel,saveToLocal}) => React.ReactElement | no | Android IOS | YES | |
+| menuContext | Custom menu context. | object {someKey: someValue} | no | Android IOS | YES | |
+
+## 遗留问题
+
+- [ ] 本库 CameraRoll.saveToCameraRoll 还未完全鸿蒙化,暂不支持调起相册 (未解决)[#I99NUM](https://gitee.com/chenchen2019710/usage-docs/issues/I99NUM)
+- [ ] 本库依赖 react-native-image-zoom ,enableImageZoom属性还未完全鸿蒙化(未解决)[#I99NP7](https://gitee.com/wuyasmile/usage-docs/issues/I99NP7)
+- [ ] 本库依赖 react-native-image-zoom ,长按触发框架图片拖拽,应用崩溃(未解决)[#I99NQ7](https://gitee.com/wuyasmile/usage-docs/issues/I99NQ7)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-image-viewer/blob/sig/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-image-viewing.md b/zh-cn/react-native-image-viewing.md
new file mode 100644
index 0000000000000000000000000000000000000000..f401b850a007634e0d7bd9a45adfcd5adc88c65f
--- /dev/null
+++ b/zh-cn/react-native-image-viewing.md
@@ -0,0 +1,220 @@
+> 模板版本:v0.1.3
+
+
+
react-native-image-viewing
+
+
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-viewing)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-image-viewing> Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+进入到工程目录并输入以下命令:
+
+#### npm
+
+```bash
+npm install @react-native-oh-tpl/react-native-image-viewing@file:#
+```
+
+#### yarn
+
+```bash
+yarn add @react-native-oh-tpl/react-native-image-viewing@file:#
+```
+
+快速使用:
+
+```js
+import React, { useState } from "react";
+import {
+ Alert,
+ Platform,
+ SafeAreaView,
+ StatusBar,
+ StyleSheet,
+ Text,
+ View,
+ Image, ScrollView, TouchableOpacity
+} from "react-native";
+import memoize from "lodash/memoize";
+import get from "lodash/get";
+import ImageViewing from "react-native-image-viewing";
+import {ImageSource} from "react-native-image-viewing/dist/@types"
+
+type Props = {
+ images: string[];
+ onPress: (index: number) => void;
+ shift?: number;
+};
+
+const IMAGE_WIDTH = 120;
+const IMAGE_HEIGH = 120;
+
+const architecture = [
+ {
+ thumbnail: "https://img.zcool.cn/community/01d191576ccecb0000018c1b64e382.jpg@1280w_1l_2o_100sh.jpg",
+ original: "https://img.zcool.cn/community/01d191576ccecb0000018c1b64e382.jpg@1280w_1l_2o_100sh.jpg",
+ },
+ {
+ thumbnail: "https://p0.ssl.qhimgs1.com/sdr/400__/t0461b1cfd7e4ef2b66.jpg",
+ original: "https://p0.ssl.qhimgs1.com/sdr/400__/t0461b1cfd7e4ef2b66.jpg",
+ },
+ {
+ thumbnail: "https://p0.ssl.qhimgs1.com/sdr/400__/t017c44dc545b663cce.jpg",
+ original: "https://p0.ssl.qhimgs1.com/sdr/400__/t017c44dc545b663cce.jpg",
+ }
+];
+
+
+const ImageList = ({ images, shift = 0, onPress }: Props) => (
+
+ {images.map((imageUrl, index) => (
+ onPress(index)}
+ >
+
+
+ ))}
+
+);
+
+const styles1 = StyleSheet.create({
+ root: { flexGrow: 0 },
+ container: {
+ flex: 0,
+ paddingLeft: 10,
+ marginBottom: 10
+ },
+ button: {
+ marginRight: 10
+ },
+ image: {
+ width: IMAGE_WIDTH,
+ height: IMAGE_HEIGH,
+ borderRadius: 10
+ }
+});
+
+function App() {
+ const [currentImageIndex, setImageIndex] = useState(0);
+ const [images, setImages] = useState(architecture);
+ const [isVisible, setIsVisible] = useState(false);
+
+ const onSelect = (images, index) => {
+ setImageIndex(index);
+ setImages(images);
+ setIsVisible(true);
+ };
+
+ const onRequestClose = () => setIsVisible(false);
+
+
+ const getImageSource = memoize((images): ImageSource[] =>
+ images.map((image) =>
+ typeof image.original === "number"
+ ? image.original
+ : { uri: image.original as string }
+ )
+ );
+
+ return (
+
+ image.thumbnail)}
+ onPress={(index) => onSelect(architecture, index)}
+ shift={0.75}
+ />
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ root: {
+ flex: 1,
+ backgroundColor: "#000",
+ ...Platform.select({
+ android: { paddingTop: StatusBar.currentHeight },
+ default: null,
+ }),
+ },
+ about: {
+ flex: 1,
+ marginTop: -12,
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ name: {
+ textAlign: "center",
+ fontSize: 24,
+ fontWeight: "200",
+ color: "#FFFFFFEE",
+ },
+});
+
+```
+
+## 兼容性
+
+在下述版本验证通过:
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT DP2; IDE:DevEco Studio 4.1.3.700; ROM:204.1.0.72(SP2DEVC00E72R1P1);
+
+## API列表
+
+| Name | Description | Type | Required | HarmonyOS Support |
+| ---------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- | ----------------- |
+| images | Array of images to display | ImageSource[] | Yes | Yes |
+| keyExtractor | Uniqely identifying each image | (imageSrc: ImageSource, index: number) => string | No | Yes |
+| imageIndex | Current index of image to display | number | Yes | Yes |
+| visible | Is modal shown or not | boolean | No | Yes |
+| onRequestClose | Function called to close the modal | function | Yes | Yes |
+| onImageIndexChange | Function called when image index has been changed | function | No | Yes |
+| onLongPress | Function called when image long pressed | function (event: GestureResponderEvent, image: ImageSource) | No | Yes |
+| delayLongPress | Delay in ms, before onLongPress is called: default | number | No | Yes |
+| animationType | Animation modal presented with: default | none, fade, slide | No | Yes |
+| presentationStyle | Modal presentation style: default: fullScreen Android: Use overFullScreen to hide StatusBar | fullScreen, pageSheet, formSheet, overFullScreen | No | Yes |
+| backgroundColor | Background color of the modal in HEX | string | No | Yes |
+| swipeToCloseEnabled | Close modal with swipe up or down: default | boolean | No | Yes |
+| doubleTapToZoomEnabled | Zoom image by double tap on it: default | boolean | No | Yes |
+| HeaderComponent | Header component, gets current imageIndex as a prop | component, function | No | Yes |
+| FooterComponent | Footer component, gets current imageIndex as a prop | component, function | No | Yes |
+
+## 遗留问题
+
+- [ ] 本库 swipeToCloseEnabled,doubleTapToZoomEnabled,animationType 还未完全HarmonyOS化,暂不支持上下滑动关闭、双击放大与动画效果功能 (未解决)[#I9DNQU](https://gitee.com/react-native-oh-library/usage-docs/issues/I9DQPA)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/facebook/prop-types/blob/v15.8.1/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-image-zoom.md b/zh-cn/react-native-image-zoom.md
new file mode 100644
index 0000000000000000000000000000000000000000..1c417b618b461fdd763c0107ec63413c2a19569e
--- /dev/null
+++ b/zh-cn/react-native-image-zoom.md
@@ -0,0 +1,541 @@
+模板版本:v0.1.3
+
+
+
react-native-image-zoom
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-zoom)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-library/react-native-image-zoom> Releases](https://github.com/react-native-oh-library/react-native-image-zoom/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-image-zoom@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-image-zoom@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```tsx
+import React, { useState } from "react";
+import {
+ Button,
+ Dimensions,
+ Image,
+ LayoutChangeEvent,
+ StyleSheet,
+ Switch,
+ Text,
+ View,
+} from "react-native";
+import ImageZoom from "react-native-image-pan-zoom";
+import type { IOnClick, IOnMove, ICenterOn } from "react-native-image-pan-zoom";
+// const LOCAL_IMAGE_ASSET_ID = require('../')
+
+const formatEventData = (evt: IOnClick) => {
+ const { locationX, locationY, pageX, pageY } = evt;
+ return `x ${locationX.toFixed(2)} y ${locationY.toFixed(2)} pageX ${pageX.toFixed(2)} pageY ${pageY.toFixed(2)}`;
+};
+
+const ImageZoomDemo = () => {
+ //长按
+ const [longPressData, setLongPressData] = useState(
+ "LongPress: Haven't long pressed yet",
+ );
+ const longPressHandler = (evt: IOnClick) => {
+ const data = formatEventData(evt);
+ setLongPressData(`LongPress: ${data}`);
+ };
+ const [longPressTime, setLongPressTime] = useState(800);
+
+ // 双击
+ const [doubleClickData, setDoubleClickData] = useState(
+ "DoubleClick: Haven't doubleclicked yet",
+ );
+ const [isEnabled, setIsEnabled] = useState(false);
+ const toggleDoubleClickSwitch = () =>
+ setIsEnabled((previousState) => !previousState);
+ const doubleClickHandler = (evt: IOnClick) => {
+ setDoubleClickData(
+ `DoubleClick: x: ${evt.locationX.toFixed(2)} y: ${evt.locationY.toFixed(2)}}`,
+ );
+ };
+ const [clickInterval, setClickInterval] = useState(175);
+
+ // 单击
+ const [singleClickData, setSingleClickData] = useState(
+ "SingleClick: Haven't singleClicked yet",
+ );
+ const singleClickHandler = (evt: IOnClick) => {
+ setSingleClickData(
+ `SingleClick: x: ${evt.locationX.toFixed(2)} y: ${evt.locationY.toFixed(2)}`,
+ );
+ };
+
+ // 下滑
+ const [swiperDownData, setSwiperDownData] = useState(
+ "SwiperDown: Haven't swipe down yet",
+ );
+ const [enableSwiperDown, setSwiperDownEnabled] = useState(false);
+ const [downThreshold, setDownThreshold] = useState(230);
+ const swiperDownHandler = () => {
+ setSwiperDownData("SwiperDown: already swipe down");
+ };
+ const toggleSwipeDownSwitch = () => {
+ setSwiperDownEnabled((previousState) => !previousState);
+ };
+
+ // 移动
+ const [moveData, setMoveData] = useState("Move: Haven't move yet");
+ const moveHandler = (data: IOnMove) => {
+ const { type, positionX, positionY, scale, zoomCurrentDistance } = data;
+ setMoveData(
+ `Move: type:${type} positionX:${positionX.toFixed(2)} positionY:${positionY.toFixed(2)} scale:${scale} zoomCurrentDistance:${zoomCurrentDistance}`,
+ );
+ };
+
+ // 窗口和图片尺寸
+ const winWidth = Dimensions.get("window").width;
+ const winHeight = winWidth;
+ const [zoomWidth, setZoomWidth] = useState(winWidth);
+ const [zoomHeight, setZoomHeight] = useState(winHeight);
+ const defaultViewData = `Current view data:width:${zoomWidth.toFixed(2)}, height:${zoomHeight.toFixed(2)}`;
+ const [viewData, setViewData] = useState(defaultViewData);
+ const toggleAdd = () => {
+ setZoomWidth(winWidth);
+ setZoomHeight(winHeight);
+ setViewData(getViewData(winWidth, winHeight));
+ };
+ const toggleDecrease = () => {
+ setZoomWidth(winWidth * 0.8);
+ setZoomHeight(winHeight * 0.8);
+ setViewData(getViewData(winWidth * 0.8, winHeight * 0.8));
+ };
+ const getViewData = (width: number, height: number) => {
+ return `Current view data:width: ${width.toFixed(2)} height: ${height.toFixed(2)}`;
+ };
+
+ // 双指缩放
+ const [isEnablePinchToZoom, setPinchToZoomState] = useState(false);
+ const togglePinchToZoomSwitch = () => {
+ setPinchToZoomState((previousState) => !previousState);
+ };
+ const [minScale, setMinScale] = useState(0.6);
+ const [maxScale, setMaxScale] = useState(2);
+
+ // 单指移动
+ const [isEnablePanToMove, setPanToMoveState] = useState(false);
+ const [singleClickDistance, setSingleClickDistance] = useState(10);
+ const togglePanToMoveSwitch = () => {
+ setPanToMoveState((previousState) => !previousState);
+ };
+ const [maxOverflow, setMaxOverFlow] = useState(100);
+
+ // 自定义中心
+ const defaultCenter: ICenterOn = {
+ x: 0,
+ y: 0,
+ scale: 1,
+ duration: 300,
+ };
+ const [centerData, setCenterData] = useState(
+ (): ICenterOn | undefined => undefined,
+ );
+ const leftCenter: ICenterOn = {
+ x: 100,
+ y: 100,
+ scale: 1,
+ duration: 300,
+ };
+ const [centerEnable, setCenterIsEnable] = useState(false);
+ const toggleSettingCenter = (val: boolean) => {
+ console.log(`toggleSettingCenter: ${val}`);
+ if (val) {
+ setCenterData(leftCenter);
+ } else {
+ setCenterData(defaultCenter);
+ }
+ setCenterIsEnable((previousState) => !previousState);
+ };
+
+ // 中心焦点
+ const [enableCenterFocus, setEnterFocusIsEnable] = useState(false);
+
+ // 动画驱动
+ const [enableNativeDriver, setNativeDriverIsEnable] = useState(false);
+
+ // 禁用安卓渲染
+ const [enableAndroidRender, setAndroidRenderEnable] = useState(false);
+
+ // 触发想切换到左边的图,向左滑动速度超出阈值触发
+ const dragLeftHandler = () => {
+ console.log("dragLeftHandler!!!");
+ };
+
+ // 松手但是没有取消看图
+ const responderReleaseHandler = (vx: number, scale: number) => {
+ setViewData(`ResponderRelease: scale: ${scale}`);
+ };
+
+ // 成为响应者
+ const startPanResponderHandler = () => {
+ console.log("respondercallback:startPanResponderHandler!!!");
+ return true;
+ };
+ const movePanResponderHandler = () => {
+ console.log("respondercallback:movePanResponderHandler!!!");
+ return false;
+ };
+ const terminationRequestHandler = () => {
+ console.log("respondercallback:terminationRequestHandler!!!");
+ return false;
+ };
+
+ const getButtonColor = (current: number, origin: number): string => {
+ return current === origin ? "#007AFF99" : "#007AFF";
+ };
+
+ // 横向超出距离
+ const offsetHandler = (offsetX?: number) => {
+ setViewData(`HorizontalOuterRangeOffset: offsetX: ${offsetX?.toFixed(2)}`);
+ };
+
+ // 图片渲染完成
+ const layoutChangeHandler = (event: LayoutChangeEvent) => {
+ console.log("layoutChangeHandler!!!");
+ };
+
+ return (
+
+
+ 操作区域:
+
+
+ {" "}
+
+
+
+
+ {viewData}
+ {longPressData}
+ {doubleClickData}
+ {singleClickData}
+ {swiperDownData}
+
+
+ 单指移动:
+
+
+
+ 双指缩放:
+
+
+
+ 双击放大:
+
+
+
+ 开启下滑:
+
+
+
+ 自定义中心:
+ toggleSettingCenter(value)}
+ value={centerEnable}
+ >
+
+
+ 中心禁用:
+ setEnterFocusIsEnable(value)}
+ value={enableCenterFocus}
+ >
+
+
+ 动画驱动:
+ setNativeDriverIsEnable(value)}
+ value={enableNativeDriver}
+ >
+
+ {/* 禁用安卓硬解: setAndroidRenderEnable(value)} value={enableAndroidRender}> */}
+
+ 单击距离:
+
+ setSingleClickDistance(10)}
+ color={getButtonColor(singleClickDistance, 10)}
+ />
+ {" "}
+
+ setSingleClickDistance(50)}
+ color={getButtonColor(singleClickDistance, 50)}
+ />
+
+
+
+ 滑动阈值:
+
+ setMaxOverFlow(100)}
+ color={getButtonColor(maxOverflow, 100)}
+ />
+ {" "}
+
+ setMaxOverFlow(200)}
+ color={getButtonColor(maxOverflow, 200)}
+ />
+
+
+
+ 长按阈值:
+
+ setLongPressTime(800)}
+ color={getButtonColor(longPressTime, 800)}
+ />
+ {" "}
+
+ setLongPressTime(2000)}
+ color={getButtonColor(longPressTime, 2000)}
+ />
+
+
+
+ 下滑阈值:
+
+ setDownThreshold(230)}
+ color={getButtonColor(downThreshold, 230)}
+ />
+ {" "}
+
+ setDownThreshold(100)}
+ color={getButtonColor(downThreshold, 100)}
+ />
+
+
+
+ 最小缩放:
+
+ setMinScale(0.6)}
+ color={getButtonColor(minScale, 0.6)}
+ />
+ {" "}
+
+ setMinScale(1)}
+ color={getButtonColor(minScale, 1)}
+ />
+
+
+
+ 最大缩放:
+
+ setMaxScale(2)}
+ color={getButtonColor(maxScale, 2)}
+ />
+ {" "}
+
+ setMaxScale(5)}
+ color={getButtonColor(maxScale, 5)}
+ />
+
+
+
+ 双击间隔:
+
+ setClickInterval(175)}
+ color={getButtonColor(clickInterval, 175)}
+ />
+ {" "}
+
+ setClickInterval(1000)}
+ color={getButtonColor(clickInterval, 1000)}
+ />
+
+
+
+ {moveData}
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ button: {
+ width: 50,
+ },
+ switchText: {
+ width: "50%",
+ },
+ box: {
+ display: "flex",
+ flexDirection: "row",
+ flexWrap: "wrap",
+ },
+});
+
+export default ImageZoomDemo;
+```
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+## 属性
+
+详情见[react-native-image-zoom](https://github.com/ascoders/react-native-image-zoom)
+
+# `ImageZoom`
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support | note |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | ------------------------------------------------------------------------------------------ |
+| **cropWidth(required)** | operating area width | number | YES | ALL | YES | |
+| **cropHeight(required)** | operating area height | number | YES | ALL | YES | |
+| **imageWidth(required)** | picture width | number | YES | ALL | YES | |
+| **imageHeight(required)** | picture height | number | YES | ALL | YES | |
+| onClick | onClick | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | NO | ALL | YES | |
+| `onDoubleClick` | onDoubleClick | `(eventParams: IOnClick)=>void ` | NO | ALL | YES | |
+| `panToMove` | allow to move picture with one finger | `boolean` | NO | ALL | YES | |
+| pinchToZoom | allow scale with two fingers | `boolean` | NO | ALL | NO | 详见遗留问题 |
+| clickDistance | how many finger movement can also trigger `onClick` | number | NO | ALL | YES | |
+| `horizontalOuterRangeOffset` | horizontal beyond the distance, the parent to do picture switching, you can listen to this function. When this function is triggered, you can do the switch operation | (offsetX?: number)=>void | NO | ALL | YES | |
+| onDragLeft | trigger to switch to the left of the graph, the left sliding speed exceeds the threshold when triggered | ()=>void | NO | \ | NO | 此回调函数源码未实现,详见:https://github.com/ascoders/react-native-image-zoom/issues/103 |
+| `responderRelease` | let go but do not cancel | (vx: number)=>void | NO | ALL | YES | |
+| `maxOverflow` | maximum sliding threshold | `number` | NO | ALL | YES | |
+| `longPressTime` | long press threshold | `number` | NO | ALL | YES | |
+| onLongPress | on longPress | (eventParams: [IOnClick](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts))=>void | NO | ALL | YES | |
+| `doubleClickInterval ` | time allocated for second click to be considered as doublClick event | number | NO | ALL | YES | |
+| `onMove` | reports movement position data (helpful to build overlays) | ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void | NO | ALL | YES | |
+| `centerOn` | if given this will cause the map to pan and zoom to the desired location | { x: number, y: number, scale: number, duration: number } | NO | ALL | YES | |
+| `enableSwipeDown` | for enabling vertical movement if user doesn't want it | `boolean` | NO | ALL | YES | |
+| `enableCenterFocus` | for disabling focus on image center if user doesn't want it | `boolean` | NO | ALL | YES | `` |
+| `onSwipeDown` | function that fires when user swipes down | `() => void ` | NO | ALL | YES | |
+| `swipeDownThreshold` | threshold for firing swipe down function | `number` | NO | ALL | YES | |
+| `minScale` | minimum zoom scale | `number` | NO | ALL | NO | 此值在双指缩放功能正常后可生效 |
+| maxScale | maximum zoom scale | number | NO | ALL | NO | 此值在双指缩放功能正常后可生效 |
+| useNativeDriver | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver) | boolean | NO | ALL | YES | |
+| onStartShouldSetPanResponder | Override onStartShouldSetPanResponder behavior | () => boolean | NO | ALL | YES | |
+| onMoveShouldSetPanResponder | Override onMoveShouldSetPanResponder behavior | () => boolean | NO | ALL | YES | |
+| onPanResponderTerminationRequest | Override onMoveShouldSetPanResponder behavior | () => boolean | NO | ALL | NO | 详见遗留问题 |
+| useHardwareTextureAndroid | for disabling rendering to hardware texture on Android | boolean | NO | Android | NO | 此属性仅Android生效 |
+
+## 遗留问题
+
+- [ ] 双指缩放在harmony框架侧不支持使用[#I99NP7](https://gitee.com/wuyasmile/usage-docs/issues/I99NP7)
+
+- [ ] 长按图片后,rn框架图片拖拽属性导致程序崩溃[#I99NQ7](https://gitee.com/wuyasmile/usage-docs/issues/I99NQ7)
+
+- [x] 下滑图片,然后双击放大,再次下滑表现异常,已在源库基础上修改[上库地址](https://github.com/react-native-oh-library/react-native-image-zoom),源库已被存档,不能新建issue,特此记录
+
+- [ ] onPanResponderTerminationRequest方法,harmony端与android端表现不一致[#I9ATFE](https://gitee.com/wuyasmile/usage-docs/issues/I9ATFE)
+
+## 其他
diff --git a/zh-cn/react-native-intersection-observer.md b/zh-cn/react-native-intersection-observer.md
new file mode 100644
index 0000000000000000000000000000000000000000..cf2cd6b8e5de6969df1fbf060d59024e8eee855d
--- /dev/null
+++ b/zh-cn/react-native-intersection-observer.md
@@ -0,0 +1,137 @@
+> 模板版本:v0.1.3
+
+
+
react-native-intersection-observer
+
+
+
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-intersection-observer/tree/sig)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-library/react-native-intersection-observer> Releases](https://github.com/react-native-oh-library/react-native-intersection-observer/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-library/react-native-intersection-observer@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-library/react-native-intersection-observer@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { useRef } from "react";
+import { Text } from "react-native";
+import {
+ IOScrollView,
+ IOScrollViewController,
+ InView,
+} from "react-native-intersection-observer";
+
+function App() {
+ const scrollViewRef = useRef(null);
+ return (
+
+ {
+ scrollViewRef.current?.scrollToEnd();
+ }}
+ >
+ Scroll to bottom
+
+ console.log("Inview:", inView)}>
+
+ Plain children are always rendered. Use onChange to monitor state.
+
+
+
+ );
+}
+
+export default App;
+```
+
+## 约束与限制
+
+#### 兼容性
+
+在下述版本验证通过:
+
+RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.59;
+
+#### 组件及属性
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+详情请查看[react-native-intersection-observer](https://github.com/zhbhun/react-native-intersection-observer/blob/master/README.md)
+
+如下是已经鸿蒙化的属性:
+
+> [!tip] "鸿蒙支持"列为 yes 的属性表示支持鸿蒙平台,并且效果对标"原库平台"列中的 ios 或 android 的效果。
+
+#### **IOScrollView** **组件**
+
+#### 此组件有以下属性:
+
+Props: Inherits [ScrollView Props](https://reactnative.dev/docs/scrollview#props)
+
+| Name | Description | Type | Default | Require | HarmonyOS Support |
+| ---------- | ------------- | ------------------------------------------------------------ | --------- | ------- | ----------------- |
+| rootMargin | `root margin` | { top: number; left: number; right: number; bottom: number } | undefined | false | yes |
+
+Methods: Inherits [ScrollView Methods](https://reactnative.dev/docs/scrollview#methods)
+
+#### **IOFlatList** **组件**
+
+#### 此组件有以下属性:
+
+Props: Inherits [FlatList Props](https://reactnative.dev/docs/flatlist#props)
+
+| Name | Description | Type | Default | Require | HarmonyOS Support |
+| ---------- | ------------- | ------------------------------------------------------------ | --------- | ------- | ----------------- |
+| rootMargin | `root margin` | { top: number; left: number; right: number; bottom: number } | undefined | false | yes |
+
+Methods: Inherits [FlatList Methods](https://reactnative.dev/docs/flatlist#methods)
+
+#### **InView** **组件**
+
+#### 此组件有以下属性:
+
+| Name | Description | Type | Default | Require | HarmonyOS Support |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ------- | ------- | ----------------- |
+| as | `Render the wrapping element as this element. Defaults to `View`.` | `ComponentType` | View | false | yes |
+| children | Children expects a plain child, to have the ` ` deal with the wrapping element. | ReactNode | | true | yes |
+| triggerOnce | Only trigger this method once. | boolean | false | false | yes |
+| onChange | Call this function whenever the in view state changes. It will receive the `inView` boolean, alongside the current `IntersectionObserverEntry`. | `(inView: boolean) => void` | | false | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-intersection-observer/blob/sig/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-markdown-display.md b/zh-cn/react-native-markdown-display.md
new file mode 100644
index 0000000000000000000000000000000000000000..54a778093e40b327d84a6d44d8eeab76ad5b30f5
--- /dev/null
+++ b/zh-cn/react-native-markdown-display.md
@@ -0,0 +1,126 @@
+> 模板版本:v0.1.3
+
+
+
react-native-markdown-display
+
+
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-markdown-display Releases](https://github.com/react-native-oh-library/react-native-markdown-display/releases/tag/7.0.2-0.0.1),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-markdown-display
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-markdown-display
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import React from 'react';
+import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
+
+import Markdown from 'react-native-markdown-display';
+
+const copy = `# h1 Heading 8-)
+
+**This is some bold text!**
+
+This is normal text
+`;
+
+const App: () => React$Node = () => {
+ return (
+ <>
+
+
+
+
+ {copy}
+
+
+
+ >
+ );
+};
+
+export default App;
+```
+
+## Link
+
+目前鸿蒙暂不支持` AutoLink`,所以` Link` 步骤需要手动配置。
+
+首先需要使用 `DevEco Studio` 打开项目里的鸿蒙工程 `harmony`
+
+## 约束与限制
+
+### 兼容性
+
+在以下版本验证通过
+
+- RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+### 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+详情请查看[react-native-markdown-display](https://github.com/iamacup/react-native-markdown-display/blob/master/README.md)
+
+如下是已经鸿蒙化的属性:
+
+> [!tip] "鸿蒙支持"列为 yes 的属性表示支持鸿蒙平台,并且效果对标"原库平台"列中的 ios 或 android 的效果。
+
+| Name | Description | Default | Required | Platform | HarmonyOS Support |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- |
+| `children` | The markdown string to render, or the [pre-processed tree](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#pre-processing) | N/A | Yes | All | yes |
+| `style` | An object to override the styling for the various rules, [see style section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#rules-and-styles) for more info | [source](https://github.com/react-native-oh-library/react-native-markdown-display/blob/7.0.2-0.0.1/src/lib/styles.js) | No | All | yes |
+| `mergeStyle` | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them | `true` | No | All | yes |
+| `rules` | An object of rules that specify how to render each markdown item, [see rules section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#rules) for more info | [source](https://github.com/react-native-oh-library/react-native-markdown-display/blob/7.0.2-0.0.1/src/lib/renderRules.js) | No | All | yes |
+| `onLinkPress` | A handler function to change click behaviour, [see handling links section below](https://github.com/react-native-oh-library/react-native-markdown-display/tree/sig#handling-links) for more info | `import { Linking } from 'react-native';` and `Linking.openURL(url);` | No | All | yes |
+| `debugPrintTree` | Will print the AST tree to the console to help you see what the markdown is being translated to | `false` | No | All | yes |
+| `renderer` | Used to specify a custom renderer, you can not use the rules or styles props with a custom renderer. | `instanceOf(AstRenderer)` | No | All | yes |
+| `markdownit` | A custom markdownit instance with your configuration, default is `MarkdownIt({typographer: true})` | `instanceOf(MarkdownIt)` | No | All | yes |
+| `maxTopLevelChildren` | If defined as a number will only render out first `n` many top level children, then will try to render out `topLevelMaxExceededItem` | `null` | No | All | yes |
+| `topLevelMaxExceededItem` | Will render when `maxTopLevelChildren` is hit. Make sure to give it a key! | `... ` | No | All | yes |
+| `allowedImageHandlers` | Any image that does not start with one of these will have the `defaultImageHandler` value prepended to it (unless `defaultImageHandler` is null in which case it won't try to render anything) | `['data:image/png;base64', 'data:image/gif;base64', 'data:image/jpeg;base64', 'https://', 'http://']` | No | All | yes |
+| `defaultImageHandler` | Will be prepended to an image url if it does not start with something in the `allowedImageHandlers` array, if this is set to null, it won't try to recover but will just not render anything instead. | `http://` | No | All | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-markdown-display/blob/sig/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-marquee.md b/zh-cn/react-native-marquee.md
new file mode 100644
index 0000000000000000000000000000000000000000..7bc2c073e61dbb1a9f85fea03b20bbe59eba1e4e
--- /dev/null
+++ b/zh-cn/react-native-marquee.md
@@ -0,0 +1,105 @@
+> 模板版本:v0.1.3
+
+
+
react-native-marquee
+
+
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-marquee)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-marquee> Releases](https://github.com/react-native-oh-library/react-native-marquee/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+进入到工程目录并输入以下命令:
+
+#### **npm**
+
+```bash
+npm install --save react-native-marquee@0.5.0-0.0.1
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-marquee@0.5.0-0.0.1
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { Component } from "react";
+import { StyleSheet, View } from "react-native";
+import MarqueeText from "react-native-marquee";
+
+export default class MarqueeTextSample extends Component {
+ render() {
+ return (
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting
+ industry and typesetting industry.
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: "center",
+ },
+});
+```
+
+## Link
+
+## 属性
+
+MarqueText组件基本上继承了TextProps,以下是附加组件:
+
+| Prop | Type | Optional | Default | Description | HarmonyOS Support |
+| ----------------- | -------- | -------- | ------- | ------------------------------------------------------------------------------- | ----------------- |
+| marqueeOnStart | boolean | true | true | 是否在渲染后立即启动字幕动画的标志 | yes |
+| speed | number | true | 1 | 以像素/秒计算的速度 | yes |
+| loop | boolean | true | true | 是否循环字幕动画的标志 | yes |
+| delay | number | true | 0 | 渲染后延迟动画的持续时间,以毫秒为单位 | yes |
+| onMarqueeComplete | function | true | void | 字幕完成动画并停止时的回调 | yes |
+| consecutive | boolean | true | false | 一个标志,用于启用模仿HTML字幕元素默认行为的连续模式。如果循环为false,则不生效 | yes |
+
+## 兼容性
+
+本文档内容基于以下版本验证通过:
+
+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;
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+MIT Lisence
diff --git a/zh-cn/react-native-popover-view.md b/zh-cn/react-native-popover-view.md
new file mode 100644
index 0000000000000000000000000000000000000000..09a7a5c101a47534def7bbd480a2b9664634535b
--- /dev/null
+++ b/zh-cn/react-native-popover-view.md
@@ -0,0 +1,186 @@
+> 模板版本:v0.1.3
+
+
+
@react-native-oh-tpl/react-native-popover-view
+
+
+
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-popover-view)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-popover-view> Releases](https://github.com/react-native-oh-library/react-native-popover-view/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### npm
+
+```bash
+npm install @react-native-oh-tpl/react-native-popover-view@file:#
+```
+
+#### yarn
+
+```bash
+yarn add @react-native-oh-tpl/react-native-popover-view@file:#
+```
+
+
+
+快速使用:
+
+```typescript
+import React, { useState } from 'react';
+import {View, TouchableOpacity, Text, Button, Easing } from 'react-native';
+import Popover, {PopoverMode, PopoverPlacement, Rect } from 'react-native-popover-view';
+
+const PopoverDemo = () => {
+ const [showPopoverA, setShowPopoverA] = useState(false);
+ const [showPopoverB, setShowPopoverB] = useState(false);
+ const [showPopoverC, setShowPopoverC] = useState(false);
+ const [onOpenStart, setOnOpenStart] = useState(111);
+ const [onOpenComplete, setOnOpenComplete] = useState(111);
+ const [onCloseStart, setOnCloseStart] = useState(111);
+ const [onCloseComplete, setOnCloseComplete] = useState(111);
+ const [offsetValue, setOffsetValue] = useState(10);
+ return (
+
+
+ test:from、isVisible
+ setShowPopoverA(true)}
+ color= '#841584'
+ />
+
+ {setShowPopoverA(false)}}
+ >
+ This is the contents of the popoverA
+
+
+ test:mode、offset、placement、popoverShift、popoverStyle、backgroundStyle、arrowSize、arrowShift、animationConfig
+ setShowPopoverB(true)}
+ title = 'testB'
+ color = '#cc15cc'
+ />
+
+ {setShowPopoverB(false)}}
+ >
+ This is the contents of the popoverB
+
+
+
+ test:displayArea、displayAreaInsets、onOpenStart、onOpenComplete、onRequestClose、onCloseStart、onCloseComplete、onPositionChange、debug
+ setShowPopoverC(true)}
+ title = 'testC'
+ color = '#87cc94'
+ />
+
+ {setOnOpenStart(222)}}
+ onOpenComplete= {() => {setOnOpenComplete(222)}}
+ onRequestClose= {() => {setShowPopoverC(false)}}
+ onCloseStart= {() => {setOnCloseStart(222)}}
+ onCloseComplete= {() => {setOnCloseComplete(222)}}
+ onPositionChange= {() => {setOnCloseStart(222)}}
+ >
+ This is the contents of the popoverC
+
+ onOpenStart {onOpenStart}
+ onOpenComplete {onOpenComplete}
+ onCloseStart {onCloseStart}
+ onCloseComplete {onCloseComplete}
+ onPositionChange {offsetValue}
+ setOffsetValue(offsetValue === 10 ? 20 : 10)}
+ title = 'change position'
+ color = '#876664'
+ />
+
+ );
+}
+
+export default PopoverDemo;
+```
+
+## 约束与限制
+
+#### 兼容性
+
+在下述版本验证通过:
+
+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 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support | remark |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- | -------------- |
+| from | Popover source. See From section below. | multiple | no | All | yes |
+| isVisible | Show/Hide the popover. Required if from is not a Touchable or function that uses showPopover call (see examples). If supplied, takes precedence regardless of from. | bool | no | All | yes |
+| mode | How to position the popover, one of 'top', 'bottom', 'left', 'right', 'floating', or 'auto'. When 'auto' is specified, it will try to determine the best placement so that the popover is fully visible within displayArea. If an array of options is passed in, it will pick the first option that can accommodate the content. | string OR string list | no | All | yes |
+| placement | One of: 'rn-modal', 'js-modal', 'tooltip'. See Mode section below for details. | string | no | All | yes |
+| offset | The amount to shift the popover away from the source. Does not apply if the popover is centered. | number | no | All | yes |
+| popoverStyle | The style of the popover itself. You can override the borderRadius, backgroundColor, or any other style prop for a View. | object | no | All | yes |
+| popoverShift | How much to shift the popover in each direction, as a multiplier. Object of shape { x: -1 to 1, y: -1 to 1 }, where both x and y are optional. -1 shifts the popover all the way to the left/top and 1 shifts it to the right/bottom. Currently only applies when placement is floating, but this will apply to all placements in a future version. | object | no | All | yes |
+| backgroundStyle | The style of the background view. Default is a black background with 0.5 opacity. | object | no | All | yes |
+| arrowSize | The size of the arrow, as an object with width & height properties. The width of the arrow is the size of the arrow on the edge that touches the popover (base of isosceles triangle), while the height covers the distance from the popover to the source view, regardless of the placement of the popover. You can use { width: 0, height: 0 } to hide the arrow completely. | object | no | All | yes |
+| arrowShift | How much to shift the arrow to either side, as a multiplier. -1 will shift it all the way to the left (or top) corner of the source view, while 1 will shift all the way to the right (or bottom) corner. A value of 0.5 or -0.8 will shift it partly to one side. | object | no | All | yes |
+| onOpenStart | Callback to be fired when the open animation starts (before animation) | function | no | All | yes |
+| onOpenComplete | Callback to be fired when the open animation ends (after animation) | function | no | All | yes |
+| onRequestClose | Callback to be fired when the user taps outside the popover (on the background) or taps the system back button on Android | function | no | All | yes |
+| onCloseStart | Callback to be fired when the popover starts closing (before animation) | function | no | All | yes |
+| onCloseComplete | Callback to be fired when the popover is finished closing (after animation) | function | no | All | yes |
+| onPositionChange | Callback to be fired when the popover position finishes moving position (after animation) | function | no | All | yes |
+| animationConfig | An object containing any configuration options that can be passed to Animated.timing (e.g. { duration: 600, easing: Easing.inOut(Easing.quad) }). The configuration options you pass will override the defaults for all animations. | object | no | All | yes |
+| displayArea | Area where the popover is allowed to be displayed. By default, this will be automatically calculated to be the size of the display, or the size of the parent component if mode is not 'rn-modal'. | rect | no | All | yes |
+| displayAreaInsets | Insets to apply to the display area. The Popover will not be allowed to go beyond the display area minus the insets. | object | no | All | yes |
+| statusBarTranslucent | For 'rn-modal' mode on Android only. Determines whether the background should go under the status bar. Passed through to RN Modal component, see their docs as well. | bool | no | Android | no | 原库仅支持安卓 |
+| verticalOffset | The amount to vertically shift the popover on the screen, for use in correcting an occasional issue on Android. In certain Android configurations, you may need to apply a verticalOffset of -StatusBar.currentHeight for the popover to originate from the correct place. For shifting the popover in other situations, the offset prop should be used. | number | no | Android | no | 原库仅支持安卓 |
+| debug | Set this to true to turn on debug logging to the console. This is useful for figuring out why a Popover isn't showing. | bool | no | All | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-popover-view/blob/sig/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-popup-menu.md b/zh-cn/react-native-popup-menu.md
new file mode 100644
index 0000000000000000000000000000000000000000..b32abb408a4429c6af33ac370096285633cfd63f
--- /dev/null
+++ b/zh-cn/react-native-popup-menu.md
@@ -0,0 +1,149 @@
+> 模板版本:v0.1.3
+
+
+
react-native-popup-menu
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/instea/react-native-popup-menu)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install react-native-popup-menu@0.16.1 --save
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-popup-menu@0.16.1
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```js
+// your entry point
+import { MenuProvider } from "react-native-popup-menu";
+
+export const App = () => (
+
+
+
+);
+
+// somewhere in your app
+import {
+ Menu,
+ MenuOptions,
+ MenuOption,
+ MenuTrigger,
+} from "react-native-popup-menu";
+
+export const YourComponent = () => (
+
+ Hello world!
+
+
+
+ alert(`Save`)} text="Save" />
+ alert(`Delete`)}>
+ Delete
+
+ alert(`Not called`)}
+ disabled={true}
+ text="Disabled"
+ />
+
+
+
+);
+```
+
+## 兼容性
+
+在以下版本验证通过
+
+- RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+## 属性
+
+详情见[react-native-popup-menu](https://github.com/instea/react-native-popup-menu/blob/master/doc/api.md)
+
+## 组件
+
+#### MenuProvider
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- |
+| style | Style of wrapping View component. | Style | No | IOS/Android | Yes |
+| customStyles | Object defining wrapper, touchable and text styles | Object | No | IOS/Android | Yes |
+| backHandler | Whether to close the menu when the back button is pressed or custom back button handler if a function is passed (RN >= 0.44 is required) | boolean/Function | No | IOS/Android | Yes |
+| skipInstanceCheck | Normally your application should have only one menu provider (with exception as discussed above). If you really need more instances, set skipInstanceCheck to true to disable the check (and following warning message) | boolean | No | IOS/Android | Yes |
+
+#### Menu
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------- | --------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| name | Unique name of menu | String | No | IOS/Android | Yes |
+| opened | Declaratively states if menu is opened. When this prop is provided, menu is controlled and imperative API won't work. | Boolean | No | IOS/Android | Yes |
+| renderer | Defines position, animation and basic menu styles. See renderers section for more details | Function | No | IOS/Android | Yes |
+| rendererProps | Additional props which will be passed to the renderer | Object | No | IOS/Android | Yes |
+| onSelect | Triggered when menu option is selected. When event handler returns false, the popup menu remains open | Function | No | IOS/Android | Yes |
+| onOpen | Triggered when menu is opened | Function | No | IOS/Android | Yes |
+| onClose | Triggered when menu is closed | Function | No | IOS/Android | Yes |
+| onBackdropPress | Triggered when user press backdrop (outside of the opened menu) | Function | No | IOS/Android | Yes |
+
+#### MenuTrigger
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------- | ------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| disabled | Indicates if trigger can be pressed | Boolean | No | IOS/Android | Yes |
+| children | React elements to render as menu trigger. Exclusive with text property | Elements | No | IOS/Android | Yes |
+| text | Text to be rendered. When this prop is provided, trigger's children won't be rendered | String | No | IOS/Android | Yes |
+| customStyles | Object defining wrapper, touchable and text styles | Object | No | IOS/Android | Yes |
+| triggerOnLongPress | If true, menu will trigger onLongPress instead of onPress | Boolean | No | IOS/Android | Yes |
+| testID | Used for e2e testing to get Touchable element | String | No | IOS/Android | Yes |
+| onPress | Triggered when trigger is pressed (or longpressed depending on triggerOnLongPress) | Function | No | IOS/Android | Yes |
+| onAlternativeAction | Triggered when trigger is longpressed (or pressed depending on triggerOnLongPress) | Function | No | IOS/Android | Yes |
+
+#### MenuOptions
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| optionsContainerStyle | Custom styles for options container. Note: this option is deprecated, use customStyles option instead | Style | No | IOS/Android | Yes |
+| renderOptionsContainer | Custom render function for . It takes options component as argument and returns component. E.g.: options => {options} (Deprecated) | Function | No | IOS/Android | Yes |
+| customStyles | Object defining wrapper, touchable and text styles | Object | No | IOS/Android | Yes |
+
+#### MenuOption
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| value | Value of option | Any | No | IOS/Android | Yes |
+| children | React elements to render as menu option. Exclusive with text property | Elements | No | IOS/Android | Yes |
+| text | Text to be rendered. When this prop is provided, option's children won't be rendered | String | No | IOS/Android | Yes |
+| disabled | Indicates if option can be pressed | Boolean | No | IOS/Android | Yes |
+| disableTouchable | Disables Touchable wrapper (no on press effect and no onSelect execution) Note: Alternatively you don't have to use MenuOption at all if you want render something "non-selectable" in the menu (e.g. divider) | Boolean | No | IOS/Android | Yes |
+| customStyles | Object defining wrapper, touchable and text styles | Object | No | IOS/Android | Yes |
+| testID | Used for e2e testing to get Touchable element. If disableTouchable=true, it is not available | String | No | IOS/Android | Yes |
+| onSelect | Triggered when option is selected. When event handler returns false, the popup menu remains open. Note: If this event handler is defined, it suppress onSelect handler of | Function | No | IOS/Android | Yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/instea/react-native-popup-menu/blob/master/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-pull.md b/zh-cn/react-native-pull.md
new file mode 100644
index 0000000000000000000000000000000000000000..f8df604bc123c6333462a79b3d4432539b56d07d
--- /dev/null
+++ b/zh-cn/react-native-pull.md
@@ -0,0 +1,368 @@
+> 模板版本:v0.1.3
+
+
+
react-native-pull
+
+
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-pull)
+
+## 简介
+
+react-native-pull包含两个(`PullView` & `PullList`)可以实现`下拉刷新`的react native组件,可支持android & ios,简单易用!
+
+纯js代码,基于`ScrollView` & `FlatList`封装. 比scrollview & FlatList更强大,有三个下拉状态: **pulling**, **pullok**, **pullrelease**. `PullView`可以让你使用refreshControl或提供的相关属性实现类似于scrollview的pull-to-refresh. `PullList`可以让你使用`FlatList`的所有属性。你也可以使用`topIndicatorRender `和`onPushing`方法实现带有动画效果的自定义的topIndicator头部。
+
+## 安装与使用
+
+请到三方库的地址查看配套的版本信息:[@react-native-oh-tpl/react-native-pull/releases](https://github.com/react-native-oh-library/react-native-pull/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-pull@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-pull@file:#
+```
+
+
+
+下面的demo代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+**PullViewDemo**
+
+
+
+> 代码示例
+
+```js
+import React, { Component, useState } from 'react';
+import {
+StyleSheet,
+Text,
+View,
+ActivityIndicator,
+Dimensions,
+} from 'react-native';
+
+import {PullView} from 'react-native-pull';
+
+const PullViewDemo = () => {
+
+const [count, setCount] = useState(0);
+let testObj = {
+ pulling:null,
+ pullok:null,
+ pullrelease:null,
+ pushing:null,
+ refresh:null,
+ isPullEnd:null
+};
+const [data, setData] = useState(testObj);
+const onPulling = () => {
+ testObj.pulling='pulling--------->'
+ setData(testObj)
+};
+const onPullOk = () => {
+ testObj.pullok='pullok--------->'
+ setData(testObj)
+};
+const onPullRelease = (resolve) => {
+ //do something
+ testObj.pullrelease='pullrelease--------->'
+ setData(testObj)
+ setTimeout(() => {
+ resolve();
+ }, 3000);
+ };
+ const onPushing = (gesturePosition) => {
+ testObj.pushing= 'x:' + gesturePosition.x + '------' + 'y:' + gesturePosition.y
+ setData(testObj)
+ };
+ const topIndicatorRender = (pulling, pullok, pullrelease) => {
+ if (pulling) {
+ setCount('下拉刷新pulling...')
+ } else if (pullok) {
+ setCount('松开刷新pullok......')
+ } else if (pullrelease) {
+ setCount('玩命刷新中pullrelease......')
+ }
+ return (
+
+
+ {pulling ? {count} : null}
+ {pullok ? {count} : null}
+ {pullrelease ? {count} : null}
+
+ );
+ };
+
+ return (
+
+
+
+ 1***************
+ onPulling:{testObj.pulling}
+ 3
+ onPullOk:{testObj.pullok}
+ 5
+ onPullRelease:{testObj.pullrelease}
+ 7
+ onPushing:{testObj.pushing}
+ 9
+
+
+
+ );
+ > };
+export default PullViewDemo;
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#F5FCFF',
+ },
+});
+```
+
+**PullListDemo**
+
+
+
+> 代码示例
+
+```jsx
+import React, { Component, useState } from 'react';
+import {
+ StyleSheet,
+ Text,
+ View,
+ ActivityIndicator,
+ Dimensions,
+} from 'react-native';
+import {PullList} from 'react-native-pull';
+
+const PullListDemo = () => {
+ let testObj = {
+ pulling:null,
+ pullok:null,
+ pullrelease:null,
+ pushing:null,
+ refresh:null,
+ isPullEnd:null
+ };
+
+ const [count, setCount] = useState(0);
+ const [data, setData] = useState(testObj);
+ const [stateList, setStateList] = useState([
+ {
+ id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb2cba',
+ title: 'First Item1',
+ },
+ {
+ id: '3ac68afc-c605-48d3-a4f8-fbd91a397f63',
+ title: 'Second Item2',
+ },
+ {
+ id: '58694a0f-3da1-471f-bd96-145573e29d72',
+ title: 'Third Item3',
+ },
+ {
+ id: 'bd7acbea-c1b1-26c2-aed5-3ad53abb2cba',
+ title: 'First Item4',
+ },
+ {
+ id: '3ac68afc-c605-4843-a4f8-fbd91a397f63',
+ title: 'Second Item5',
+ },
+ {
+ id: '58694a0f-3da1-451f-bd96-145573e29d72',
+ title: 'Third Item6',
+ },
+ ]);
+
+ const onPulling = () => {
+ testObj.pulling='pulling--------->'
+ setData(testObj)
+ };
+
+ const onPullOk = () => {
+ testObj.pullok='pullok--------->'
+ setData(testObj)
+ };
+
+ const onPullRelease = (resolve) => {
+ //do something
+ testObj.pullrelease='pullrelease--------->'
+ setData(testObj)
+ setTimeout(() => {
+ resolve();
+ }, 3000);
+ };
+
+
+ const onPushing = (gesturePosition) => {
+ testObj.pushing= 'x:' + gesturePosition.x + '------' + 'y:' + gesturePosition.y
+ setData(testObj)
+ };
+
+ const topIndicatorRender = (pulling, pullok, pullrelease) => {
+ if (pulling) {
+ setCount('下拉刷新pulling...')
+ } else if (pullok) {
+ setCount('松开刷新pullok......')
+ } else if (pullrelease) {
+ setCount('玩命刷新中pullrelease......')
+ }
+
+ return (
+
+
+ {pulling ? {count} : null}
+ {pullok ? {count} : null}
+ {pullrelease ? {count} : null}
+
+ );
+};
+
+
+ const renderHeader = () => {
+ return (
+
+ This is header
+
+ );
+ }
+
+ const renderRow = ({item}) => {
+ console.log('renderRow', item.title)
+ return (
+
+ {item.title}
+
+ );
+ }
+
+ const renderFooter = () => {
+ return (
+
+
+
+ );
+ }
+
+ const loadMore = () => {
+ const list = [ {
+ id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+ title: 'First Item',
+ }]
+ for(var i = 0; i < 5; i++) {
+ list.push({
+ id: (i + 1) + '',
+ title: `this is ${i}`,
+ })
+ }
+ setTimeout(() => {
+ setStateList([...stateList,...list]);
+ }, 1000);
+ }
+ return (
+
+ item.id}
+ />
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#F5FCFF',
+ },
+});
+
+export default PullListDemo;
+
+```
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的发布地址查看版本信息:[@react-native-oh-tpl/react-native-pull/releases](https://github.com/react-native-oh-library/react-native-pull/releases)
+
+## 属性配置项
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+**`PullView` & `PullList` 下拉效果属性**
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
+| `style` | 设置组件样式,比如可以设置width/height/backgroudColor等 | Style | no | android,ios | yes |
+| `onPulling` | 处于`pulling`状态时执行的方法 | function | no | android,ios | yes |
+| `onPullOk` | 处于`pullok`状态时执行的方法 | function | no | android,ios | yes |
+| `onPullRelease` | 处于`pullrelease`状态时执行的方法,接受一个参数:`resolve`,最后执行完操作后应该调用`resolve()`。 | function | no | android,ios | yes |
+| `onPushing` | 当从下往上推时执行的方法,接受一个参数:`gesturePosition`。gesturePosition是json格式{x, y}对象,当从上往下拉时gesturePosition.y > 0,当从下往上推时gesturePosition.y < 0。 | function | no | android,ios | yes |
+| `topIndicatorRender` | 顶部刷新指示组件的渲染方法, 接受4个参数: `ispulling`, `ispullok`, `ispullrelease`,`gesturePosition`,你可以使用`gesturePosition`定义动画头部。 | function | no | android,ios | yes |
+| `topIndicatorHeight` | 顶部刷新指示组件的高度, 若定义了topIndicatorRender则同时需要此属性 | number | no | android,ios | yes |
+| `isPullEnd` | 是否已经下拉结束,若为true则隐藏顶部刷新指示组件,非必须 | boolean | no | android,ios | yes |
+| `onRefresh` | 开始刷新时调用的方法 | function | no | android,ios | yes |
+| `refreshing` | 指示是否正在刷新 | function | no | android,ios | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-pull) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-reanimated-table.md b/zh-cn/react-native-reanimated-table.md
new file mode 100644
index 0000000000000000000000000000000000000000..340a1007cd4d720a821970c2815ebb14b4ad3dfb
--- /dev/null
+++ b/zh-cn/react-native-reanimated-table.md
@@ -0,0 +1,123 @@
+模板版本:v0.1.3
+
+
+
react-native-reanimated-table
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/dohooo/react-native-reanimated-table)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### npm
+
+```bash
+npm install react-native-reanimated-table@^0.0.2
+```
+
+#### yarn
+
+```bash
+yarn add react-native-reanimated-table@^0.0.2
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { Component } from "react";
+import { StyleSheet, View } from "react-native";
+import { Table, Row, Rows } from "react-native-reanimated-table";
+
+type State = {
+ tableHead: string[];
+ tableData: Array;
+};
+
+export default class ExampleOne extends Component<{}, State> {
+ constructor(props: {} | Readonly<{}>) {
+ super(props);
+ this.initData();
+ }
+
+ initData() {
+ this.state = {
+ tableHead: ["Head", "Head2", "Head3", "Head4"],
+ tableData: [
+ ["1", "2", "3", "4"],
+ ["a", "b", "c", "d"],
+ ["1", "2", "3", "456\n789"],
+ ["a", "b", "c", "d"],
+ ],
+ };
+ }
+
+ render() {
+ const state = this.state;
+ return (
+
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: "#fff" },
+ head: { height: 40, backgroundColor: "#f1f8ff" },
+ text: { margin: 6 },
+});
+```
+
+## 兼容性
+
+本文档内容基于以下版本验证通过:
+
+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-reanimated-table](https://github.com/dohooo/react-native-reanimated-table)
+
+### Properties for all react-native-reanimated-table components:
+
+| Name | Description | **Type** | Platform | Default | HarmonyOS Support |
+| ----------- | ---------------------------------- | -------- | -------- | ------------------------------------- | ----------------- |
+| data | Table data. | Array | All | null | Yes |
+| style | Container style. | Style | All | null | Yes |
+| borderStyle | Table border line width and color. | Object | All | { borderWidth: 0, borderColor: #000 } | Yes |
+| textStyle | Cell font style. | Style | All | null | Yes |
+| flexArr | Flex value per column. | Array | All | [] | Yes |
+| widthArr | Width per column. | Array | All | [] | Yes |
+| heightArr | Height per line. | Array | All | [] | Yes |
+| ...props | more props | any | All | | Yes |
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/oblador/react-native-progress/blob/master/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-scrollable-tab-view.md b/zh-cn/react-native-scrollable-tab-view.md
new file mode 100644
index 0000000000000000000000000000000000000000..757ce5ffd38ce9a39fc2613a50dbaea70b58beee
--- /dev/null
+++ b/zh-cn/react-native-scrollable-tab-view.md
@@ -0,0 +1,102 @@
+> 模板版本:v0.1.3
+
+
+
react-native-scrollable-tab-view
+
+
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-scrollable-tab-view)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-scrollable-tab-view> Releases](https://github.com/react-native-oh-library/react-native-scrollable-tab-view/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-scrollable-tab-view@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-scrollable-tab-view@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```js
+import React from "react";
+import { Text, View } from "react-native";
+
+import ScrollableTabView from "react-native-scrollable-tab-view";
+
+export default () => {
+ return (
+
+
+ My
+ favorite
+ project
+ favorite
+ project
+
+
+ );
+};
+```
+
+## 兼容性
+
+本文档内容基于以下版本验证通过:
+
+1. RNOH:0.72.12; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.313; ROM:2.0.0.59;
+
+## 属性
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------- | ------------ | ----------------- |
+| renderTabBar | 用于渲染TabBar。添加该属性,需要在引入组件之时加上它的子组件。系统提供两种方式,DefaultTabBar和ScrollableTabBar。DefaultTabBar表示Tab.item会平分水平方向上的空间,而ScrollableTabBar表示所有的tabBar.item的长度将会超过屏幕宽度,但是当滚动屏幕之时可以显示出来。当然也可以自定义它的模式。 | Function | 否 | ios,android | yes |
+| tabBarPosition | 表示TabBar的位置。一共有四个取值:top(放在界面上方)、bottom(放在界面底部)、overlayTop(有悬浮效果在上方)、overlayBottom(有悬浮效果在下方) | String | 否 | ios,android | yes |
+| onChangeTab | 切换界面的时候会调用该方法,该属性中包含一个参数,它是一个object对象,这个对象有两个参数,i表示被选中的下标,ref表示被选中的对象。 | Function | 否 | ios,android | yes |
+| onScroll | 视图滑动时调用,该属性会传递一个Float类型的数字,范围是[0,tab的数量-1] | Function | 否 | ios,android | yes |
+| locked | 手指是否能拖动,默认为false(可拖动),如为true则表示只能通过点击tab来切换视图。 | Bool | 否 | ios,android | yes |
+| initialPage | 初始化时被选中的下标,默认为0 | Integer | 否 | ios,android | yes |
+| page | 设置选中指定的tab(已废弃,详情请看 [#126](https://github.com/ptomasroos/react-native-scrollable-tab-view/issues/126)) | Integer | 否 | ios,android | no |
+| children | 每个顶级子组件都应该有一个tabLabel属性,选项卡栏组件可以使用它来呈现标签。默认是字符串,但也可以自定义内容。 | ReactComponents | 否 | ios,android | yes |
+| tabBarUnderlineStyle | 设置选项卡栏下划线的样式。注意,该属性只是在系统提供的ScrollableTabBarTab状态下才有效果。 | View.propTypes.style | 否 | ios,android | yes |
+| tabBarBackgroundColor | 设置选项卡栏背景的颜色,默认为white。 | String | 否 | ios,android | yes |
+| tabBarActiveTextColor | 设置选中的tabBar的文字颜色,默认navy。 | String | 否 | ios,android | yes |
+| tabBarInactiveTextColor | 设置未选中的tabBar的文字颜色,默认black。 | String | 否 | android,ios | yes |
+| tabBarTextStyle | 选项卡栏文本的其他样式。例如:{fontFamily: 'Roboto', fontSize: 15} | Object | 否 | android,ios | yes |
+| style | view所拥有的属性 | View.propTypes.style | 否 | android,ios | yes |
+| contentProps | 应用于ScrollView/ViewPagerAndroid的属性。请注意,重写库设置的默认值可能会破坏功能; | Object | 否 | android,ios | yes |
+| scrollWithoutAnimation | 设置点击Tab时,视图切换是否有动画,默认为false(即:有动画效果)。 | Bool | 否 | android,ios | yes |
+| prerenderingSiblingsNumber | 预渲染附近的同级,Infinity===渲染所有同级,默认为0===渲染当前页面。 | Integer | 否 | android,ios | yes |
+
+## 遗留问题
+
+- [x] `原库已知问题RN组件ScrollView里面的scrollTo()报undefined(已修复)`[#I95OVM](https://gitee.com/react-native-oh-library/usage-docs/issues/I95OVM)
+
+## 其他
+
+## 开源协议
diff --git a/zh-cn/react-native-stickyheader.md b/zh-cn/react-native-stickyheader.md
new file mode 100644
index 0000000000000000000000000000000000000000..d06cb6ad91cf1673ab60de922892958a836132a4
--- /dev/null
+++ b/zh-cn/react-native-stickyheader.md
@@ -0,0 +1,143 @@
+> 模板版本:v0.1.3
+
+
+
react-native-stickyheader
+
+
+
+
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-stickyheader/tree/sig)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-stickyheader> Releases](https://github.com/react-native-oh-library/react-native-stickyheader/releases),并下载适用版本的 tgz 包。
+
+进入到工程目录并输入以下命令:
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-stickyheader@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-stickyheader@file:#
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { StyleSheet, Text, View, FlatList, Animated } from "react-native";
+import StickyHeader from "react-native-stickyheader";
+
+function App() {
+ const scrollY = useRef(new Animated.Value(0));
+ const [data, setData] = useState([]);
+
+ useEffect(() => {
+ let array = [];
+ for (let index = 0; index < 100; index++) {
+ array.push(index);
+ }
+ setData(array);
+ }, []);
+
+ const renderItem = useCallback((info) => {
+ return (
+
+ {info.item}
+
+ );
+ }, []);
+
+ const keyExtractor = useCallback((item, index) => {
+ return index + "";
+ }, []);
+
+ return (
+
+
+
+ 文字
+ 文字
+ 文字
+ 文字
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: "#ffffff",
+ justifyContent: "center",
+ },
+});
+
+export default App;
+```
+
+## 约束与限制
+
+#### 兼容性
+
+在下述版本验证通过:
+
+RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.59;
+
+#### 属性
+
+### 此组件有以下属性:
+
+| Property | Type | Required | Description | Platform | HarmonyOS Support |
+| ------------- | ------ | -------- | ----------------- | ---------------- | ---------------------- |
+| StickyHeaderY | number | NO | 滑动到多少悬浮 | Android IOS | YES |
+| StickyScrollY | any | Yes | 动画的ScrollY回调 | Android IOS | YES |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-stickyheader/blob/sig/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-swipe-list-view.md b/zh-cn/react-native-swipe-list-view.md
new file mode 100644
index 0000000000000000000000000000000000000000..6f824be3c23201e6b765a370433eefda9ef12d24
--- /dev/null
+++ b/zh-cn/react-native-swipe-list-view.md
@@ -0,0 +1,295 @@
+模板版本:v0.1.3
+
+
+
react-native-swipe-list-view
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/rnc-archive/react-native-drawer-layout-polyfill)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install --save react-native-swipe-list-view@3.2.9
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-swipe-list-view@3.2.9
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+```tsx
+import { SwipeListView } from 'react-native-swipe-list-view';
+
+//... note: your data array objects MUST contain a key property
+// or you must pass a keyExtractor to the SwipeListView to ensure proper functionality
+// see: https://reactnative.dev/docs/flatlist#keyextractor
+
+ this.state.listViewData = Array(20)
+ .fill("")
+ .map((_, i) => ({ key: `${i}`, text: `item #${i}` }));
+
+//...
+render() {
+ return (
+ (
+
+ I am {data.item.text} in a SwipeListView
+
+ )}
+ renderHiddenItem={ (data, rowMap) => (
+
+ Left
+ Right
+
+ )}
+ leftOpenValue={75}
+ rightOpenValue={-75}
+ />
+ )
+}
+```
+
+完整使用案例如下:
+
+```jsx
+import React, { useState } from "react";
+import {
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ TouchableHighlight,
+ View,
+} from "react-native";
+
+import { SwipeListView } from "react-native-swipe-list-view";
+
+export default function Basic() {
+ const [listData, setListData] = useState(
+ Array(20)
+ .fill("")
+ .map((_, i) => ({ key: `${i}`, text: `item #${i}` })),
+ );
+
+ const closeRow = (rowMap, rowKey) => {
+ if (rowMap[rowKey]) {
+ rowMap[rowKey].closeRow();
+ }
+ };
+
+ const deleteRow = (rowMap, rowKey) => {
+ closeRow(rowMap, rowKey);
+ const newData = [...listData];
+ const prevIndex = listData.findIndex((item) => item.key === rowKey);
+ newData.splice(prevIndex, 1);
+ setListData(newData);
+ };
+
+ const onRowDidOpen = (rowKey) => {
+ console.log("This row opened", rowKey);
+ };
+
+ const renderItem = (data) => (
+ console.log("You touched me")}
+ style={styles.rowFront}
+ underlayColor={"#AAA"}
+ >
+
+ I am {data.item.text} in a SwipeListView
+
+
+ );
+
+ const renderHiddenItem = (data, rowMap) => (
+
+ Left
+ closeRow(rowMap, data.item.key)}
+ >
+ Close
+
+ deleteRow(rowMap, data.item.key)}
+ >
+ Delete
+
+
+ );
+
+ return (
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ backgroundColor: "white",
+ flex: 1,
+ },
+ backTextWhite: {
+ color: "#FFF",
+ },
+ rowFront: {
+ alignItems: "center",
+ backgroundColor: "#CCC",
+ borderBottomColor: "black",
+ borderBottomWidth: 1,
+ justifyContent: "center",
+ height: 50,
+ },
+ rowBack: {
+ alignItems: "center",
+ backgroundColor: "#DDD",
+ flex: 1,
+ flexDirection: "row",
+ justifyContent: "space-between",
+ paddingLeft: 15,
+ },
+ backRightBtn: {
+ alignItems: "center",
+ bottom: 0,
+ justifyContent: "center",
+ position: "absolute",
+ top: 0,
+ width: 75,
+ },
+ backRightBtnLeft: {
+ backgroundColor: "blue",
+ right: 75,
+ },
+ backRightBtnRight: {
+ backgroundColor: "red",
+ right: 0,
+ },
+});
+```
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+## 属性
+
+详情见[react-native-swipe-list-view](https://reactnative.dev/docs/drawerlayoutandroid)
+
+# `SwipeListView`
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | ------------- | ----------------- |
+| data | List of objects to be passed into the `renderItem` and `renderHiddenItem` functions. Each item must include a unique `key` property or `keyExtractor` must be implemented to ensure full functionality. | array | YES | Android IOS | YES |
+| useSectionList | Render list using React Native's `SectionList` | bool | NO | Android IOS | YES |
+| renderItem | How to render a row in a FlatList. Should return a valid React Element. | func | YES | Android IOS | YES |
+| renderHiddenItem | How to render a hidden row in a FlatList (renders behind the row). Should return a valid React Element. This is required unless `renderItem` returns a `` (see [Per Row Behavior](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/per-row-behavior.md)). | func | YES | Android IOS | YES |
+| leftOpenValue | TranslateX value for opening the row to the left (positive number) | number | NO | Android IOS | YES |
+| `rightOpenValue` | TranslateX value for opening the row to the right (negative number) | `number` | NO | Android IOS | YES |
+| `leftActivationValue` | TranslateX value for firing onLeftActionStatusChange (positive number) | `number` | NO | Android | NO |
+| `rightActivationValue` | TranslateX value for firing onRightActionStatusChange (negative number) | `number` | NO | Android IOS | YES |
+| `rightActionValue` | TranslateX value for right action to which the row will be shifted after gesture release | `number` | NO | Android IOS | YES |
+| `initialLeftActionState` | Initial value for left action state (default is false) | `bool` | NO | Android IOS | YES |
+| `initialRightActionState` | Initial value for right action state (default is false) | `bool` | NO | Android IOS | YES |
+| `closeOnRowPress` | Should open rows be closed when a row is pressed | `bool` | NO | `Android IOS` | YES |
+| `closeOnRowOpen` | Should open rows be closed when another row is opened | `bool` | NO | Android IOS | YES |
+| `closeOnRowBeginSwipe` | Should open rows be closed when a row begins to swipe open | `bool` | NO | `Android IOS` | YES |
+| `closeOnScroll` | Should open rows be closed when the listView begins scrolling | `bool` | NO | Android IOS | YES |
+| `disableLeftSwipe` | Disable ability to swipe the row left | `bool` | NO | Android IOS | YES |
+| `disableRightSwipe` | Disable ability to swipe the row right | `bool` | NO | Android IOS | YES |
+| `stopLeftSwipe` | TranslateX value for stop the row to the left (positive number). This number is the stop value corresponding to the `leftOpenValue` (while the row is swiping in the right direction) | `number` | NO | Android IOS | YES |
+| `stopRightSwipe` | TranslateX value for stop the row to the right (negative number). This number is the stop value corresponding to the `rightOpenValue` (while the row is swiping in the left direction) | `number` | NO | Android IOS | YES |
+| `directionalDistanceChangeThreshold` | Change the sensitivity of the row | `number` | NO | Android IOS | YES |
+| `swipeToOpenPercent` | What % of the left/right openValue does the user need to swipe past to trigger the row opening. | `number` | NO | Android IOS | YES |
+| `swipeToClosePercent` | What % of the left/right openValue does the user need to swipe past to trigger the row closing. | `number` | NO | Android IOS | YES |
+| `swipeToOpenVelocityContribution` | Describes how much the ending velocity of the gesture affects whether the swipe will result in the item being closed or open. A velocity factor of 0 (the default) means that the velocity will have no bearing on whether the swipe settles on a closed or open position and it'll just take into consideration the swipeToOpenPercent. Ideal values for this prop tend to be between 5 and 15. | `number` | NO | Android IOS | YES |
+
+# `SwipeRow `
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| :----------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------: | :------: | :-----------: | ----------------- |
+| `closeOnRowPress` | Should the row be closed when it is tapped | `bool` | NO | Android IOS | YES |
+| `directionalDistanceChangeThreshold` | Change the sensitivity of the row | `number` | NO | Android IOS | YES |
+| `friction` | Friction for the open / close animation. Controls "bounciness"/overshoot. https://facebook.github.io/react-native/docs/animated#spring | `number` | NO | Android IOS | YES |
+| `tension` | Tension for the open / close animation. Controls speed. https://facebook.github.io/react-native/docs/animated#spring | `number` | NO | `Android IOS` | YES |
+| `restSpeedThreshold` | RestSpeedThreshold for the open / close animation. Controls speed. https://facebook.github.io/react-native/docs/animated#spring | `number` | NO | `Android IOS` | YES |
+| `restDisplacementThreshold` | RestDisplacementThreshold for the open / close animation. Controls speed. https://facebook.github.io/react-native/docs/animated#spring | `number` | NO | Android IOS | YES |
+| `leftOpenValue` | TranslateX value for opening the row to the left (positive number) | `number` | YES | `Android IOS` | YES |
+| `rightOpenValue` | TranslateX value for opening the row to the right (negative number) | `number` | YES | `Android IOS` | YES |
+| `leftActivationValue` | TranslateX value for firing onLeftActionStatusChange (positive number) | `number` | NO | Android IOS | YES |
+| `rightActivationValue` | TranslateX value for firing onRightActionStatusChange (negative number) | `number` | NO | Android IOS | YES |
+| `initialLeftActionState` | Initial value for left action state (default is false) | `bool` | NO | Android IOS | YES |
+| `initialRightActionState` | Initial value for right action state (default is false) | `bool` | NO | Android IOS | YES |
+| `leftActionValue` | TranslateX value for left action to which the row will be shifted after gesture release | `number` | NO | Android IOS | YES |
+| `rightActionValue` | TranslateX value for right action to which the row will be shifted after gesture release | `number` | NO | Android IOS | YES |
+| `stopLeftSwipe` | TranslateX value for stop the row to the left (positive number). This number is the stop value corresponding to the `leftOpenValue` (while the row is swiping in the right direction) | `number` | NO | Android IOS | YES |
+| `stopRightSwipe` | TranslateX value for stop the row to the right (negative number). This number is the stop value corresponding to the `rightOpenValue` (while the row is swiping in the left direction) | `number` | NO | Android IOS | YES |
+| `onRowPress` | Called when row is pressed. | `func` | NO | Android IOS | YES |
+| `onRowOpen` | Called when row is animating open. Used by the SwipeListView to keep references to open rows. | `func` | NO | Android IOS | YES |
+| `onRowDidOpen` | Called when row has animated open | `func` | NO | Android IOS | YES |
+| `onRowClose` | Called when row is animating closed | `func` | NO | Android IOS | YES |
+| `onRowDidClose` | Called when a swipe row has animated closed | `func` | NO | Android IOS | YES |
+| `onLeftActionStatusChange` | Called once when swipe value crosses the leftActivationValue | `func` | NO | Android IOS | YES |
+| `onRightActionStatusChange` | Called once when swipe value crosses the rightActivationValue | `func` | NO | Android IOS | YES |
+| `onLeftAction` | Called when row shifted to leftActivationValue | `func` | NO | Android IOS | YES |
+| `onRightAction` | Called when row shifted to rightActivationValue | `func` | NO | Android IOS | YES |
+| `swipeToOpenPercent` | What % of the left/right openValue does the user need to swipe past to trigger the row opening. | `number` | NO | Android IOS | YES |
+| `swipeToClosePercent` | What % of the left/right openValue does the user need to swipe past to trigger the row closing. | `number` | NO | Android IOS | YES |
+| `setScrollEnabled` | Used by the SwipeListView to close rows on scroll events. You shouldn't need to use this prop explicitly. | `func` | NO | Android IOS | YES |
+| `disableLeftSwipe` | Disable ability to swipe the row left | `bool` | NO | Android IOS | YES |
+| `disableRightSwipe` | Disable ability to swipe the row right | `bool` | NO | Android IOS | YES |
+| `recalculateHiddenLayout` | Enable hidden row onLayout calculations to run always | `bool` | NO | `Android IOS` | YES |
+| `style` | Styles for the parent wrapper View of the SwipeRow | `object` | YES | Android IOS | YES |
+| `preview` | Should the row do a slide out preview to show that it is swipeable | `bool` | NO | Android IOS | YES |
+| `previewDuration` | Duration of the slide out preview animation | `number` | NO | Android IOS | YES |
+| `previewRepeat` | Should the animation repeat | `bool` | NO | Android IOS | YES |
+| `previewRepeatDelay` | Delay between each preview repeat in milliseconds | `number` | NO | Android IOS | YES |
+| `previewOpenValue` | TranslateX value for the slide out preview animation | `number` | NO | Android IOS | YES |
+| `onSwipeValueChange` | Callback invoked any time the translateX value of the row changes | `func` | NO | Android IOS | YES |
+| `swipeGestureBegan` | Called when the row is animating swipe | `func` | NO | Android IOS | YES |
+| `swipeGestureEnded` | Called when user has ended their swipe gesture | `func` | NO | Android IOS | YES |
+| `swipeToOpenVelocityContribution` | Describes how much the ending velocity of the gesture affects whether the swipe will result in the item being closed or open. A velocity factor of 0 (the default) means that the velocity will have no bearing on whether the swipe settles on a closed or open position and it'll just take into consideration the swipeToOpenPercent. Ideal values for this prop tend to be between 5 and 15. | `number` | NO | `Android IOS` | YES |
+| `shouldItemUpdate` | Callback to determine whether component should update | `func` | NO | Android IOS | YES |
+| `forceCloseToLeftThreshold` | TranslateX amount(not value!) threshold that triggers force-closing the row to the Left End (positive number) | `number` | NO | Android IOS | YES |
+| `forceCloseToRightThreshold` | TranslateX amount(not value!) threshold that triggers force-closing the row to the Right End (positive number) | `number` | NO | Android IOS | YES |
+| `onForceCloseToLeft` | Callback invoked when row is force closing to the Left End | `func` | NO | Android IOS | YES |
+| `onForceCloseToRight` | Callback invoked when row is force closing to the Right End | `func` | NO | Android IOS | YES |
+| `onForceCloseToLeftEnd` | Callback invoked when row has finished force closing to the Left End | `func` | NO | Android IOS | YES |
+| `onForceCloseToRightEnd` | Callback invoked when row has finished force closing to the Right End | `func` | NO | Android IOS | YES |
+| `useNativeDriver` | useNativeDriver: `true` for all animations | `bool` | NO | Android IOS | YES |
+| `swipeKey` | Optional key to identify a standalone row, used in the `onSwipeValueChange` callback | `string` | NO | Android IOS | YES |
+| `onPreviewEnd` | Callback that runs after row swipe preview is finished | `func` | NO | Android IOS | YES |
+
+## 遗留问题
+
+## 其他
diff --git a/zh-cn/react-native-swiper.md b/zh-cn/react-native-swiper.md
new file mode 100644
index 0000000000000000000000000000000000000000..65529e97b0b5abd6bf3b1ac1039f086c20cb2c98
--- /dev/null
+++ b/zh-cn/react-native-swiper.md
@@ -0,0 +1,227 @@
+> 模板版本:v0.1.3
+
+
+
react-native-swiper
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/leecade/react-native-swiper)
+
+## 安装与使用
+
+
+
+#### **npm**
+
+```bash
+npm i react-native-swiper@1.6.0 --save
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-swiper@1.6.0
+```
+
+
+
+快速使用:
+
+```js
+import React, { Component } from "react";
+import { AppRegistry, StyleSheet, Text, View } from "react-native";
+
+import Swiper from "react-native-swiper";
+
+const styles = StyleSheet.create({
+ wrapper: {},
+ slide1: {
+ flex: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#9DD6EB",
+ },
+ slide2: {
+ flex: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#97CAE5",
+ },
+ slide3: {
+ flex: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ backgroundColor: "#92BBD9",
+ },
+ text: {
+ color: "#fff",
+ fontSize: 30,
+ fontWeight: "bold",
+ },
+});
+
+export default class SwiperComponent extends Component {
+ render() {
+ return (
+
+
+ Hello Swiper
+
+
+ Beautiful
+
+
+ And simple
+
+
+ );
+ }
+}
+
+AppRegistry.registerComponent("myproject", () => SwiperComponent);
+```
+
+### 兼容性
+
+在下述版本验证通过:
+RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.68;
+
+### 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
+
+#### basics
+
+| Prop | Default | Type | Description | platform | HarmonyOS Support | remark |
+| :------------- | :-------------: | :------: | :---------------------------------------------------------------------------------------------------------- | -------- | ----------------- | ------ |
+| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. | All | YES | -- |
+| loop | true | `bool` | Set to `false` to disable continuous loop mode. | All | YES | -- |
+| index | 0 | `number` | Index number of initial slide. | All | YES | -- |
+| showsButtons | false | `bool` | Set to `true` make control buttons visible. | All | YES | -- |
+| autoplay | false | `bool` | Set to `true` enable auto play mode. | All | YES | -- |
+| onIndexChanged | (index) => null | `func` | Called with the new index when the user swiped | All | YES | -- |
+
+#### Custom basic style & content
+
+| Prop | Default | Type | Description | platform | HarmonyOS Support | remark |
+| :---------------- | :---------------------: | :-------: | :------------------------------------------------------------------------- | -------- | ----------------- | ------ |
+| width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. | All | YES | -- |
+| height | - | `number` | If no specify default fullscreen mode by `flex: 1`. | All | YES | -- |
+| style | {...} | `style` | See default style in source. | All | YES | -- |
+| containerStyle | {...} | `style` | See default container style in source. | All | YES | -- |
+| loadMinimal | false | `bool` | Only load current index slide , `loadMinimalSize` slides before and after. | All | YES | -- |
+| loadMinimalSize | 1 | `number` | see `loadMinimal` | All | YES | -- |
+| loadMinimalLoader | ` ` | `element` | Custom loader to display when slides aren't loaded | All | YES | -- |
+
+#### Pagination
+
+| Prop | Default | Type | Description | platform | HarmonyOS Support | remark |
+| :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------- | ------ |
+| showsPagination | true | `bool` | Set to `true` make pagination visible. | All | YES | -- |
+| paginationStyle | {...} | `style` | Custom styles will merge with the default styles. | All | YES | -- |
+| renderPagination | - | `function` | Complete control how to render pagination with three params (`index`, `total`, `context`) ref to `this.state.index` / `this.state.total` / `this`, For example: show numbers instead of dots. | All | YES | -- |
+| dot | ` ` | `element` | Allow custom the dot element. | All | YES | -- |
+| activeDot | ` ` | `element` | Allow custom the active-dot element. | All | YES | -- |
+| dotStyle | - | `object` | Allow custom the dot element. | All | YES | -- |
+| dotColor | - | `string` | Allow custom the dot element. | All | YES | -- |
+| activeDotColor | - | `string` | Allow custom the active-dot element. | All | YES | -- |
+| activeDotStyle | - | `object` | Allow custom the active-dot element. | All | YES | -- |
+
+#### Autoplay
+
+| Prop | Default | Type | Description | platform | HarmonyOS Support | remark |
+| :---------------- | :-----: | :------: | :----------------------------------------------- | -------- | ----------------- | ------ |
+| autoplay | true | `bool` | Set to `true` enable auto play mode. | All | YES | -- |
+| autoplayTimeout | 2.5 | `number` | Delay between auto play transitions (in second). | All | YES | -- |
+| autoplayDirection | true | `bool` | Cycle direction control. | All | YES | -- |
+
+#### Control buttons
+
+| Prop | Default | Type | Description | platform | HarmonyOS Support | remark |
+| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------: | :------------------------------------------ | -------- | ----------------- | ------ |
+| showsButtons | true | `bool` | Set to `true` make control buttons visible. | All | YES | -- |
+| buttonWrapperStyle | `{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}` | `style` | Custom styles. | All | YES | -- |
+| nextButton | `› ` | `element` | Allow custom the next button. | All | YES | -- |
+| prevButton | `‹ ` | `element` | Allow custom the prev button. | All | YES | -- |
+
+#### Props of Children
+
+| Prop | Default | Type | Description | platform | HarmonyOS Support | remark |
+| :---- | :----------------------------------: | :-------: | :------------------------------------------------------------- | -------- | ----------------- | ------ |
+| style | {...} | `style` | Custom styles will merge with the default styles. | All | YES | -- |
+| title | {... } | `element` | If this parameter is not specified, will not render the title. | All | YES | -- |
+
+#### Basic props of ` `
+
+| Prop | Default | Type | Description | platform | HarmonyOS Support | remark |
+| :------------------------------- | :-----: | :----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------- | ---------------------------------------------------------------------------------- |
+| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. | All | YES | -- |
+| pagingEnabled | true | `bool` | If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. | All | YES | -- |
+| showsHorizontalScrollIndicator | false | `bool` | Set to `true` if you want to show horizontal scroll bar. | All | YES | -- |
+| showsVerticalScrollIndicator | false | `bool` | Set to `true` if you want to show vertical scroll bar. | All | YES | -- |
+| bounces | false | `bool` | If `true`, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. If `false`, it disables all bouncing even if the alwaysBounce\* props are true. | All | YES | -- |
+| scrollsToTop | false | `bool` | If true, the scroll view scrolls to top when the status bar is tapped. | All | NO | 组件属性继承RNOH scrollview,当前RNOH中的scrollsToTop暂时不支持 |
+| removeClippedSubviews | true | `bool` | If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists. | All | NO | 组件属性继承RNOH scrollview,当前RNOH中的removeClippedSubviews暂时不支持 |
+| automaticallyAdjustContentInsets | false | `bool` | Set to `true` if you need adjust content insets automation. | All | NO | 组件属性继承RNOH scrollview,当前RNOH中的automaticallyAdjustContentInsets暂时不支持 |
+| scrollEnabled | true | `bool` | Enables/Disables swiping | All | YES | -- |
+
+> @see: http://facebook.github.io/react-native/docs/scrollview.html
+
+#### Supported ScrollResponder
+
+| Prop | Params | Type | Description | platform | HarmonyOS Support | remark |
+| :------------------ | :-----------------------: | :--------: | :---------------------------------------------------------- | -------- | ----------------- | ------ |
+| onScrollBeginDrag | `e` / `state` / `context` | `function` | When animation begins after letting up | All | YES | -- |
+| onMomentumScrollEnd | `e` / `state` / `context` | `function` | Makes no sense why this occurs first during bounce | All | YES | -- |
+| onTouchStartCapture | `e` / `state` / `context` | `function` | Immediately after `onMomentumScrollEnd` | All | YES | -- |
+| onTouchStart | `e` / `state` / `context` | `function` | Same, but bubble phase | All | YES | -- |
+| onTouchEnd | `e` / `state` / `context` | `function` | You could hold the touch start for a long time | All | YES | -- |
+| onResponderRelease | `e` / `state` / `context` | `function` | When lifting up - you could pause forever before \* lifting | All | YES | -- |
+
+> Note: each ScrollResponder be injected with two params: `state` and `context`, you can get `state` and `context`(ref to swiper's `this`) from params, for example:
+
+```jsx
+var swiper = React.createClass({
+ _onMomentumScrollEnd: function (e, state, context) {
+ console.log(state, context.state)
+ },
+ render: function() {
+ return (
+
+ )
+ }
+})
+```
+
+> More ScrollResponder info, see: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js
+
+### 方法
+
+#### scrollBy(index, animated)
+
+| Name | Type | default | Description | platform | HarmonyOS Support | remark |
+| :------- | :------: | :---------: | :----------- | -------- | ----------------- | ------ |
+| index | `number` | `undefined` | offset index | All | YES | -- |
+| animated | `bool` | `true` | offset index | All | YES | -- |
+
+### 遗留问题
+
+- [ ] 组件属性继承RNOH scrollview,当前RNOH中的scrollsToTop暂时不支持
+- [ ] 组件属性继承RNOH scrollview,当前RNOH中的removeClippedSubviews暂时不支持
+- [ ] 组件属性继承RNOH scrollview,当前RNOH中的automaticallyAdjustContentInsets暂时不支持
+- [ ] 组件轮播图roh版本为0.72.13暂时有不居中问题,在roh版本为0.72.19上解决
+
+### 其他
+
+### 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/leecade/react-native-swiper/blob/master/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-native-worklets-core.md b/zh-cn/react-native-worklets-core.md
new file mode 100644
index 0000000000000000000000000000000000000000..0b1c0d44ff5e4a8700e2b433abe2316801a7c1c7
--- /dev/null
+++ b/zh-cn/react-native-worklets-core.md
@@ -0,0 +1,238 @@
+> 模板版本:v0.1.3
+
+
+
react-native-worklets-core
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-worklets-core)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-worklets-core Releases](https://github.com/react-native-oh-library/react-native-worklets-core/releases),并下载适用版本的 tgz 包
+
+进入到工程目录并输入以下命令:
+
+
+
+> [!TIP] # 处替换为 tgz 包的路径
+
+#### **npm**
+
+```bash
+npm i @react-native-oh-tpl/react-native-worklets-core@file:#
+```
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-worklets-core@file:#
+```
+
+在项目根目录下的 `babel.config.js` 中添加 `babel` 插件
+
+```js
+module.exports = {
+ plugins: [
+ ["@react-native-oh-tpl/react-native-worklets-core/plugin"],
+ // ...
+ ],
+ // ...
+};
+```
+
+重置缓存重启项目
+
+```bash
+yarn start --reset-cache
+```
+
+
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink,所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法:
+
+1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法);
+2. 直接链接源码。
+
+方法一:通过 har 包引入
+
+> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`,添加以下依赖
+
+```diff
+"dependencies": {
+ "rnoh": "file:../rnoh",
++ "rnoh-worklets": "file:../../node_modules/@react-native-oh-tpl/react-native-worklets-core/harmony/worklets.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行:
+
+```shell
+cd entry
+ohpm install
+```
+
+方法二:直接链接源码
+
+> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。
+
+打开 `entry/oh-package.json5`,添加以下依赖
+
+```diff
+"dependencies": {
+ "rnoh": "file:../rnoh",
++ "rnoh-worklets": "file:../../node_modules/@react-native-oh-tpl/react-native-worklets-core/harmony/worklets"
+ }
+```
+
+打开终端,执行:
+
+```shell
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入Worklets
+
+打开 `entry/src/main/cpp/CMakeLists.txt`,添加:
+
+```diff
+# RNOH_BEGIN: add_package_subdirectories
+add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
++ add_subdirectory("${OH_MODULE_DIR}/rnoh-worklets/src/main/cpp" ./worklets)
+# RNOH_END: add_package_subdirectories
+
+# RNOH_BEGIN: link_packages
+target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
++ target_link_libraries(rnoh_app PUBLIC rnoh_worklets)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`,添加:
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "WorkletsPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 ImageEditorPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加:
+
+```diff
+...
++ import { WorkletsPackage } from "rnoh-worklets/ts";
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new WorkletsPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行:
+
+```shell
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+快速使用:
+
+> [!WARNING] 使用时 import 的库名不变。
+
+```tsx
+import { useState } from "react";
+import { Button, Text, View } from "react-native";
+import { useRunInJS, useWorklet } from "react-native-worklets-core";
+
+const App = () => {
+ // 计数器
+ const [count, setCount] = useState(0);
+ // 定义一个useRunJS方法
+ const setCountRunInJS = useRunInJS(() => {
+ setCount(Math.random());
+ }, [count]);
+ // 在worklets线程使用RunInJS方法
+ const countInWorkLet = useWorklet(
+ "default",
+ () => {
+ "worklet";
+ setCountRunInJS();
+ },
+ [setCountRunInJS],
+ );
+
+ return (
+
+
+ countInWorkLet()} />
+
+ count:{count}
+
+ );
+};
+
+export default App;
+```
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-library/react-native-worklets-core Releases](https://github.com/react-native-oh-library/react-native-worklets-core/releases)
+
+### API
+
+| NAME | Description | Required | Platform | HarmonyOS Support |
+| -------------------- | ------------------------------------------------------- | -------- | -------- | ----------------- |
+| createContext | Create a worker thread context object | YES | All | YES |
+| createRunInContextFn | Create a function to execute within a specified context | YES | All | YES |
+| createRunInJsFn | Create a function to execute in the JavaScript thread | YES | All | YES |
+| createSharedValue | Create a value shared across threads | YES | All | YES |
+| useRunInJS | Same as `createRunInJsFn` | YES | All | YES |
+| useWorklet | Same as `createRunInContextFn` | YES | All | YES |
+| useSharedValue | Same as `createSharedValue` | YES | All | YES |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-worklets-core/blob/sig/LICENSE) ,请自由地享受和参与开源。
diff --git a/zh-cn/react-use.md b/zh-cn/react-use.md
new file mode 100644
index 0000000000000000000000000000000000000000..32bd4c7e9cdc9cf47cf0ff317cf671e93fc75c9e
--- /dev/null
+++ b/zh-cn/react-use.md
@@ -0,0 +1,146 @@
+
+
react-use
+
+
+
+
+
+
+
+> [!TIP] [Github 地址](https://github.com/zenghongtu/react-use)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install react-use@17.2.4
+```
+
+#### **yarn**
+
+```bash
+yarn add react-use@17.2.4
+```
+
+
+
+## 兼容性
+
+在以下版本验证通过
+
+1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59;
+
+## 方法
+
+| title | hook-name | 描述 | 类型 | HarmonyOS Support |
+| :------------ | :---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------- |
+| Sensors | useMotion | 跟踪设备运动传感器的状态。 | Function | YES |
+| Animations | useRaf | 重新渲染每个请求上的组件AnimationFrame。 | Function | YES |
+| Animations | useInterval and useHarmonicIntervalFn | 使用setInterval在设置的间隔上重新渲染组件。 | Function | YES |
+| Animations | useSpring | 根据弹簧动力学随时间插值数字。 | Function | YES |
+| Animations | useTimeout | 超时后重新渲染组件。 | Function | YES |
+| Animations | useTimeoutFn | 超时后调用给定的函数。 | Function | YES |
+| Animations | useTween | 重新渲染组件,同时推特从0到1的数字。 | Function | YES |
+| Animations | useUpdate | 返回一个回调,该回调在调用时重新呈现组件。 | Function | YES |
+| Side-effects | useAsync useAsyncFn and useAsyncRetry | 解析异步函数。 | Function | YES |
+| Side-effects | useBeforeUnload | 当用户尝试重新加载或关闭页面时,显示浏览器警报。 | Function | YES |
+| Side-effects | useCookie | 提供了读取、更新和删除cookie的方法。 | Function | YES |
+| Side-effects | useDebounce | 取消对函数的反弹。 | Function | YES |
+| Side-effects | useError | 错误调度器。 | Function | YES |
+| Side-effects | useRafLoop | 调用RAF循环内的给定函数。 | Function | YES |
+| Side-effects | useThrottle`and`useThrottleFn | 抑制函数。 | Function | YES |
+| Lifecycles | useEffectOnce | 仅运行一次的修改后的[`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect)。 | Function | YES |
+| Lifecycles | useLifecycles | 调用`mount`和`unmount`回调。 | Function | YES |
+| Lifecycles | useMountedState and useUnmountPromise | 跟踪是否安装了组件。 | Function | YES |
+| Lifecycles | useLogger | 在组件经历生命周期时登录控制台。 | Function | YES |
+| Lifecycles | useMount | 调用`mount`回调。 | Function | YES |
+| Lifecycles | useUnmount | 调用`unmount`回调。 | Function | YES |
+| Lifecycles | useUpdateEffect | 仅在更新时运行一个`effect。` | Function | YES |
+| Lifecycles | useIsomorphicLayoutEffect | useLayoutEffect在服务器上工作。 | Function | YES |
+| Lifecycles | useDeepCompareEffect and useCustomCompareEffect | 运行一个`effect`通过深度比较其依赖项。 | Function | YES |
+| State | createMemo | 记忆挂钩工厂。 | Function | YES |
+| State | createReducerContext and createStateContext | 用于组件之间共享状态的挂钩的工厂。 | Function | YES |
+| State | useDefault | 当state为null或未定义时,返回默认值。 | Function | YES |
+| State | useGetSet | 返回状态getter get(),而不是原始状态。 | Function | YES |
+| State | useGetSetState | as if [`useGetSet`](https://github.com/streamich/react-use/blob/master/docs/useGetSet.md) and [`useSetState`](https://github.com/streamich/react-use/blob/master/docs/useSetState.md) had a baby. | Function | YES |
+| State | useLatest | 返回最新状态或道具。 | Function | YES |
+| State | usePrevious | 返回以前的状态或道具。 | Function | YES |
+| State | usePreviousDistinct | 类似于usePrevious,但有一个谓词来确定是否应该更新previous。 | Function | YES |
+| State | useObservable | 跟踪Observable的最新值。 | Function | YES |
+| State | useRafState | 创建setState方法,该方法仅在requestAnimationFrame之后更新。 | Function | YES |
+| State | useSetState | 创建setState方法,其工作方式如下:this.setState。 | Function | YES |
+| State | useStateList | 在数组上循环迭代。 | Function | YES |
+| State | useToggle | 跟踪布尔值的状态。 | Function | YES |
+| State | useCounter | 跟踪数字的状态。 | Function | YES |
+| State | useList | 跟踪数组的状态。 | Function | YES |
+| State | useMap | 跟踪对象的状态。 | Function | YES |
+| State | useSet | 跟踪集合的状态。 | Function | YES |
+| State | useQueue | 实现了简单的队列。 | Function | YES |
+| State | useStateValidator | 跟踪对象的状态。 | Function | YES |
+| State | useStateWithHistory | 存储以前的状态值,并提供通过这些值的句柄。 | Function | YES |
+| State | useMultiStateValidator | 类似于useStateValidator,但一次跟踪多个状态。 | Function | YES |
+| State | useMediatedState | 类似于常规的useState,但具有自定义功能的中介。 | Function | YES |
+| State | useFirstMountState | 检查当前渲染是否是第一个。 | Function | YES |
+| State | useRendersCount | 计数组件渲染。 | Function | YES |
+| State | createGlobalState | 跨组件共享状态。 | Function | YES |
+| State | useMethods | 使用Reducer的整洁替代方案。 | Function | YES |
+| Miscellaneous | useEnsuredForwardedRef | 安全地使用React.forwardedRef。 | Function | YES |
+
+## IOS & android 不支持方法澄清
+
+| title | hook-name | 解释 | 问题描述 | HarmonyOS Support |
+| ------------ | -------------------------------------------------------- | -------------------------------------- | -------------------------------------------------------------- | ----------------- |
+| Sensors | useBattery | 跟踪设备电池状态。 | 无报错,不支持蓄电池传感器 | NO |
+| Sensors | useGeolocation | 跟踪用户设备的地理位置状态。 | Cannot read property 'getCurrentPosition' of undefined没有属性 | NO |
+| Sensors | useHover and useHoverDirty | 跟踪某些元素的鼠标悬停状态。 | 无报错,无反应 | NO |
+| Sensors | useHash | 跟踪位置哈希值。 | Hash of undefined | NO |
+| Sensors | useIdle | 跟踪用户是否处于非活动状态。 | Property 'document' doesn't exist | NO |
+| Sensors | useIntersection | 跟踪HTML元素的交集。 | 无报错,无反应,状态不对应 | NO |
+| Sensors | useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent | 追踪按键。 | 无报错,无反应 | NO |
+| Sensors | useLocation and useSearchParam | 跟踪页面导航栏的位置状态。 | Cannot convert undefined value to object | NO |
+| Sensors | useLongPress | 跟踪某些元素的长按手势。 | 无报错,无反应 | NO |
+| Sensors | useMedia | 跟踪CSS媒体查询的状态。 | window.matchMedia is not a function (it is undefined) | NO |
+| Sensors | useMediaDevices | 跟踪连接的硬件设备的状态。 | 无报错,值为空 | NO |
+| Sensors | useMouse and useMouseHovered | 跟踪鼠标位置的状态。 | Property 'document' doesn't exist | NO |
+| Sensors | useMouseWheel | 跟踪滚动鼠标滚轮的deltaY。 | 无报错,无反应 | NO |
+| Sensors | useNetworkState | 跟踪浏览器的网络连接状态。 | 无报错,值为空 | NO |
+| Sensors | useOrientation | 跟踪设备屏幕方向的状态。 | Cannot read property 'orientation' of undefined | NO |
+| Sensors | usePageLeave | 当鼠标离开页面边界时触发。 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Sensors | useScratch | 跟踪鼠标单击和拖动状态。 | 未报错,无反应 | NO |
+| Sensors | useScroll | 跟踪HTML元素的滚动位置。 | 未报错,无反应 | NO |
+| Sensors | useScrolling | 跟踪HTML元素是否正在滚动。 | 未报错,无反应 | NO |
+| Sensors | useStartTyping | 检测用户何时开始键入。 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Sensors | useWindowScroll | 轨迹窗口滚动位置。 | 无报错,值为空 | NO |
+| Sensors | useWindowSize | 跟踪窗口尺寸。 | 无报错,值为空 | NO |
+| Sensors | useMeasure and useSize | 跟踪HTML元素的维度。 | 无报错,值为空 | NO |
+| Sensors | createBreakpoint | 跟踪内部宽度。 | 无报错,返回设备不正确 | NO |
+| Sensors | useScrollbarWidth | 检测浏览器的本地滚动条宽度。 | 无报错,值为0 | NO |
+| Sensors | usePinchZoom | 跟踪指针事件以检测收缩放大和缩小状态。 | Property 'useState' doesn't exist | NO |
+| UI | useAudio | 播放音频并公开其控件。 | 组件“audio”的 View config getter 回调必须是一个函数 | NO |
+| UI | useClickAway | 当用户在目标区域外单击时触发回调。 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| UI | useCss | 动态调整CSS。 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| UI | useDrop and useDropArea | 跟踪文件、链接和复制粘贴滴漏。 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| UI | useFullscreen | 全屏显示元素或视频。 | 组件“video”的视图配置getter回调必须是一个函数 | NO |
+| UI | useSlider | 在任何HTML元素上提供幻灯片行为。 | Cannot set property 'userSelect' of undefined | NO |
+| UI | useSpeech | 从文本字符串合成语音。 | Cannot read property 'getVoices' of undefined | NO |
+| UI | useVibrate | 使用振动API提供物理反馈。 | 0, \_react.useToggle is not a function (it is undefined) | NO |
+| UI | useVideo | 播放视频、跟踪其状态并公开播放控件。 | 组件“video”的视图配置getter回调必须是一个函数 | NO |
+| Side-effects | useCopyToClipboard | 将文本复制到剪切板。 | 无报错无反应 | NO |
+| Side-effects | useFavicon | 设置页面的useFavicon。 | Property 'document' doesn't exist 属性“document”不存在 | NO |
+| Side-effects | useLocalStorage | 管理useLocalStorage中的值。 | 无报错无反应 | NO |
+| Side-effects | useLockBodyScroll | 锁定body元素的滚动。 | 无报错无反应 | NO |
+| Side-effects | useSessionStorage | 管理sessionStorage中的值。 | 无报错无反应 | NO |
+| Side-effects | useTitle | 设置页面的标题。 | 无报错无反应 | NO |
+| Side-effects | usePermission | 查询浏览器API的权限状态。 | Cannot read property 'query' of undefined | NO |
+| Lifecycles | usePromise | 仅在安装组件时解析promise。 | 无报错无反应 | NO |
+| Lifecycles | useEvent | 订阅事件。 | 无报错无反应 | NO |
+| State | createReducer | 带有定制中间件的减速器挂钩工厂。 | 无报错无反应 | NO |
+
+## 遗留问题
+
+## 其他
diff --git a/zh-cn/redux-toolkit.md b/zh-cn/redux-toolkit.md
new file mode 100644
index 0000000000000000000000000000000000000000..2c5f240ec8bfee5d353e6c5d669130f2a165af5d
--- /dev/null
+++ b/zh-cn/redux-toolkit.md
@@ -0,0 +1,225 @@
+> 模板版本:v0.1.3
+
+
+
redux-toolkit
+
+
+
+
+
+
+
+
+
+
+> [!tip] [Github 地址](https://github.com/reduxjs/redux-toolkit)
+
+## 安装与使用
+
+请到三方库的 Releases 发布地址查看配套的版本信息:[redux-toolkit Releases](https://github.com/reduxjs/redux-toolkit/releases),并下载适用版本的 tgz 包。
+进入到工程目录并输入以下命令:
+
+
+
+#### **npm**
+
+```bash
+npm install @reduxjs/toolkit@2.2.1
+```
+
+#### **yarn**
+
+```bash
+yarn add @reduxjs/toolkit@2.2.1
+```
+
+
+
+下面的代码展示了这个库的基本使用场景:
+
+1.在index.js入口文件引入provider组件,并添加sotre属性
+
+```js
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import { store } from "./app/store";
+import { Provider } from "react-redux";
+
+ReactDOM.render(
+
+
+ ,
+ document.getElementById("root"),
+);
+```
+
+2.创建一个createSlice切片,并将reducer属性导出:
+
+```js
+// features/counter/counterSlice.js
+import { createSlice } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+export interface CounterState {
+ value: number
+}
+
+const initialState: CounterState = {
+ value: 0,
+}
+
+export const counterSlice = createSlice({
+ name: 'counter',
+ initialState,
+ reducers: {
+ increment: (state) => {
+ state.value += 1
+ },
+ decrement: (state) => {
+ state.value -= 1
+ },
+ incrementByAmount: (state, action: PayloadAction) => {
+ state.value += action.payload
+ },
+ },
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+export default counterSlice.reducer
+```
+
+3.创建store.js使用configureStore引入上面导出的reducer
+
+```js
+// app/store.js
+import { configureStore } from '@reduxjs/toolkit'
+import counterReducer from '../features/counter/counterSlice'
+
+export const store = configureStore({
+ reducer: {
+ counter: counterReducer,
+ },
+})
+
+export type RootState = ReturnType
+
+export type AppDispatch = typeof store.dispatch
+```
+
+4.编写conter组件实现简单的增加减少计数
+
+```js
+// features/counter/Counter.js
+import React from 'react'
+import type { RootState } from '../../app/store'
+import { useSelector, useDispatch } from 'react-redux'
+import { decrement, increment } from './counterSlice'
+
+export function Counter() {
+ const count = useSelector((state: RootState) => state.counter.value)
+ const dispatch = useDispatch()
+
+ return (
+
+
+ dispatch(increment())}
+ >
+ Increment
+
+ {count}
+ dispatch(decrement())}
+ >
+ Decrement
+
+
+
+ )
+}
+```
+
+## 约束与限制
+
+## 兼容性
+
+本文档内容基于以下版本验证通过:
+
+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 的效果。
+>
+> 详情见 [redux-toolkit 源库地址](https://github.com/reduxjs/redux-toolkit)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------ | ------------------------------------------------- | -------- | -------- | -------- | ----------------- |
+| configureStore | 创建store的方法 | Function | yes | All | yes |
+| reducer | configureStore参数,reducer对象 | Object | yes | All | yes |
+| middleware | configureStore参数,存放中间件的数组 | Array | yes | All | yes |
+| devTools | configureStore参数,浏览器调试用具 | Boolean | yes | Web | no |
+| preloadedState | configureStore参数,默认的state值 | Object | yes | All | yes |
+| enhancers | configureStore参数,存放增强功能数组 | Array | yes | All | yes |
+| getDefaultMiddleware | 获取默认中间件列表 | Function | yes | All | yes |
+| immutableCheck | getDefaultMiddleware对象参数属性 | Boolean | yes | All | yes |
+| serializableCheck | getDefaultMiddleware对象参数属性 | Boolean | yes | All | yes |
+| actionCreatorCheck | getDefaultMiddleware对象参数属性 | Boolean | yes | All | yes |
+| createListenerMiddleware | 创建中间件监听函数 | Function | yes | All | yes |
+| middleware | createListenerMiddleware属性,中间件列表 | Array | yes | All | yes |
+| startListening | createListenerMiddleware属性,添加一个监听 | Function | yes | All | yes |
+| stopListening | createListenerMiddleware属性,暂停一个监听 | Function | yes | All | yes |
+| clearListeners | createListenerMiddleware属性,清除所有监听 | Function | yes | All | yes |
+| addListener | createListenerMiddleware属性,添加一个监听 | Function | yes | All | yes |
+| removeListener | createListenerMiddleware属性,暂停一个监听 | Function | yes | All | yes |
+| clearAllListeners | createListenerMiddleware属性,清除所有监听 | Function | yes | All | yes |
+| createDynamicMiddleware | 创建一个中间件 | Function | yes | All | yes |
+| getDefaultEnhancers | 获取默认增强功能组件 | Function | yes | All | yes |
+| createReducer | 创建reducer | Function | yes | All | yes |
+| addCase | createReducer函数返回对象参数方法,添加action | Function | yes | All | yes |
+| addMatcher | createReducer函数返回对象参数方法,添加过滤条件 | Function | yes | All | yes |
+| addDefaultCase | createReducer函数返回对象参数方法,添加默认action | Function | yes | All | yes |
+| createAction | 创建action | Function | yes | All | yes |
+| createSlice | 创建slice切片 | Function | yes | All | yes |
+| name | createSlice属性,store名字 | String | yes | All | yes |
+| initialState | createSlice属性,store默认值 | object | yes | All | yes |
+| reducers | createSlice属性,reducer对象 | Object | yes | All | yes |
+| extraReducers | createSlice属性,额外的reducer对象 | Object | yes | All | yes |
+| createAsyncThunk | 创建异步action | Function | yes | All | yes |
+| createEntityAdapter | 创建适配器 | Function | yes | All | yes |
+| selectId | createEntityAdapter属性,表示唯一ID | String | yes | All | yes |
+| sortComparer | createEntityAdapter属性,排序方法 | Function | yes | All | yes |
+| getInitialState | createEntityAdapter属性,默认状态 | Object | yes | All | yes |
+| combineSlices | 结合两个Slice切片 | Function | yes | All | yes |
+| createSelector | 创建select选择器 | Function | yes | All | yes |
+| combineSlices | 结合两个Slice切片 | Function | yes | All | yes |
+
+## 工具方法
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------- | ------------------------------ | -------- | -------- | -------- | ----------------- |
+| isAllOf | 判断action是否全部通过 | Function | yes | All | yes |
+| isAnyOf | 判断action是否有一个通过 | Function | yes | All | yes |
+| isAsyncThunkAction | 判断action是否是异步 | Function | yes | All | yes |
+| isPending | 判断action是否在执行中 | Function | yes | All | yes |
+| isRejected | 判断action是否执行完成 | Function | yes | All | yes |
+| isFulfilled | 判断action是否执行失败 | Function | yes | All | yes |
+| isRejectedWithValue | 判断action是否执行失败并返回值 | Function | yes | All | yes |
+| nanoid | 生成随机字符串 | Function | yes | All | yes |
+| miniSerializeError | 打印错误信息 | Function | yes | All | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/reduxjs/redux-toolkit?tab=readme-ov-file),请自由地享受和参与开源。