+
+>[!tip] [Github 地址](https://github.com/react-native-oh-library/flash-list)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/flash-list
+```
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/flash-list
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React from "react";
+import { View, Text } from "react-native";
+import { FlashList } from "@shopify/flash-list";
+
+const DATA = [
+ {
+ title: "First Item",
+ },
+ {
+ title: "Second Item",
+ },
+];
+
+const MyList = () => {
+ return (
+ {item.title}}
+ estimatedItemSize={200}
+ />
+ );
+};
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-flash-list": "file:../../node_modules/@react-native-oh-tpl/flash-list/harmony/flash_list.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-flash-list": "file:../../node_modules/@react-native-oh-tpl/flash_list/harmony/flash_list"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 FlashListPackge
+
+打开 `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-flash-list/src/main/cpp" ./flash_list)
+# 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_flash_list)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "FlashListPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+
+### 在 ArkTs 侧引入 flash-list 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+...
++ import { RNAutoLayoutView, FLASH_LIST_TYPE } from "rnoh-flash-list"
++ import { RNCellContainer, CELL_CONTAINER_TYPE } from "rnoh-flash-list"
+
+ @Builder
+ function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.componentName === FLASH_LIST_TYPE) {
++ RNAutoLayoutView({
++ ctx: ctx.rnohContext,
++ tag: ctx.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ } else if (ctx.componentName === CELL_CONTAINER_TYPE) {
++ RNCellContainer({
++ ctx: ctx.rnohContext,
++ tag: ctx.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+
+ ...
+ }
+ ...
+```
+
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/flash-list releases](https://github.com/react-native-oh-library/flash-list/releases)
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ---- | ---- | -------- | -------- | -------- |
+| contentContainerStyle| You can use contentContainerStyle to apply padding that will be applied to the whole content itself. | ContentStyle | No | All | Yes |
+| estimatedListSize| Estimated visible height and width of the list. It is not the scroll content size. Defining this prop will enable the list to be rendered immediately. Without it, the list first needs to measure its size, leading to a small delay during the first render. | object | No | All | Yes |
+| horizontal| If true, renders items next to each other horizontally instead of stacked vertically. Default is false. | boolean | No | All | partially（false） |
+| keyExtractor| Used to extract a unique key for a given item at the specified index. Key is used for optimizing performance. | function | No | All | Yes |
+| numColumns| Multiple columns can only be rendered with horizontal={false} and will zig-zag like a flexWrap layout. Items should all be the same height - masonry layouts are not supported. | number | No | All | Yes |
+| extraData| A marker property for telling the list to re-render (since it implements PureComponent)| any | No | All | Yes|
+| drawDistance| Draw distance for advanced rendering (in dp/px). | number | No | All | Yes |
+| estimatedItemSize| estimatedItemSize is a single numeric value that hints FlashList about the approximate size of the items before they're rendered. | number | No | All | Yes |
+| viewabilityConfig| viewabilityConfig is a default configuration for determining whether items are viewable. | object | No | All | Yes |
+| renderItem| Takes an item from data and renders it into the list. | function | Yes | All | Yes |
+| data| For simplicity, data is a plain array of items of a given type. | ItemT[] | Yes | All | Yes |
+| CellRendererComponent| Each cell is rendered using this element. Can be a React Component Class, or a render function | JXS Element | No | All | Yes |
+| ListFooterComponent| Rendered at the bottom of all the items | JXS Element | No | All | Yes |
+| ListHeaderComponent| Rendered at the top of all the items | JXS Element | No | All | Yes |
+| refreshControl| A custom refresh control element. | JXS Element | No | All | Yes |
+| renderScrollComponent| Rendered as the main scrollview. | JXS Element | No | All | Yes|
+| onEndReached| Called once when the scroll position gets within onEndReachedThreshold of the rendered content. | callback | No | All | Yes |
+| onEndReachedThreshold| How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback | number | No | All | Yes |
+| onViewableItemsChanged| Called when the viewability of rows changes, as defined by the viewabilityConfig prop. | callback | No | All | Yes |
+| getItemType| Allows developers to specify item types. | function | No | All | Yes |
+| overrideItemLayout| This method can be used to provide explicit size estimates or change column span of an item. | function | No | All | Yes |
+| ItemSeparatorComponent | Rendered in between each item, but not at the top or bottom. | JXS Element | No | All | No |
+| ListEmptyComponent | Rendered when the list is empty | JXS Element | No | All | No |
+| ListFooterComponentStyle | Styling for internal View for ListFooterComponent. | React.ComponentType | No | All | No |
+| ListHeaderComponentStyle |Styling for internal View for ListHeaderComponent. | StyleProp | No | All | No |
+| disableAutoLayout | FlashList applies some fixes to layouts of its children which can conflict with custom CellRendererComponent implementations. You can disable this behavior by setting this to true. | boolean | No | All | No |
+| disableHorizontalListHeightMeasurement | When set to true the list's rendered size needs to be deterministic (i.e., height and width greater than 0) as FlashList will skip rendering the extra item for measurement. Default value is false. | boolean | No | All | No |
+| estimatedFirstItemOffset |estimatedFirstItemOffset specifies how far the first item is drawn from start of the list window or offset of the first item of the list (not the header). | number | No | All | No |
+| initialScrollIndex | Instead of starting at the top with the first item, start at initialScrollIndex | number | No | All | No |
+| inverted |Reverses the direction of scroll. Uses scale transforms of -1. | boolean | No | All | No |
+| onBlankArea | FlashList computes blank space that is visible to the user during scrolling or the initial loading of the list. | callback | No | All | No |
+| onLoad | This event is raised once the list has drawn items on the screen. | callback | No | All | No |
+| onRefresh | If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly. | callback | No | All | No |
+| overrideProps | We do not recommend using this prop for anything else than debugging. Internal props of the list will be overriden with the provided values. | object | No | All | No |
+| progressViewOffset | Set this when offset is needed for the loading indicator to show correctly. | number | No | All | No |
+| refreshing | Set this true while waiting for new data from a refresh. | boolean | No | All | No |
+| viewabilityConfigCallbackPairs | List of ViewabilityConfig/onViewableItemsChanged pairs. A specific onViewableItemsChanged will be called when its corresponding ViewabilityConfig's conditions are met. | object | No | All | No |
+
+## 静态方法
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---- | ---- | ---- | -------- | -------- | -------- |
+| prepareForLayoutAnimationRender | Run this method before running layout animations, such as when animating an element when deleting it. | function | No | All | No |
+| recordInteraction | Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. if waitForInteractions is true and the user has not scrolled. | function | No | All | No |
+| scrollToEnd | Scrolls to the end of the content. | function | No | All | No |
+| scrollToIndex | Scroll to a given index. | function | No | All | No |
+| scrollToItem | Scroll to a given item. | function | No | All | No |
+| scrollToOffset | Scroll to a specific content pixel offset in the list. | function | No | All | No |
+
+## 遗留问题
+
+- [ ] flash-list部分属性未实现鸿蒙化: [issue#I8QVS0](https://gitee.com/react-native-oh-library/usage-docs/issues/I8QVS0)
+
+
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/Shopify/flash-list/blob/main/LICENSE.md) ，请自由地享受和参与开源。
diff --git a/1224/lodash.md b/1224/lodash.md
new file mode 100644
index 00000000..9dcc9f69
--- /dev/null
+++ b/1224/lodash.md
@@ -0,0 +1,175 @@
+> 模板版本：v0.1.2
+
+
+
+> [!tip] [Github 地址](https://github.com/lodash/lodash/tree/4.17.21)
+
+## 安装与使用
+
+#### **yarn**
+
+```bash
+yarn add lodash
+```
+
+#### **npm**
+```bash
+npm install lodash
+```
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+// findLastIndex 为例
+import lodashStable from "lodash";
+
+var users = [
+ { 'user': 'barney', 'active': true },
+ { 'user': 'fred', 'active': false },
+ { 'user': 'pebbles', 'active': false }
+];
+
+lodashStable.findLastIndex(users, function(o) { return o.user == 'pebbles'; });
+// => 2
+
+// The `_.matches` iteratee shorthand.
+lodashStable.findLastIndex(users, { 'user': 'barney', 'active': true });
+// => 0
+
+// The `_.matchesProperty` iteratee shorthand.
+lodashStable.findLastIndex(users, ['active', false]);
+// => 2
+
+// The `_.property` iteratee shorthand.
+lodashStable.findLastIndex(users, 'active');
+// => 0
+
+```
+### 兼容性
+
+在下述版本验证通过:
+ 1. IDE:Deveco Studio 4.1.3.412;
+ SDK: OpenHarmony (Api11) 4.1.0.53;
+ 测试设备: Mate40 Pro (NOH-AN00);
+ ROM: 2.0.0.52 (SP22C00E52R1P17log);
+ RNOH: 0.72.11。
+
+## 静态方法
+
+详情查看[lodash官方文档](https://lodash.com/docs/4.17.15)
+
+如下是已验证接口展示:
+
+ #### **Collection**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| find | Iterates over elements of collection, returning the first element predicate returns truthy for | function | NO | yes |
+| findLast | Iterates over elements of collection from right to left, returning the first element | function | NO | yes |
+| size | Gets the size of collection | function | NO | yes |
+| map | Creates an array of values by running each element in collection thru iteratee | function | NO | yes |
+| includes | Checks if value is in collection. If collection is a string, it's checked for a substring of value, otherwise SameValueZero is used for equality comparisons | function | NO | yes |
+| filter | Iterates over elements of collection, returning an array of all elements predicate returns truthy for | function | NO | yes |
+| uniq | Creates a duplicate-free version of an array, using SameValueZero for equality comparisons, in which only the first occurrence of each element is kept | function | NO | yes |
+| uniqBy | This method is like _.uniq except that it accepts iteratee which is invoked for each element in array to generate the criterion by which uniqueness is computed | function | NO | yes |
+| chunk | Creates an array of elements split into groups the length of size. If array can't be split evenly, the final chunk will be the remaining elements | function | NO | yes |
+| slice | Creates a slice of array from start up to, but not including, end | function | NO | yes |
+| compact | Creates an array with all falsey values removed. The values false, null, 0, "", undefined, and NaN are falsey | function | NO | yes |
+
+#### **Array**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| findIndex | This method is like _.find except that it returns the index of the first element predicate returns truthy for instead of the element itself | function | NO | yes |
+| findLastIndex | This method is like _.findIndex except that it iterates over elements of collection from right to left | function | NO | yes |
+| head | Gets the first element of array | function | NO | yes |
+| flattenDeep | Recursively flattens array | function | NO | yes |
+| remove | emoves all elements from array that predicate returns truthy for and returns an array of the removed elements | function | NO | yes |
+| nth | Gets the element at index n of array. If n is negative, the nth element from the end is returned | function | NO | yes |
+| jion | Converts all elements in array into a string separated by separator | function | NO | yes |
+
+#### **String**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| camelCase | Converts string to camel case | function | NO | yes |
+| repeat | Repeats the given string n times | function | NO | yes |
+| truncate | | function | NO | yes |
+| toUpper | Converts string, as a whole, to upper case just like String#toUpperCase. | function | NO | yes |
+
+#### **Math**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| ceil | Computes number rounded up to precision | function | NO | yes |
+| divide | Divide two numbers. | function | NO | yes | Math |
+| round | Computes number rounded to precision. | function | NO | yes |
+| floor | Computes number rounded down to precision | function | NO | yes |
+| sum | Computes the sum of the values in array | function | NO | yes |
+
+#### **Object**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| findKey | This method is like _.find, returns the key of the first element | function | NO | yes |
+| findLastKey | This method is like _.findKey it iterates over elements of a collection in the opposite order | function | NO | yes |
+| get | Gets the value at path of object. If the resolved value is undefined, the defaultValue is returned in its place | function | NO | yes |
+| values | Creates an array of the own enumerable string keyed property values of object | function | NO | yes |
+| keys | Creates an array of the own enumerable property names of object | function | NO | yes |
+| merge | This method is like _.assign except that it recursively merges own and inherited enumerable string keyed properties of source objects into the destination object | function | NO | yes |
+
+#### **Util**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| range | Creates an array of numbers (positive and/or negative) progressing from start up to, but not including, end | function | NO | yes |
+| toPath | Converts value to a property path array | function | NO | yes |
+| times | Invokes the iteratee n times, returning an array of the results of each invocation | function | NO | yes |
+
+#### **Lang**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| isEmpty | Checks if value is an empty object, collection, map, or set | function | NO | yes |
+| isEqual | Performs a deep comparison between two values to determine if they are equivalent | function | NO | yes |
+| isNumber | Checks if value is classified as a Number primitive or object | function | NO | yes |
+| cloneDeep | This method is like _.clone except that it recursively clones value | function | NO | yes |
+| isNaN | Checks if value is NaN | function | NO | yes |
+| isString | Checks if value is classified as a String primitive or object | function | NO | yes |
+
+#### **Function**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| debounce | Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked | function | NO | yes |
+| throttle | Creates a throttled function that only invokes func at most once per every wait milliseconds | function | NO | yes |
+
+#### **Number**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| clamp | Clamps number within the inclusive lower and upper bounds | function | NO | yes |
+| random | Produces a random number between the inclusive lower and upper bounds | function | NO | yes |
+| inRange | Checks if n is between start and up to, but not including, end | function | NO | yes |
+
+#### **Seq**
+
+| 名称 | 说明 | 类型 | 是否必填 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- |
+| chain | Creates a lodash wrapper instance that wraps value with explicit method chain sequences enabled | function | NO | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/lodash/lodash/blob/4.17.21/LICENSE) ，请自由地享受和参与开源。
diff --git a/1224/lottie-react-native.md b/1224/lottie-react-native.md
new file mode 100644
index 00000000..4feb2724
--- /dev/null
+++ b/1224/lottie-react-native.md
@@ -0,0 +1,244 @@
+> 模板版本：v0.1.2
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/lottie-react-native)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/lottie-react-native
+```
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/lottie-react-native
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import LottieView from "lottie-react-native";
+
+;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-lottie": "file:../../node_modules/@react-native-oh-tpl/lottie-react-native/harmony/lottie.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-lottie": "file:../../node_modules/@react-native-oh-tpl/lottie-react-native/harmony/lottie"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 LottieAnimationViewPackage
+
+打开 `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-lottie/src/main/cpp" ./lottie)
+# 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_lottie)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "LottieAnimationViewPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 Lottie 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
++ import { LottieAnimationView, LOTTIE_TYPE } from "rnoh-lottie"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.componentName === LOTTIE_TYPE) {
++ LottieAnimationView({
++ ctx: ctx.rnohContext,
++ tag: ctx.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+}
+...
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/lottie-react-native Releases](https://github.com/react-native-oh-library/lottie-react-native/releases)
+
+### 权限要求
+
+- 如果 source 使用网络 url 应用需要申请网络权限
+- 如果使用的 json 文件里有依赖图片资源或使用 imageAssetsFolder 属性，需要将资源文件放置到鸿蒙工程 rawfile 下对应的路径中
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Default | Required | Platform | HarmonyOS Support |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------- | -------- | --------------------- | ----------------- |
+| source | Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json') | string\| AnimationObject \| { uri: string } | None | Yes | All | Yes |
+| progress | A number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API. | number | 0 | No | iOS, Android, Windows | Yes |
+| speed | The speed the animation will progress. Sending a negative value will reverse the animation | number | 1 | No | All | Yes |
+| duration | The duration of the animation in ms. Takes precedence over speed when set. This only works when source is an actual JS object of an animation. | number | undefined | No | iOS, Android, Windows | Yes |
+| loop | A boolean flag indicating whether or not the animation should loop. | boolean | true | No | All | Yes |
+| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | boolean | false | No | All | Yes |
+| resizeMode | Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center. | 'cover'\| 'contain' \| 'center' | contain | No | iOS, Android, Windows | No |
+| style | Style attributes for the view, as expected in a standard View, aside from border styling | StyleProp | None | No | iOS, Android, Windows | Yes |
+| webStyle | Style attributes for the view, it uses CSSProperties. | CSSProperties | None | No | Web | No |
+| imageAssetsFolder | Needed for Android and HarmonyOS to work properly with assets, iOS will ignore it. | string | None | No | Android | Yes |
+| useNativeLooping | Only Windows. When enabled, uses platform-level looping to improve smoothness, but onAnimationLoop will not fire and changing the loop prop will reset playback rather than finishing gracefully. | boolean | false | No | Windows | No |
+| onAnimationLoop | Only Windows and Web. A callback function invoked when the animation loops. | callback | None | No | Windows, Web | No |
+| onAnimationFinish | A callback function which will be called when animation is finished. This callback is called with a boolean isCancelled argument, indicating if the animation actually completed playing, or if it was cancelled, for instance by calling play() or reset() while is was still playing. Note that this callback will be called only when loop is set to false. | callback | None | No | All | Yes |
+| renderMode | a String flag to set whether or not to render with HARDWARE or SOFTWARE acceleration | 'AUTOMATIC'\| 'HARDWARE' \| 'SOFTWARE' | AUTOMATIC | No | iOS, Android | No |
+| cacheComposition | Only Android and HarmonyOS, a boolean flag indicating whether or not the animation should do caching. | boolean | true | No | Android | Yes |
+| colorFilters | An array of objects denoting layers by KeyPath and a new color filter value (as hex string). | Array | [] | No | iOS, Android, Windows | No |
+| textFiltersAndroid | Only Android, an array of objects denoting text values to find and replace. | Array | [] | No | Android | No |
+| textFiltersIOS | Only iOS, an array of objects denoting text layers by KeyPath and a new string value. | Array | [] | No | iOS | No |
+| hover | Only Web, a boolean denoting whether to play on mouse hover. | boolean | false | No | Web | No |
+| direction | Only Web a number from 1 or -1 denoting playing direction. | 1\| -1 | 1 | No | Web | No |
+
+## 方法 (Imperative API)
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
+| play | Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation (not available on web) when called as play(startFrame, endFrame). | function | No | All | Yes |
+| reset | Reset the animation back to 0 progress. | function | No | All | Yes |
+| pause | Pauses the animation. | function | No | All | Yes |
+| resume | Resumes the paused animation. | function | No | All | Yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [Apache License 2.0](https://github.com/lottie-react-native/lottie-react-native/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/1224/model.md b/1224/model.md
new file mode 100644
index 00000000..3a5493e6
--- /dev/null
+++ b/1224/model.md
@@ -0,0 +1,306 @@
+# 文档模板(删除)
+
+> [!ATTENTION] 使用模板时请将后面带有 (删除) 的语句删除。(删除)
+
+> 模板版本：v0.1.2
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **npm**
+
+```bash
+npm i react-native-action-button --save
+```
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React, { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+import ActionButton from 'react-native-action-button';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+
+class App extends Component {
+
+ render() {
+ return (
+
+ {/* Rest of the app comes ABOVE the action button component !*/}
+
+ console.log("notes tapped!")}>
+
+
+ {}}>
+
+
+ {}}>
+
+
+
+
+ );
+ }
+
+}
+
+const styles = StyleSheet.create({
+ actionButtonIcon: {
+ fontSize: 20,
+ height: 22,
+ color: 'white',
+ },
+});
+
+```
+
+## 兼容性
+
+在以下版本验证通过
+ 1. IDE:4.1.3.313;
+ SDK:4.1.0.53;
+ 测试设备：Mate40 pro(NOH-AN00);
+ Rom:2.0.0.52(C00E52R1P17log);
+ RNOH:0.72.11。
+
+## 属性
+详情见[react-native-action-button](https://github.com/mastermoo/react-native-action-button)
+
+### ActionButton:
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- | -------- |
+| resetToken|use this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state. |any| No | / | Yes |
+| size |use this to change the size of the Button | number | No | / | Yes |
+| active |action buttons visible or not | boolean | No | / | Yes |
+| position |one of: left center and right | string | No | / | Yes |
+| autoInactive |Auto hide ActionButtons when ActionButton.Item is pressed. | boolean | No | / | Yes |
+| hideShadow |use this to hide the default elevation and boxShadow | boolean | No | / | Yes |
+| spacing |spacing between the ActionButton.Items | number | No | / | Yes |
+| offsetX |offset from the left/right side of the screen | number | No | / | Yes |
+| offsetY |offset from the bottom/top of the screen | number | No | / | Yes |
+| buttonText |use this to set a different text on the button | string | No | / | Yes |
+| degrees |degrees to rotate icon | number | No | / | Yes |
+| shadowStyle |The custom shadow style you want to pass in the action button | style | No | / | Yes |
+| bgColor |background color when ActionButtons are visible | string | No | / | Yes |
+| bgOpacity |set the transparency of the background color| number | No | / | Yes |
+| buttonTextStyle |use this to set the textstyle of the button's text | style | No | / | Yes |
+| verticalOrientation |direction action buttons should expand. One of: up or down | string | No | / | Yes |
+| backgroundTappable |make background tappable in active state of ActionButton | boolean | No | / | Yes |
+| activeOpacity |activeOpacity props of TouchableOpacity | number | No | / | Yes |
+| renderIcon |Function to render the component for ActionButton Icon. It is passed a boolean, active, which is true if the FAB has been expanded, and false if it is collapsed, allowing you to show a different icon when the ActionButton Items are expanded. | function | No | / | Yes |
+| onPress |fires, when ActionButton is tapped| function | No | / | Yes |
+| useNativeFeedback |Android: Whether to use a TouchableNativeFeedback| boolean | No | Android | No |
+| fixNativeFeedbackRadius |Android: Activate this to fix TouchableNativeFeedback Ripple UI problems| boolean | No | Android | No |
+| nativeFeedbackRippleColor |Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback| string | No | Android | No |
+### ActionButton.Item:
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- | -------- |
+| size |use this to change the size of the Button | number | No | / | Yes |
+| buttonColor |background color of the Button | string | No | / | Yes |
+| title |the title shown next to the button. When undefined the title is not hidden| string | No | / | Yes |
+| textStyle |use this to set the textstyle of the button's item text | style | No | / | Yes |
+| shadowStyle |The custom shadow style you want to pass in the action button item | style | No | / | Yes |
+| textContainerStyle |use this to set the textstyle of the button's item text container | style | No | / | Yes |
+| spaceBetween |use this to set the space between the Button and the text container | number | No | / | Yes |
+| hideLabelShadow |use this to hide the button's label default elevation and boxShadow | boolean | No | / | Yes |
+| activeOpacity | activeOpacity props of TouchableOpacity | number | No | / | Yes |
+| onPress |required function, triggers when a button is tapped| function | No | / | Yes |
+| useNativeFeedback |Android: Whether to use a TouchableNativeFeedback| boolean | No | Android | No |
+| fixNativeFeedbackRadius |Android: Activate this to fix TouchableNativeFeedback Ripple UI problems| boolean | No | Android | No |
+| nativeFeedbackRippleColor |Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback| string | No | Android | No |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [MIT License](https://github.com/mastermoo/react-native-action-button/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/1224/react-native-autoheight-webview.md b/1224/react-native-autoheight-webview.md
new file mode 100644
index 00000000..775c41b4
--- /dev/null
+++ b/1224/react-native-autoheight-webview.md
@@ -0,0 +1,83 @@
+> 模板版本：v0.1.2
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-autoheight-webview)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+```bash
+yarn add @react-native-oh-tpl/react-native-autoheight-webview
+```
+
+或者
+
+```bash
+npm install @react-native-oh-tpl/react-native-autoheight-webview
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import AutoHeightWebView from "react-native-autoheight-webview";
+
+;
+```
+
+## Link
+
+本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-webview 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+
+如未引入请参照[@react-native-oh-tpl/react-native-webview 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/vmall/react-native-webview.md#link)进行引入
+
+## 约束与限制
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-autoheight-webview Releases](https://github.com/react-native-oh-library/react-native-autoheight-webview/releases)
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
+| `source` | Loads static HTML or a URI (with optional headers) in the WebView | object | yes | All | partially (Only of: **Load uri :** uri headers **Static HTML :** html baseUrl ) |
+| `originWhitelist?` | List of origin strings to allow being navigated to. | string[] | No | All | yes |
+| `scalesPageToFit?` | Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. | boolean | No | android | yes |
+| `customScript?` | - | string | No | All | yes |
+| `style?` | A style object that allow you to customize the WebView style. | Style | No | All | yes |
+| `customStyle?` | The custom css content will be added to the page's . | string | No | All | yes |
+| `onSizeUpdated?` | Either updated height or width will trigger onSizeUpdated. | function | No | All | yes |
+| `showsHorizontalScrollIndicator?` | Boolean value that determines whether a horizontal scroll indicator is shown in the WebView. | boolean | No | All | yes |
+| `showsVerticalScrollIndicator` | Boolean value that determines whether a vertical scroll indicator is shown in the WebView. | boolean | No | All | yes |
+| `files?` | Using local or remote files. To add local files: Add files to android/app/src/main/assets/ (depends on baseUrl) on android; add files to web/ (depends on baseUrl) on iOS; add files to harmony/entry/src/main/resoureces/rawfile on harmony. | PropTypes.arrayOf(PropTypes.shape({ href: PropTypes.string, type: PropTypes.string, rel: PropTypes.string })) | No | All | yes |
+| `scrollEnabledWithZoomedin?` | Making the webview scrollable on iOS when zoomed in even if scrollEnabled is false. | boolean | No | ios | no |
+| `viewportContent?` | Please note that 'width=device-width' with scalesPageToFit may cause some layout issues on Android and harmony, for these conditions, using customScript prop to apply custom viewport meta. | string | No | All | yes |
+
+## 遗留问题
+
+- [ ] autoheight-webview 部分属性未实现鸿蒙化[issue#1](https://github.com/react-native-oh-library/react-native-autoheight-webview/issues/1)
+- [x] 中文乱码[issue#2](https://github.com/react-native-oh-library/react-native-autoheight-webview/issues/2)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The ISC License (ISC)](https://github.com/iou90/react-native-autoheight-webview/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/1224/react-native-cameraroll.md b/1224/react-native-cameraroll.md
new file mode 100644
index 00000000..71e5f30c
--- /dev/null
+++ b/1224/react-native-cameraroll.md
@@ -0,0 +1,292 @@
+> 模板版本：v0.1.2
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-gesture-handler)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-gesture-handler
+```
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-gesture-handler
+```
+
+
+
+快速使用：
+
+```js
+import React, { Component } from "react";
+import { Animated, Dimensions } from "react-native";
+import {
+ GestureHandlerRootView,
+ PanGestureHandler,
+} from "react-native-gesture-handler";
+
+const { width } = Dimensions.get("screen");
+const circleRadius = 30;
+
+class Circle extends Component {
+ _touchX = new Animated.Value(width / 2 - circleRadius);
+
+ _onPanGestureEvent = Animated.event([{ nativeEvent: { x: this._touchX } }], {
+ useNativeDriver: true,
+ });
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default function App() {
+ return ;
+}
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-gesture-handler": "file:../../node_modules/@react-native-tpl-oh/react-native-gesture-handler/harmony/gesture_handler.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-gesture-handler": "file:../../node_modules/@react-native-tpl-oh/react-native-gesture-handler/harmony/gesture_handler"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 GestureHandlerPackage
+
+打开 `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-gesture-handler/src/main/cpp" ./gesture-handler)
+# 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_gesture_handler)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "GestureHandlerPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 gesture-handler 组件
+
+react-native-gesture-handler 在 2.x 版本里，不再从原生端引入 ``，而是在 JS 端添加。详情请看官方说明：[Migrating off RNGHEnabledRootView](https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot)。
+
+鸿蒙支持 1.x 在原生端替换 `RootView` 来添加 `` 的方式。
+
+**如果使用 2.x 方式，则把后面带有 `1.x` 注释的代码删掉即可**
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+...
++ import { RNGestureHandlerRootView, RNGestureHandlerButton } from "rnoh-gesture-handler"
++ import { RNGestureHandlerModule } from 'rnoh-gesture-handler/src/main/ets/RNGestureHandlerModule' // 1.x
+
+ @Builder
+ function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.componentName == RNGestureHandlerRootView.NAME){
++ RNGestureHandlerRootView({
++ ctx: ctx.rnohContext,
++ tag: ctx.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ } else if (ctx.componentName == RNGestureHandlerButton.DESCRIPTOR_TYPE){
++ RNGestureHandlerButton({
++ ctx: ctx.rnohContext,
++ tag: ctx.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+ }
+ ...
+ build() {
+ Column() {
+ if (this.rnAbility && this.shouldShow) {
+ RNApp({
++ onSetUp: (rnInstance) => { // 1.x
++ rnInstance.bindComponentNameToDescriptorType(RNGestureHandlerRootView.NAME, "RootView") // 1.x
++ rnInstance.getTurboModule(RNGestureHandlerModule.NAME).install() // 1.x
++ }, // 1.x
+ ...
+ })
+ }
+ }
+ .height('100%')
+ .width('100%')
+ }
+```
+
+### 在 ArkTs 侧引入 Gesture Handler Package
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+...
++ import { GestureHandlerPackage } from 'rnoh-gesture-handler/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new GestureHandlerPackage(ctx),
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-gesture-handler Releases](https://github.com/react-native-oh-library/react-native-gesture-handler/releases)
+
+> [!tip] [官方文档](https://docs.swmansion.com/react-native-gesture-handler/docs/)
+
+## Gestures
+
+### Gesture detector
+
+GestureDetector 是 Gesture Handler 库 2.x 版本的一个主要组件。
+
+#### Gesture detector 属性
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- |
+| gesture | A gesture object containing the configuration and callbacks. | base gestures or any ComposedGesture | yes | All | yes |
+| userSelect | This parameter allows to specify which userSelect property should be applied to underlying view. | ("none" \| "auto" \| "text") | no | Web | no |
+
+目前 GestureDetector 支持:
+
+`Gesture.Tap() `
+
+Creates a new instance of [TapGesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture) with its default config and no callbacks.
+
+`Gesture.Pan()`
+
+Creates a new instance of [PanGesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture) with its default config and no callbacks.
+
+## Components
+
+### Touchables
+
+Gesture Handler 库提供了一种基于原生按钮的 React Native touchable 组件的实现，它不依赖于 React Native 的 JS responder system。这些组件的实现遵循相同的API，旨在替代 React Native 中的 touchable 组件
+
+目前支持：
+
+- [Touchable Opacity](https://reactnative.dev/docs/touchableopacity)
+
+- [Touchable Without Feedback](https://reactnative.dev/docs/touchablewithoutfeedback)
+
+## Gesture handlers(legacy)
+
+> [!WARNING] Consider using the new [gestures API](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture) instead. The old API is not actively supported and is not receiving the new features. Check out [RNGH 2.0 section in Introduction](https://docs.swmansion.com/react-native-gesture-handler/docs/#rngh-20) for more information.
+
+### Gesture handlers 通用属性
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- |
+| enabled | Indicates whether the given handler should be analyzing stream of touch events or not. | boolean | no | All | yes |
+| shouldCancelWhenOutside | When true the handler will cancel or fail recognition (depending on its current state) whenever the finger leaves the area of the connected view. | boolean | no | All | no |
+| cancelsTouchesInView | When true, the handler will cancel touches for native UI components (UIButton, UISwitch, etc) it's attached to when it becomes ACTIVE. | boolean | no | iOS | no |
+| simultaneousHandlers | When set, the handler will be allowed to activate even if one or more of the handlers provided by their refs are in an ACTIVE state. | refs | no | All | no |
+| waitFor | When set the handler will not activate as long as the handlers provided by their refs are in the BEGAN state. | refs | no | All | no |
+| hitSlop | This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture. | object | no | All | yes |
+| userSelect | This parameter allows to specify which userSelect property should be applied to underlying view. | ("none" \| "auto" \| "text") | no | Web | no |
+| activeCursor | This parameter allows to specify which cursor should be used when gesture activates. | CSS cursor values | no | Web | no |
+| onGestureEvent | Takes a callback that is going to be triggered for each subsequent touch event while the handler is in an ACTIVE state. | callback | no | All | yes |
+| onHandlerStateChange | Takes a callback that is going to be triggered when state of the given handler changes. | callback | no | All | yes |
+
+### Gesture handlers 通用事件数据
+
+以下是提供给 `onGestureEvent` 和 `onHandlerStateChange` 回调的通用事件数据:
+
+| 名称 | 说明 | 类型 | 原库平台 | 鸿蒙支持 |
+| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- |
+| state | Current state of the handler. | State | All | yes |
+| numberOfPointers | Represents the number of pointers (fingers) currently placed on the screen. | number | All | yes |
+
+### PanGestureHandler
+
+#### PanGestureHandler 属性
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- |
+| minDist | Minimum distance the finger (or multiple finger) need to travel before the handler activates. | number | no | All | yes |
+| minPointers | A number of fingers that is required to be placed before handler can activate. | number | no | All | yes |
+| maxPointers | When the given number of fingers is placed on the screen and handler hasn't yet activated it will fail recognizing the gesture. | number | no | All | yes |
+| activeOffsetX | Range along X axis (in points) where fingers travels without activation of handler. | number | no | All | yes |
+| activeOffsetY | Range along Y axis (in points) where fingers travels without activation of handler. | number | no | All | yes |
+| failOffsetY | When the finger moves outside this range (in points) along Y axis and handler hasn't yet activated it will fail recognizing the gesture. | number | no | All | yes |
+| failOffsetX | When the finger moves outside this range (in points) along X axis and handler hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number. | number | no | All | yes |
+| maxDeltaX | This method is deprecated but supported for backward compatibility. Instead of using maxDeltaX={N} you can do failOffsetX={[-N, N]}. | number | no | All | yes |
+| maxDeltaY | This method is deprecated but supported for backward compatibility. Instead of using maxDeltaY={N} you can do failOffsetY={[-N, N]}. | number | no | All | yes |
+| minOffsetX | This method is deprecated but supported for backward compatibility. Instead of using minOffsetX={N} you can do activeOffsetX={N}. | number | no | All | yes |
+| minOffsetY | This method is deprecated but supported for backward compatibility. Instead of using minOffsetY={N} you can do activeOffsetY={N}. | number | no | All | yes |
+| minDeltaX | This method is deprecated but supported for backward compatibility. Instead of using minDeltaX={N} you can do activeOffsetX={[-N, N]}. | number | no | All | yes |
+| minDeltaY | This method is deprecated but supported for backward compatibility. Instead of using minDeltaY={N} you can do activeOffsetY={[-N, N]}. | number | no | All | yes |
+| avgTouches | Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen). | number | no | Android | no |
+| enableTrackpadTwoFingerGesture | Enables two-finger gestures on supported devices, for example iPads with trackpads. | boolean | no | iOS | no |
+
+#### PanGestureHandler 事件数据
+
+请到查看[基础 handler 类的通用事件数据](#gesture-handlers-通用事件数据)。以下是 PanGestureHandler 特有的事件数据。
+
+`translationX`
+
+Translation of the pan gesture along X axis accumulated over the time of the gesture. The value is expressed in the point units.
+
+`translationY`
+
+Translation of the pan gesture along Y axis accumulated over the time of the gesture. The value is expressed in the point units.
+
+`velocityX`
+
+Velocity of the pan gesture along the X axis in the current moment. The value is expressed in point units per second.
+
+`velocityY`
+
+Velocity of the pan gesture along the Y axis in the current moment. The value is expressed in point units per second.
+
+`x`
+
+X coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. Expressed in point units.
+
+`y`
+
+Y coordinate of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler. Expressed in point units.
+
+### TapGestureHandler
+
+#### TapGestureHandler 属性
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- |
+| minPointers | Minimum number of pointers (fingers) required to be placed before the handler activates. | number | no | All | yes |
+| maxDurationMs | Maximum time, expressed in milliseconds, that defines how fast a finger must be released after a touch. | number | no | All | yes |
+| maxDelayMs | Maximum time, expressed in milliseconds, that can pass before the next tap — if many taps are required. | number | no | All | yes |
+| maxDeltaX | Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the X axis during a tap gesture. | number | no | All | yes |
+| maxDeltaY | Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the Y axis during a tap gesture. | number | no | All | yes |
+| maxDist | Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture. | number | no | All | yes |
+
+#### TapGestureHandler 事件数据
+
+请到查看[基础 handler 类的通用事件数据](#gesture-handlers-通用事件数据)。以下是 TapGestureHandler 特有的事件数据。
+
+`x`
+
+X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler.
+
+`y`
+
+Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the view attached to the handler.
+
+`absoluteX`
+
+X coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteX instead of x in cases when the view attached to the handler can be transformed as an effect of the gesture.
+
+`absoluteY`
+
+Y coordinate, expressed in points, of the current position of the pointer (finger or a leading pointer when there are multiple fingers placed) relative to the window. It is recommended to use absoluteY instead of y in cases when the view attached to the handler can be transformed as an effect of the gesture.
+
+## 遗留问题
+
+- 目前只支持 Pan 和 Tag 手势
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-linear-gradient/blob/harmony/LICENSE) ，请自由地享受和参与开源。
diff --git a/1224/react-native-image-picker.md b/1224/react-native-image-picker.md
new file mode 100644
index 00000000..446ebccc
--- /dev/null
+++ b/1224/react-native-image-picker.md
@@ -0,0 +1,271 @@
+> 模板版本：v0.1.2
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-image-picker)
+
+## 安装与使用
+
+
+
+
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-image-picker
+```
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/react-native-image-picker
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React from 'react';
+import { View, Text } from 'react-native';
+import { launchImageLibrary } from 'react-native-image-picker';
+
+const App = () => {
+ const [urlInfo, setUrlInfo] = React.useState();
+ return (
+
+ {
+ launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 }, (data) => {
+ if (data.assets?.length) {
+ setUrlInfo(JSON.stringify(data.assets))
+ }
+ })
+ }}>
+ 选择
+
+ {urlInfo}
+
+ );
+};
+
+export default App;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-image-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-picker/harmony/image_picker.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-image-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-picker/harmony/image_picker"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 ImagePickerViewPackage
+
+打开 `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-picker/src/main/cpp" ./image_picker)
+# 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_picker)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "RNImagePickerPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 ImagePickerViewPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+import type {RNPackageContext, RNPackage} from 'rnoh/ts';
+import {SamplePackage} from 'rnoh-sample-package/ts';
++ import {ImagePickerViewPackage} from 'rnoh-image-picker/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new ImagePickerViewPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-picker Releases](https://github.com/react-native-oh-library/react-native-image-picker/releases)
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+### Options
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | --------------- | -------- |
+| mediaType | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | string | yes | iOS Android Web | yes |
+| maxWidth | To resize the image. | number | no | iOS Android | no |
+| maxHeight | To resize the image. | number | no | iOS Android | no |
+| videoQuality | low, medium, or high on iOS, low or high on Android. | string | no | iOS Android | no |
+| durationLimit | Video max duration (in seconds). | number | no | iOS Android | no |
+| quality | 0 to 1, photos. | number | no | iOS Android | no |
+| cameraType | 'back' or 'front' (May not be supported in few android devices). | string | no | iOS Android | no |
+| includeBase64 | If true, creates base64 string of the image (Avoid using on large image files due to performance). | boolean | no | iOS Android Web | no |
+| includeExtra | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | boolean | no | iOS Android | no |
+| saveToPhotos | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | boolean | no | iOS Android | no |
+| selectionLimit | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13, Use 0 to allow up to 50 files on HarmonyOS. Default is 1. | number | no | iOS Android Web | yes |
+| presentationStyle | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | string | no | iOS | no |
+| formatAsMp4 | Converts the selected video to MP4 (iOS Only). | boolean | no | iOS | no |
+| assetRepresentationMode | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | boolean | no | iOS | no |
+
+### The Response Object
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------ | ------------------------------------------------------- | ------- | -------- | --------------- | -------- |
+| didCancel | true if the user cancelled the process | boolean | no | iOS Android Web | yes |
+| errorCode | Check ErrorCode for all error codes | string | no | iOS Android Web | no |
+| errorMessage | Description of the error, use it for debug purpose only | string | no | iOS Android Web | no |
+| assets | Array of the selected media, refer to Asset Object | Asset | no | iOS Android Web | yes |
+
+### Asset Object
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | --------------- | -------- |
+| base64 | The base64 string of the image (photos only) | string | no | iOS Android Web | no |
+| uri | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | string | yes | iOS Android Web | yes |
+| originalPath | The original file path. | string | yes | iOS Android Web | yes |
+| width | Asset dimensions | number | yes | iOS Android Web | yes |
+| height | Asset dimensions | number | yes | iOS Android Web | yes |
+| fileSize | The file size | number | yes | iOS Android | yes |
+| type | The file type | string | yes | iOS Android | yes |
+| fileName | The file name | string | yes | iOS Android | yes |
+| duration | The selected video duration in seconds | number | no | iOS Android | no |
+| bitrate | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | number | no | Android | no |
+| timestamp | Timestamp of the asset. Only included if 'includeExtra' is true | string | no | iOS Android | no |
+| id | local identifier of the photo or video. On Android & HarmonyOS, this is the same as fileName | string | no | iOS Android | yes |
+
+## 静态方法
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------ | -------------------------------------- | -------- | -------- | --------------- | -------- |
+| launchCamera | Launch camera to take photo or video. | function | yes | iOS Android Web | no |
+| launchImageLibrary | Launch gallery to pick image or video. | function | yes | iOS Android Web | yes |
+
+## 遗留问题
+
+- 只实现了选择图库的接口属性，相机功能暂未适配
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-image-picker/react-native-image-picker/blob/main/LICENSE.md) ，请自由地享受和参与开源。
diff --git a/1224/react-native-linear-gradient.md b/1224/react-native-linear-gradient.md
new file mode 100644
index 00000000..ba6ddbd8
--- /dev/null
+++ b/1224/react-native-linear-gradient.md
@@ -0,0 +1,238 @@
+> 模板版本：v0.1.2
+
+
+
+## 安装与使用
+
+> [!tip] 目前部分 React-Native-OpenHarmony(RNOH) 三方库的 npm 包部署在私仓，需要通过 github token 来获取访问权限。
+
+在与 `package.json` 文件相同的目录中，创建或编辑 `.npmrc` 文件以包含指定 GitHub Packages URL 和托管包的命名空间的行。 将 TOKEN 替换为 RNOH 三方库指定的 token。
+
+```bash
+@react-native-oh-library:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=TOKEN
+```
+
+进入到工程目录并输入以下命令：
+
+#### **yarn**
+
+```bash
+yarn add @react-native-community/netinfo@npm:@react-native-oh-library/netinfo
+```
+
+#### **npm**
+
+```bash
+npm install @react-native-community/netinfo@npm:@react-native-oh-library/netinfo
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React from "react";
+import { View, Text } from "react-native";
+import NetInfo, { useNetInfo } from "@react-native-community/netinfo";
+
+const App = () => {
+ const [fetchInfo, setFetchInfo] = React.useState("");
+ const [refreshInfo, setRefreshInfo] = React.useState("");
+ const netInfo = useNetInfo();
+
+ NetInfo.fetch().then((state) => {
+ setFetchInfo(JSON.stringify(state));
+ });
+ NetInfo.refresh().then((state) => {
+ setRefreshInfo(JSON.stringify(state));
+ });
+
+ return (
+
+ Type: {netInfo.type}
+ Is Connected? {netInfo.isConnected?.toString()}
+ fetch():
+ {fetchInfo}
+ refresh():
+ {refreshInfo}
+
+ );
+};
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-netinfo": "file:../../node_modules/@react-native-community/netinfo/harmony/netinfo.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-netinfo": "file:../../node_modules/@react-native-community/netinfo/harmony/netinfo"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 RNCNetInfoPackage
+
+打开 `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-netinfo/src/main/cpp" ./netinfo)
+# 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_netinfo)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "RNCNetInfoPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 NetInfoPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+import type {RNPackageContext, RNPackage} from 'rnoh/ts';
+import {SamplePackage} from 'rnoh-sample-package/ts';
++ import {NetInfoPackage} from 'rnoh-netinfo/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new NetInfoPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/netinfo Releases](https://github.com/react-native-oh-library/react-native-netinfo/releases)
+
+## 属性
+
+#### NetInfoStateType
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------- | ---------------------------------------------------------- | ------ | -------- | ------------ | -------- |
+| `none` | No network connection is active | String | no | All | yes |
+| `unknown` | The network state could not or has yet to be be determined | String | no | All | yes |
+| `cellular` | Active network over cellular | String | no | All | no |
+| `wifi` | Active network over Wifi | String | no | All | yes |
+| `bluetooth` | Active network over Bluetooth | String | no | Android, Web | no |
+| `ethernet` | Active network over wired ethernet | String | no | All | no |
+| `wimax` | Active network over WiMax | String | no | Android, Web | no |
+| `vpn` | Active network over VPN | String | no | Android | no |
+| `other` | Active network over another type of network | String | no | All | no |
+
+#### NetInfoCellularGeneration
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------ | ----------------------------------------------------------------------------------------------------------------- | ------ | -------- | --------------------- | -------- |
+| `null` | Either we are not currently connected to a cellular network or type could not be determined | String | no | Android, iOS, Windows | no |
+| `2g` | Currently connected to a 2G cellular network. Includes CDMA, EDGE, GPRS, and IDEN type connections | String | no | Android, iOS, Windows | no |
+| `3g` | Currently connected to a 3G cellular network. Includes EHRPD, EVDO, HSPA, HSUPA, HSDPA, and UTMS type connections | String | no | Android, iOS, Windows | no |
+| `4g` | Currently connected to a 4G cellular network. Includes HSPAP and LTE type connections | String | no | Android, iOS, Windows | no |
+| `5g` | Currently connected to a 5G cellular network. Includes NRNSA (iOS only) and NR type connections | String | no | Android, iOS, Windows | no |
+
+#### NetInfoState
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | -------- |
+| `type` | The type of the current connection. | NetInfoStateType | yes | All | yes |
+| `isConnected` | If there is an active network connection. Defaults to null on most platforms for unknown networks. Note: Web browsers report network type unknown for many otherwise valid networks (https://caniuse.com/netinfo), so isConnected may be true or false and represent a real connection status even for unknown network types in certain cases. | boolean, null | yes | All | yes |
+| `isInternetReachable` | If the internet is reachable with the currently active network connection. If unknown defaults to null | boolean, null | yes | All | yes |
+| `isWifiEnabled` | (Android only) Whether the device's WiFi is ON or OFF. | boolean | yes | All | yes |
+| `details` | The value depends on the type value. See below. | | yes | All | yes |
+
+### Details
+
+#### Type is none or unknown
+
+`details` is `null`.
+
+#### Type is wifi
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ---------------------------------- | -------- |
+| `isConnectionExpensive` | If the network connection is considered "expensive". This could be in either energy or monetary terms. | boolean | yes | All | yes |
+| `ssid` | The SSID of the network. May not be present, null, or an empty string if it cannot be determined. On iOS, your app must meet at least one of the following requirements and you must set the shouldFetchWiFiSSID configuration option or no attempt will be made to fetch the SSID. On Android, you need to have the ACCESS_FINE_LOCATION permission in your AndroidManifest.xml and accepted by the user. | string | yes | Android, iOS (not tvOS), Windows | yes |
+| `bssid` | The BSSID of the network. May not be present, null, or an empty string if it cannot be determined. On iOS, make sure your app meets at least one of the following requirements. On Android, you need to have the ACCESS_FINE_LOCATION permission in your AndroidManifest.xml and accepted by the user. | string | yes | Android, iOS (not tvOS), Windows\* | yes |
+| `strength` | An integer number from 0 to 100 for the signal strength. May not be present if the signal strength cannot be determined. | number | yes | Android, Windows | yes |
+| `ipAddress` | The external IP address. Can be in IPv4 or IPv6 format. May not be present if it cannot be determined. | string | yes | Android, iOS, macOS, Windows | yes |
+| `subnet` | The subnet mask in IPv4 format. May not be present if it cannot be determined. | string | yes | Android, iOS, macOS | yes |
+| `frequency` | Network frequency. Example: For 2.4 GHz networks, the method will return 2457. May not be present if it cannot be determined. | number | yes | Android, Windows\* | yes |
+| `linkSpeed` | The link speed in Mbps. | number | yes | Android | yes |
+| `rxLinkSpeed` | The current receive link speed in Mbps. | number | yes | Android | yes |
+| `txLinkSpeed` | The current transmit link speed in Mbps. | number | yes | Android | yes |
+
+#### Type is cellular
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------- | :-----------------------: | :------: | :-------------------: | :------: |
+| `isConnectionExpensive` | If the network connection is considered "expensive". This could be in either energy or monetary terms. | boolean | yes | All | no |
+| `cellularGeneration` | The generation of the cell network the user is connected to. This can give an indication of speed, but no guarantees. | NetInfoCellularGeneration | yes | Android, iOS, Windows | no |
+| `carrier` | The network carrier name. May not be present or may be empty if none can be determined. | +string | yes | Android, iOS | no |
+
+#### Type is bluetooth, ethernet, wimax, vpn, or other
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------------------- | ------------------------------------------------------------------------------------------------------ | :-----: | :------: | :------: | :------: |
+| `isConnectionExpensive` | If the network connection is considered "expensive". This could be in either energy or monetary terms. | boolean | yes | All | no |
+
+## 静态方法
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: | :------: | :------: | :------: |
+| `fetch()` | Returns a Promise that resolves to a NetInfoState object. | function | yes | All | yes |
+| `refresh()` | Updates NetInfo's internal state, then returns a Promise that resolves to a NetInfoState object. This is similar to fetch(), but really only useful on platforms that do not supply internet reachability natively. For example, you can use it to immediately re-run an internet reachability test if a network request fails unexpectedly. | function | yes | All | yes |
+| `addEventListener()` | Subscribe to connection information. The callback is called with a parameter of type NetInfoState whenever the connection state changes. Your listener will be called with the latest information soon after you subscribe and then with any subsequent changes afterwards. You should not assume that the listener is called in the same way across devices or platforms. | function | yes | All | yes |
+| `useNetInfo()` | A React Hook which can be used to get access to the latest state from the global instance. It returns a hook with the NetInfoState type. | function | yes | All | yes |
+| `useNetInfoInstance()` | A React Hook which can be used to create and manage an isolated instance of a network manager class. It returns a refresh function and the current NetInfoState. | function | yes | All | no |
+
+## 遗留问题
+
+- 新版本 useNetInfoInstance 暂未适配验证，涉及非 wifi 环境下的接口属性未适配
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-netinfo/react-native-netinfo/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/1224/react-native-pager-view.md b/1224/react-native-pager-view.md
new file mode 100644
index 00000000..24da3d97
--- /dev/null
+++ b/1224/react-native-pager-view.md
@@ -0,0 +1,234 @@
+> 模板版本：v0.1.2
+
+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-qrcode-svg)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+```bash
+yarn add @react-native-oh-tpl/react-native-qrcode-svg
+```
+
+或者
+
+```bash
+npm install @react-native-oh-tpl/react-native-qrcode-svg
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import QRCode from 'react-native-qrcode-svg';
+
+// Simple usage, defaults for all but the value
+render() {
+ return (
+
+ );
+};
+```
+
+## Link
+
+本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。
+
+如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg.md#link)进行引入
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-qrcode-svg Releases](https://github.com/react-native-oh-library/react-native-qrcode-svg/releases)
+
+## 属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- |
+| `size` | Size of rendered image in pixels | number | No | All | yes |
+| `value` | String Value of the QR code | string | yes | All | yes |
+| `color` | Color of the QR code | string | No | All | yes |
+| `backgroundColor` | Color of the background | string | No | All | yes |
+| `enableLinearGradient` | enables or disables linear gradient | boolean | No | All | no |
+| `linearGradient` | array of 2 rgb colors used to create the linear gradient | string[] | No | All | no |
+| `gradientDirection` | the direction of the linear gradient | string | No | All | no |
+| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | object | No | All | yes |
+| `logoSize` | Size of the imprinted logo. Bigger logo = less error correction in QR code | number | No | All | yes |
+| `logoBackgroundColor` | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop. | string | No | All | yes |
+| `logoMargin` | logo's distance to its wrapper | number | No | All | yes |
+| `logoBorderRadius` | the border-radius of logo image (Android is not supported) | number | No | ios | no |
+| `quietZone` | quiet zone around the qr in pixels (useful when saving image to gallery) | number | No | All | yes 见遗留问题 |
+| `getRef` | Get SVG ref for further usage | callback | No | All | 不涉及 |
+| `ecl` | Error correction level | string | No | All | yes |
+| `onError(error)` | Callback fired when exception happened during the code generating process | callback | No | All | 不涉及 |
+
+## 遗留问题
+
+- [ ] 当 quietZone 属性为非 0 值时，二维码显示不居中
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/awesomejerry/react-native-qrcode-svg/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/1224/react-native-safe-area-context.md b/1224/react-native-safe-area-context.md
new file mode 100644
index 00000000..24857050
--- /dev/null
+++ b/1224/react-native-safe-area-context.md
@@ -0,0 +1,270 @@
+> 模板版本：v0.1.1
+
+
+
+> [!tip] [Github 地址](https://github.com/Flipkart/recyclerlistview)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **yarn**
+
+```bash
+yarn add recyclerlistview
+```
+
+#### **npm**
+
+```bash
+npm install recyclerlistview
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React, { Component } from "react";
+import { View, Text, Dimensions } from "react-native";
+import {
+ RecyclerListView,
+ DataProvider,
+ LayoutProvider,
+} from "recyclerlistview";
+
+const ViewTypes = {
+ FULL: 0,
+ HALF_LEFT: 1,
+ HALF_RIGHT: 2,
+};
+
+let containerCount = 0;
+
+class CellContainer extends React.Component {
+ constructor(args) {
+ super(args);
+ this._containerId = containerCount++;
+ }
+ render() {
+ return (
+
+ {this.props.children}
+ Cell Id: {this._containerId}
+
+ );
+ }
+}
+
+export default class RecycleTestComponent extends React.Component {
+ constructor(args) {
+ super(args);
+
+ let { width } = Dimensions.get("window");
+
+ let dataProvider = new DataProvider((r1, r2) => {
+ return r1 !== r2;
+ });
+
+ this._layoutProvider = new LayoutProvider(
+ (index) => {
+ if (index % 3 === 0) {
+ return ViewTypes.FULL;
+ } else if (index % 3 === 1) {
+ return ViewTypes.HALF_LEFT;
+ } else {
+ return ViewTypes.HALF_RIGHT;
+ }
+ },
+ (type, dim) => {
+ switch (type) {
+ case ViewTypes.HALF_LEFT:
+ dim.width = width / 2;
+ dim.height = 160;
+ break;
+ case ViewTypes.HALF_RIGHT:
+ dim.width = width / 2;
+ dim.height = 160;
+ break;
+ case ViewTypes.FULL:
+ dim.width = width;
+ dim.height = 140;
+ break;
+ default:
+ dim.width = 0;
+ dim.height = 0;
+ }
+ }
+ );
+
+ this._rowRenderer = this._rowRenderer.bind(this);
+
+ this.state = {
+ dataProvider: dataProvider.cloneWithRows(this._generateArray(300)),
+ };
+ }
+
+ _generateArray(n) {
+ let arr = new Array(n);
+ for (let i = 0; i < n; i++) {
+ arr[i] = i;
+ }
+ return arr;
+ }
+
+ _rowRenderer(type, data) {
+ switch (type) {
+ case ViewTypes.HALF_LEFT:
+ return (
+
+ Data: {data}
+
+ );
+ case ViewTypes.HALF_RIGHT:
+ return (
+
+ Data: {data}
+
+ );
+ case ViewTypes.FULL:
+ return (
+
+ Data: {data}
+
+ );
+ default:
+ return null;
+ }
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
+const styles = {
+ container: {
+ justifyContent: "space-around",
+ alignItems: "center",
+ flex: 1,
+ backgroundColor: "#00a1f1",
+ },
+ containerGridLeft: {
+ justifyContent: "space-around",
+ alignItems: "center",
+ flex: 1,
+ backgroundColor: "#ffbb00",
+ },
+ containerGridRight: {
+ justifyContent: "space-around",
+ alignItems: "center",
+ flex: 1,
+ backgroundColor: "#7cbb00",
+ },
+};
+```
+
+## 约束与限制
+
+### 兼容性
+
+在下述版本验证通过:
+
+1. IDE: Deveco Studio 4.1.3.412;SDK: OpenHarmony (Api11) 4.1.0.53;测试设备: Mate40 Pro (NOH-AN00);ROM: 2.0.0.52(SP22C00E52R1P17log);RNOH: 0.72.11;
+
+## 属性
+
+详情见 [RecyclerListView 源库地址](https://github.com/Flipkart/recyclerlistview)
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | -------- | -------- | ----------------- |
+| layoutProvider | Constructor function that defines the layout (height / width) of each element | BaseLayoutProvider | Yes | All | Yes |
+| dataProvider | Constructor function the defines the data for each element | DataProvider | Yes | All | Yes |
+| contextProvider | Used to maintain scroll position in case view gets destroyed, which often happens with back navigation | ContextProvider | No | All | No |
+| rowRenderer | Method that returns react component to be rendered. You get the type, data, index and extendedState of the view in the callback | (type: string \| number, data: any, index: number) => JSX.Element \| JSX.Element[] \| null | Yes | All | Yes |
+| initialOffset | Initial offset you want to start rendering from; This is very useful if you want to maintain scroll context across pages. | number | No | All | Yes |
+| renderAheadOffset | specify how many pixels in advance you want views to be rendered. Increasing this value can help reduce blanks (if any). However, keeping this as low as possible should be the intent. Higher values also increase re-render compute | number | No | All | Yes |
+| isHorizontal | If true, the list will operate horizontally rather than vertically | boolean | No | All | Yes |
+| onScroll | On scroll callback function that executes as a user scrolls | rawEvent: ScrollEvent, offsetX: number, offsetY: number) => void | No | All | Yes |
+| onRecreate | callback function that gets executed when recreating the recycler view from context provider | (params: OnRecreateParams) => void | No | All | No |
+| externalScrollView | Use this to pass your on implementation of BaseScrollView | { new (props: ScrollViewDefaultProps): BaseScrollView } | No | All | No |
+| onEndReached | Callback function executed when the end of the view is hit (minus onEndThreshold if defined) | () => void | No | All | Yes |
+| onEndReachedThreshold | Specify how many pixels in advance for the onEndReached callback | number | No | All | Yes |
+| onEndReachedThresholdRelative | Specify how far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback | number | No | All | Yes |
+| onVisibleIndicesChanged | Provides visible index; helpful in sending impression events | TOnItemStatusChanged | No | All | Yes |
+| onVisibleIndexesChanged | (Deprecated in 2.0 beta) Provides visible index; helpful in sending impression events | TOnItemStatusChanged | No | All | No |
+| renderFooter | Provide this method if you want to render a footer. Helpful in showing a loader while doing incremental loads | () => JSX.Element \| JSX.Element[] \| null | No | All | Yes |
+| initialRenderIndex | Specify the initial item index you want rendering to start from. Preferred over initialOffset if both specified | number | No | All | yes |
+| scrollThrottle | iOS only; Scroll throttle duration | number | No | All | No |
+| canChangeSize | Specify if size can change | boolean | No | All | No |
+| distanceFromWindow | (Depricated) Use applyWindowCorrection() API with windowShift. | number | No | All | No |
+| applyWindowCorrection | (Enhancement/replacement to distanceFromWindow API) Allows updation of the visible windowBounds to based on correctional values passed. User can specify windowShift; in case entire RecyclerListWindow needs to shift down/up, startCorrection; in case when top window bound needs to be shifted for e.x. top window bound to be shifted down is a content overlapping the top edge of RecyclerListView, endCorrection: to alter bottom window bound for a similar use-case. | (offset: number, windowCorrection: WindowCorrection) => void | No | All | Yes |
+| useWindowScroll | Web only; Layout Elements in window instead of a scrollable div | boolean | No | All | No |
+| disableRecycling | Turns off recycling | boolean | No | All | Yes |
+| forceNonDeterministicRendering | Default is false; if enabled dimensions provided in layout provider will not be strictly enforced. Use this if item dimensions cannot be accurately determined | boolean | No | All | Yes |
+| extendedState | In some cases the data passed at row level may not contain all the info that the item depends upon, you can keep all other info outside and pass it down via this prop. Changing this object will cause everything to re-render. Make sure you don't change it often to ensure performance. Re-renders are heavy. | object | No | All | No |
+| itemAnimator | Enables animating RecyclerListView item cells (shift, add, remove, etc) | ItemAnimator | No | All | No |
+| style | To pass down style to inner ScrollView | object | No | All | Yes |
+| scrollViewProps | For all props that need to be proxied to inner/external scrollview. Put them in an object and they'll be spread and passed down. | object | No | All | Yes |
+| layoutSize | Will prevent the initial empty render required to compute the size of the listview and use these dimensions to render list items in the first render itself. This is useful for cases such as server side rendering. The prop canChangeSize has to be set to true if the size can be changed after rendering. Note that this is not the scroll view size and is used solely for layouting. | Dimension | No | All | Yes |
+| onItemLayout | A callback function that is executed when an item of the recyclerListView (at an index) has been layout. This can also be used as a proxy to itemsRendered kind of callbacks. | number | No | All | Yes |
+| windowCorrectionConfig | Used to specify is window correction config and whether it should be applied to some scroll events | object | No | All | Yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [Apache License 2.0](https://github.com/Flipkart/recyclerlistview/blob/master/LICENSE.md) ，请自由地享受和参与开源。
diff --git a/1224/rn-placeholder.md b/1224/rn-placeholder.md
new file mode 100644
index 00000000..fa41c40a
--- /dev/null
+++ b/1224/rn-placeholder.md
@@ -0,0 +1,123 @@
+> 模板版本：v0.1.2
+
+
+
+> [!tip] [Github 地址](https://github.com/mfrachet/rn-placeholder)
+
+## 安装与使用
+
+> [!tip] 因原作者未发布最新的组件版本到 npm 仓，如果 package.json 中 peerDependencies 依赖 react 版本与项目 react 版本不一致会产生依赖冲突。npm 安装需要引入--legacy-peer-deps 标志绕过 peerDependencies 自动安装
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **yarn**
+
+```bash
+yarn add rn-placeholder
+```
+
+#### **npm**
+
+```bash
+npm install rn-placeholder
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import {
+ Placeholder,
+ PlaceholderMedia,
+ PlaceholderLine,
+ Fade,
+} from "rn-placeholder";
+
+const App = () => (
+
+
+
+
+
+);
+```
+
+## 约束与限制
+
+### 兼容性
+
+在下述版本验证通过:
+
+1. IDE: Deveco Studio 4.1.3.412;SDK: OpenHarmony (Api11) 4.1.0.53;测试设备: Mate40 Pro (NOH-AN00);ROM: 2.0.0.52(SP22C00E52R1P17log);RNOH: 0.72.11;
+
+## 属性
+
+详情见 [Placeholder 源库地址](https://github.com/mfrachet/rn-placeholder)
+
+**组件 Placeholder**
+
+It's the wrapper around all of the other components. Using alone will not produce anything interesting. You have put some line or media inside to make it powerful.It accepts all the props of a React Native View plus:
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| --------- | --------------------------------------------------- | ------------- | -------- | -------- | -------- |
+| Animation | An optional component that animates the placeholder | Animations | no | All | Yes |
+| Left | An optional component to display on the left | ComponentType | no | All | Yes |
+| Right | An optional component to display on the right | ComponentType | no | All | Yes |
+
+**_Animations_**
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| --------- | -------------------------------------------------- | ------------- | -------- | -------- | -------- |
+| Fade | This is the base animation that makes the placeholder become clearer on a specified interval| ComponentType | no | All | Yes |
+| ShineOverlay | This applies a tiny overlay from left to right of the placeholder. It's pretty neat but it has the drawback to only work without style customization: only on white background with gray lines |ComponentType| no | All | Yes |
+| Shine | The shine animation is an attempt to overcome the overlay problem of the ShineOverlay animation by animating only the differnt part of the placeholder | ComponentType | no | All | Yes |
+| Loader | A simple placeholder animation based on the standard loader (ActivityIndicator) of each platforms | ComponentType | no | All | Yes |
+| Progressive | I'm feel a bit guilty about that but I've stolen the idea from a design system and I can't remember which one. But I like the way it behaves | ComponentType | no | All | Yes |
+| Tweaking existing animations | It's possible to tweak a specific animation by passing it additional props. However keep in mind that it's important to spread the props from the Animation render function. Else you will be in strange behaviors| ComponentType | no | All | Yes |
+
+**组件 PlaceholderLine**
+
+A PlaceholderLine is one of the two basic and visual components of a placeholder.
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| -------- | ---------------------------------------------------------------------- | ------- | -------- | -------- | -------- |
+| height | The line height, default is 12 | number | no | All | Yes |
+| color | The line color, default is #efefef | string | no | All | Yes |
+| width | The line width in percent, default is 100(%) | number | no | All | Yes |
+| noMargin | Defines if a line should have a margin bottom or not, default is false | boolean | no | All | Yes |
+| style | Customize the style of the underlying View component | object | no | All | Yes |
+
+**组件 PlaceholderMedia**
+
+A PlaceholderMedia is the second of the two basic and visual components of a placeholder. It can be used a single placeholder like following:
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------- | -------------------------------------------------------- | ------- | -------- | -------- | -------- |
+| size | The media size (height / width), default is 40 | number | no | All | Yes |
+| isRound | Defines if the media is rounded or not, default is false | boolean | no | All | Yes |
+| color | The media color, default is #efefef | string | no | All | Yes |
+| style | Customize the style of the underlying View component | object | no | All | Yes |
+
+## 遗留问题
+
+- [ ] package.json 中 peerDependencies 依赖 react 版本与项目 react 版本不一致会产生依赖冲突，此问题只会导致 npm 安装依赖报错，不对组件功能造成影响。源库此问题 issues: [issue#226](https://github.com/mfrachet/rn-placeholder/issues/226)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/mfrachet/rn-placeholder/blob/master/LICENSE.md) ，请自由地享受和参与开源。
diff --git a/1224/rn-section-list-get-item-layout.md b/1224/rn-section-list-get-item-layout.md
new file mode 100644
index 00000000..8787d393
--- /dev/null
+++ b/1224/rn-section-list-get-item-layout.md
@@ -0,0 +1,87 @@
+> 模板版本：v0.1.2
+
+
+
+> [!tip] [Github 地址](https://github.com/styled-components/styled-components)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+#### **yarn**
+
+```bash
+yarn add styled-components
+```
+
+
+
+#### **npm**
+
+```bash
+npm install styled-components
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React from "react";
+
+import styled from "styled-components";
+
+// Create a react component that renders an <h1> which is
+// centered, palevioletred and sized at 1.5em
+const Title = styled.h1`
+ font-size: 1.5em;
+ text-align: center;
+ color: palevioletred;
+`;
+
+// Create a <Wrapper> react component that renders a <section> with
+// some padding and a papayawhip background
+const Wrapper = styled.section`
+ padding: 4em;
+ background: papayawhip;
+`;
+
+function MyUI() {
+ return (
+ // Use them like any other React component – except they're styled!
+ <Wrapper>
+ <Title>Hello World, this is my first styled component!
+
+ );
+}
+```
+
+## 约束与限制
+
+### 兼容性
+
+在下述版本验证通过：
+
+1. IDE：DevEco Studio 4.1.3.412;SDK：OpenHarmony(api11) 4.1.0.53;测试设备：Mate40 Pro(NOH-AN00);ROM：2.0.0.52(SP22C00E52R1P17log);RNOH：0.72.11
+
+## 属性
+
+详情见 [styled-components 源库地址](https://github.com/styled-components/styled-components)
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- | -------- | -------- |
+| ThemeProvider | A helper component for theming. | component | No | / | Yes |
+| css | The css prop is a convenient way to iterate on your components without settling on fixed component boundaries yet | prop | No | / | Yes |
+| toStyleSheet | convert a style object to a stylesheet object | function | No | / | Yes |
+| ThemeContext | access the theme object and pass the theme object to the style component | jsx component | No | / | Yes |
+| isStyledComponent | A utility to help identify styled components. | function | No | / | Yes |
+| withTheme | This is a higher order component factory to get the current theme from a ThemeProvider and pass it to your component as a theme prop. | function | No | / | Yes |
+| useTheme | This is a custom hook to get the current theme from a ThemeProvider. | function | No | / | Yes |
+| ThemeConsumer | It passes the current theme (based on a ThemeProvider higher in your component tree) as an argument to the child function. From this function, you may return further JSX or nothing. | jsx component | No | / | Yes |
+| createGlobalstyle | A helper function to generate a special StyledComponent that handles global styles | function | No | Web | No |
+| keyframes | A helper method to create keyframes for animations. | function | No | Web | No |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/styled-components/styled-components/blob/main/LICENSE) ，请自由地享受和参与开源。
diff --git a/1224/styled-system.md b/1224/styled-system.md
new file mode 100644
index 00000000..a1bec357
--- /dev/null
+++ b/1224/styled-system.md
@@ -0,0 +1,217 @@
+> 模板版本：v0.1.2
+
+
+
+
+ 
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+