diff --git a/_navbar.md b/_navbar.md
index 3b115bb15cbfb4519b4b7bdce9c9dcc97368da6d..48da9944b7daa72d6e38a53c035b92d22e0b709e 100644
--- a/_navbar.md
+++ b/_navbar.md
@@ -1,15 +1,12 @@
-* 相关链接
- * [文档Gitee地址](https://gitee.com/react-native-oh-library/usage-docs/tree/master)
- * [RNOH三方库源码](https://github.com/orgs/react-native-oh-library/repositories)
- * [RNOH框架源码](https://github.com/react-native-openharmony/rnoh)
- * [OpenHarmony应用开发](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/application-dev-guide.md/)
- * [Docsify](https://docsify.js.org/#/)
-
-
-* 语言
- * [中文](/zh-cn/)
- * [En(待完善)](/zh-en/)
-
-
\ No newline at end of file
+- 相关链接
+ - [文档 Gitee 地址](https://gitee.com/react-native-oh-library/usage-docs/tree/master)
+ - [RNOH 三方库源码](https://github.com/orgs/react-native-oh-library/repositories)
+ - [RNOH 框架源码](https://github.com/react-native-openharmony/rnoh)
+ - [OpenHarmony 应用开发](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/application-dev-guide.md/)
+ - [Docsify](https://docsify.js.org/#/)
+- 版本
+ - [中文](/zh-cn/)
+ - [En(待完善)](/zh-en/)
+ - [VMall](/vmall/)
diff --git a/vmall/README.md b/vmall/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..fd3e2d8f74a923990cd1840a00f9a714ef51a9bd
--- /dev/null
+++ b/vmall/README.md
@@ -0,0 +1,37 @@
+# 简介
+
+> 欢迎开始 React-Native 的旅程！如果你在找如何搭建环境的文档，请移步开发文档的[搭建开发环境](https://react-native-oh-library.gitee.io/docs/#/zh-cn/environment)章节。
+
+## 概述
+
+该文档旨在帮助开发者在 OpenHarmony 平台使用 React Native OpenHarmony 的第三方库，并呈现每个三方库的信息。
+
+## RNOH 三方库总览 (VMall)
+
+> [!tip] NPM 公仓坐标：@react-native-oh-tpl
+
+| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | Releases | 文档链接 |
+| :--: | :----: | :----------: | :----------------: | :--------: | :------: | :------: |
+| 1 | [@react-native-community/datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker) | x | x | x | [@react-native-oh-tpl/datetimepicker](https://github.com/react-native-oh-library/datetimepicker) | [链接](vmall/datetimepicker.md) |
+| 2 | [@shopify/flash-list](https://github.com/Shopify/flash-list) | 1.6.3 | 否 | 80% | [@react-native-oh-tpl/flash-list](https://github.com/react-native-oh-library/flash-list/tree/harmony) | [链接](vmall/flash-list.md) |
+| 3 | [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) | 6.4.1 | 是 | 50% | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](vmall/lottie-react-native.md) |
+| 4 | [react-native-exception-handler](https://github.com/a7ul/react-native-exception-handler) | 2.10.10 | 否 | 100% | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](vmall/react-native-exception-handler.md) |
+| 5 | [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](vmall/react-native-fast-image.md) |
+| 6 | [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) | 2.12.1 | 是 | 50% | [@react-native-oh-tpl/react-native-gesture-handler](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) | [链接](vmall/react-native-gesture-handler.md) |
+| 7 | [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) | 7.0.3 | 是 | 50% | [@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/react-native-image-picker/releases) | [链接](vmall/react-native-image-picker.md) |
+| 8 | [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](vmall/react-native-linear-gradient.md) |
+| 9 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | 90% | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](vmall/react-native-masked-view.md) |
+| 10 | [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) | 11.1.0 | 是 | 70% | [@react-native-oh-library/netinfo](https://github.com/react-native-oh-library/react-native-netinfo/releases) | [链接](vmall/react-native-netinfo.md) |
+| 11 | [react-native-pager-view](https://github.com/callstack/react-native-pager-view) | 6.2.2 | 是 | 100% | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](vmall/react-native-pager-view.md) |
+| 12 | [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) | 4.7.4 | 是 |100% | [@react-native-oh-tpl/react-native-safe-area-context](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | [链接](vmall/react-native-safe-area-context.md) |
+| 13 | [react-native-screens](https://github.com/software-mansion/react-native-screens) | 3.29.0 | 是 | 0% | [react-native-screens](https://github.com/software-mansion/react-native-screens/releases) | [链接](vmall/react-native-screens.md) |
+| 14 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) |
+| 15 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](zh-cn/react-native-svg.md) |
+| 16 | [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/6.x/packages/react-native-tab-view) | 3.5.2 | - | 100% | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](zh-cn/react-native-tab-view.md) |
+| 17 | [react-native-video](https://github.com/react-native-video/react-native-video) | 5.2.1 | 是 | x | [@react-native-oh-tpl/react-native-video](https://github.com/react-native-oh-library/react-native-video) | [链接](vmall/react-native-video.md) |
+| 18 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](vmall/react-native-webview.md) |
+| 19 | [@react-navigation/elements](https://github.com/react-navigation/react-navigation/tree/6.x/packages/elements) | 1.3.21 | - | 100% | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](vmall/react-navigation-elements.md) |
+
+## 社区
+
+[Github Organization: react-native-oh-library](https://github.com/react-native-oh-library)
diff --git a/vmall/_coverpage.md b/vmall/_coverpage.md
new file mode 100644
index 0000000000000000000000000000000000000000..ba18330e2b8e52e2d76970525e4bb4de6274fe70
--- /dev/null
+++ b/vmall/_coverpage.md
@@ -0,0 +1,11 @@
+
+
+
+
+# React Native OpenHarmony 三方库说明文档
+
+> OpenHarmony 平台的 React Native 三方库使用和说明
+
+[Gitee](https://gitee.com/react-native-oh-library/usage-docs)
+[GitHub（待完善）]()
+[快速开始](/zh-cn/README.md)
diff --git a/vmall/_sidebar.md b/vmall/_sidebar.md
new file mode 100644
index 0000000000000000000000000000000000000000..554067e1a01579c74960c318e66c48fd42a15c77
--- /dev/null
+++ b/vmall/_sidebar.md
@@ -0,0 +1,27 @@
+
+
+- [首页](vmall/README.md)
+
+- [文档模板](vmall/model.md)
+
+- 三方库说明文档合集（VMall 版本）
+
+ - [@react-native-community/datetimepicker](vmall/datetimepicker.md)
+ - [lottie-react-native](vmall/lottie-react-native.md)
+ - [react-native-exception-handler](vmall/react-native-exception-handler.md)
+ - [react-native-fast-image](vmall/react-native-fast-image.md)
+ - [react-native-gesture-handler]()
+ - [react-native-image-picker](vmall/react-native-image-picker.md)
+ - [react-native-linear-gradient](vmall/react-native-linear-gradient.md)
+ - [@react-native-masked-view/masked-view](vmall/react-native-masked-view.md)
+ - [@react-native-community/netinfo](vmall/react-native-netinfo.md)
+ - [react-native-pager-view](vmall/react-native-pager-view.md)
+ - [react-native-safe-area-context](vmall/react-native-safe-area-context.md)
+ - [react-native-screens](vmall/react-native-screens.md)
+ - [react-native-SmartRefreshLayout](vmall/react-native-SmartRefreshLayout.md)
+ - [react-native-svg](vmall/react-native-svg.md)
+ - [react-native-tab-view](vmall/react-native-tab-view.md)
+ - [react-native-video](vmall/react-native-video.md)
+ - [react-native-webview](vmall/react-native-webview.md)
+ - [@react-navigation/elements](vmall/react-navigation-elements.md)
+ - [react-navigation](vmall/react-navigation.md)
diff --git a/vmall/datetimepicker.md b/vmall/datetimepicker.md
new file mode 100644
index 0000000000000000000000000000000000000000..a7db105d35f717a7aff9df2f26ba8518b07318c6
--- /dev/null
+++ b/vmall/datetimepicker.md
@@ -0,0 +1,262 @@
+> 模板版本：v0.0.1
+
+
+
@react-native-community/datetimepicker
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/datetimepicker/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+export const App = () => {
+ const [date, setDate] = useState(new Date(1598051730000));
+ const [mode, setMode] = useState('date');
+ const [show, setShow] = useState(false);
+
+ const onChange = (event, selectedDate) => {
+ const currentDate = selectedDate;
+ setShow(false);
+ setDate(currentDate);
+ };
+
+ const showMode = (currentMode) => {
+ setShow(true);
+ setMode(currentMode);
+ };
+
+ const showDatepicker = () => {
+ showMode('date');
+ };
+
+ const showTimepicker = () => {
+ showMode('time');
+ };
+
+ return (
+
+ selected: {date.toLocaleString()}
+ {show && (
+ > PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 DateTimePicker 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { RNDateTimePicker, DATETIME_PICKER_VIEW_TYPE } from "rnoh-datetimepicker"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === DATETIME_PICKER_VIEW_TYPE) {
++ RNDateTimePicker({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+}
+...
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[<@react-native-oh-library/datetimepicker> Releases](https://github.com/react-native-oh-library/datetimepicker/releases/tag/7.6.2-0.0.2)
+
+## 属性
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------- | ------------------------------------------------------------------------- | -------- | -------- | ------------------------ | ---------------------------------------------------------- |
+| mode | Defines the type of the picker | string | 否 | All | partially (仅支持 date/time 模式) |
+| style | Sets style directly on picker component. | object | 否 | IOS only | yes |
+| display | Defines the visual display of the picker. The default value is "default". | string | 否 | All | partially (支持"default"，"spinner"，"compact"，"inline") |
+| onChange | Date change handler. | function | 否 | All | partially (仅支持 type 为 set 类型) |
+| value | Defines the date or time value used in the component. | Date | 是 | All | partially (仅 mode=date 且 display=spinner 时支持动态设置) |
+| is24Hour | Allows changing of the time picker to a 24-hour format. | bool | 否 | Windows and Android only | yes |
+| maximumDate | Defines the maximum date that can be selected | Date | 否 | All | partially (仅支持在 mode=date 且 display=spinner 时设置) |
+| minimumDate | Defines the minimum date that can be selected. | Date | 否 | All | partially (仅支持在 mode=date 且 display=spinner 时设置) |
+| disabled | If true, the user won't be able to interact with the view. | bool | 否 | IOS only | yes |
+| textColor | Allows changing of the textColor of the date picker. | string | 否 | IOS only | partially (仅支持在 mode=date 且 display=compact 时设置) |
+
+## 遗留问题
+
+- [ ] 部分接口，未适配
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/datetimepicker/blob/harmony/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/flash-list.md b/vmall/flash-list.md
new file mode 100644
index 0000000000000000000000000000000000000000..57db2e97867b6ae3fd5e52d4ec17f958c2f77c85
--- /dev/null
+++ b/vmall/flash-list.md
@@ -0,0 +1 @@
+404
\ No newline at end of file
diff --git a/vmall/lottie-react-native.md b/vmall/lottie-react-native.md
new file mode 100644
index 0000000000000000000000000000000000000000..a61b323bc23b1e1dc15f45414d0415210d329e0b
--- /dev/null
+++ b/vmall/lottie-react-native.md
@@ -0,0 +1,247 @@
+> 模板版本：v0.0.1
+
+
+
lottie-react-native
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/lottie-react-native/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React from "react";
+import LottieView from "lottie-react-native";
+
+export default function Animation() {
+ return (
+ > 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 {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { LottieAnimationView, LOTTIE_TYPE } from "rnoh-lottie"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === LOTTIE_TYPE) {
++ LottieAnimationView({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.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 | 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 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, 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)
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | -------- |
+| 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 |
+
+## 遗留问题
+
+- [ ] 部分涉及加速渲染的接口，未适配
+- [ ] 部分涉及 KeyPath 的接口，未适配
+
+## 其他
+
+## 开源协议
+
+本项目基于 [Apache License 2.0](https://github.com/lottie-react-native/lottie-react-native/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/model.md b/vmall/model.md
new file mode 100644
index 0000000000000000000000000000000000000000..c3623436f84479d523f449e88885ec8d29d8f156
--- /dev/null
+++ b/vmall/model.md
@@ -0,0 +1,282 @@
+# 文档模板(删除)
+
+> [!ATTENTION] 使用模板时请将后面带有 (删除) 的语句删除。(删除)
+
+> 模板版本：v0.1.1
+
+
+
<原库 npm 包名>
+
+
+
+
+
+
+
+
+>[!tip] [Github 地址](https://github.com/<源码仓地址>)
+
+如：[Github 地址](https://github.com/react-native-oh-library/react-native-linear-gradient)（删除）
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/
+// 提示：yarn add @react-native-oh-tpl/flash-list（删除）
+// 提示：yarn add @react-native-oh-tpl/react-native-linear-gradient（删除）
+```
+
+#### **npm**
+
+```bash
+npm install @react-native-oh-tpl/
+// 提示：npm install @react-native-oh-tpl/flash-list（删除）
+// 提示：npm install @react-native-oh-tpl/react-native-linear-gradient（删除）
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+// linear-gradient 为例
+import LinearGradient from "react-native-linear-gradient";
+
+// Within your render function
+
+ Sign in with Facebook
+ ;
+
+// Later on in your styles..
+var styles = StyleSheet.create({
+ linearGradient: {
+ flex: 1,
+ paddingLeft: 15,
+ paddingRight: 15,
+ borderRadius: 5,
+ },
+ buttonText: {
+ fontSize: 18,
+ fontFamily: "Gill Sans",
+ textAlign: "center",
+ margin: 10,
+ color: "#ffffff",
+ backgroundColor: "transparent",
+ },
+});
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-xxx": "file:../../node_modules/@react-native-oh-tpl//harmony/.har"
+ // 提示: (私仓)"rnoh-slider": "file:../../node_modules/@react-native-oh-tpl/slider/harmony/slider.har"（删除）
+ // 提示: （公仓）"rnoh-linear-gradient": "file:../../node_modules/@react-native-oh-tpl/react-native-linear-gradient/harmony/linear_gradient.har"（删除）
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-xxx": "file:../../node_modules/@react-native-oh-tpl//harmony/"
+ // 提示: (私仓)"rnoh-slider": "file:../../node_modules/@react-native-oh-tpl/slider/harmony/slider"（删除）
+ // 提示: （公仓）"rnoh-linear-gradient": "file:../../node_modules/@react-native-oh-tpl/react-native-linear-gradient/harmony/linear_gradient"（删除）
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 xxxPackge
+
+打开 `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-linear-gradient/src/main/cpp" ./linear-gradient)
+# 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_linear_gradient)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "LinearGradientPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+**提示：Fabric 组件**（删除）
+
+### 在 ArkTs 侧引入 xxx 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+...
++ import { RNLinearGradient, LINEAR_GRADIENT_TYPE, LinearGradientDescriptor } from "rnoh-linear-gradient"
+
+ @Builder
+ function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.componentName === LINEAR_GRADIENT_TYPE) {
++ RNLinearGradient({
++ ctx: ctx.rnohContext,
++ tag: ctx.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+ }
+ ...
+```
+
+**提示：TurboModule**（删除）
+
+### 在 ArkTs 侧引入 xxx Package
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+...
++ import {AsyncStoragePackage} from 'rnoh-async-storage/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new AsyncStoragePackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 约束与限制
+
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ Releases](https://github.com/<仓库地址>/releases)
+
+提示：[@react-native-oh-tpl/linear-gradient releases](https://github.com/react-native-oh-library/react-native-linear-gradient/releases)（删除）
+
+### 权限要求（如有）
+
+（填入相关权限配置）
+
+## 属性（如有）
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- | -------- |
+
+## 静态方法（如有）
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- | -------- |
+
+## API（如有，一般是 TurboModules）
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ---- | ---- | ---- | -------- | -------- | -------- |
+
+## 遗留问题
+
+- [ ] xxx 问题: [issue#\*\*\*](https://github.com/issue地址1)
+- [ ] yyy 问题: [issue#\*\*\*](https://github.com/issue地址2)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [XXX License (XXX)](https://github.com/xxx/xxx/blob/main/LICENSE.md) ，请自由地享受和参与开源。
+
+例子：本项目基于 [The MIT License (MIT)](https://github.com/callstack/react-native-slider/blob/main/LICENSE.md) ，请自由地享受和参与开源。(删除)
diff --git a/vmall/react-native-SmartRefreshLayout.md b/vmall/react-native-SmartRefreshLayout.md
new file mode 100644
index 0000000000000000000000000000000000000000..6d9f23230ac8011fea3ac196539b4484ff8c363c
--- /dev/null
+++ b/vmall/react-native-SmartRefreshLayout.md
@@ -0,0 +1,347 @@
+> 模板版本：v0.0.1
+
+
+
react-native-SmartRefreshLayout
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React, { useState } from "react";
+import {
+ View,
+ Text,
+ FlatList,
+ StyleSheet,
+ TouchableOpacity,
+} from "react-native";
+import {
+ SmartRefreshControl,
+ AnyHeader,
+} from "react-native-smartrefreshlayout";
+
+const App = () => {
+ const [text, setText] = useState("状态");
+ const [data, setData] = useState([
+ { id: 1, text: "Item 1" },
+ { id: 2, text: "Item 2" },
+ { id: 3, text: "Item 3" },
+ { id: 4, text: "Item 4" },
+ { id: 5, text: "Item 5" },
+ { id: 6, text: "Item 6" },
+ { id: 7, text: "Item 7" },
+ { id: 8, text: "Item 8" },
+ // ... more data ...
+ ]);
+
+ const renderItem = ({ item }) => (
+
+ {item.text}
+
+ );
+ let smartRefreshControlRef: React.RefObject;
+ return (
+
+ {
+ smartRefreshControlRef.finishRefresh({ delayed: -1, success: true });
+ }}
+ >
+
+ 点击完成刷新finish
+
+
+
+
+ {text}
+
+ (smartRefreshControlRef = ref)}
+ primaryColor={"#f3f3f3"}
+ headerHeight={66}
+ style={{ height: 500, width: "100%", backgroundColor: "#ffcc00" }}
+ onHeaderMoving={(e) => {
+ setText("onHeaderMoving" + JSON.stringify(e.nativeEvent));
+ }}
+ HeaderComponent={
+
+ 刷新头
+
+ }
+ >
+ item.id.toString()}
+ />
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ item: {
+ padding: 16,
+ width: "100%",
+ height: 100,
+ },
+});
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-smart-refresh-layout": "file:../../node_modules/react-native-smartrefreshlayout/harmony/smart_refresh_layout.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-smart-refresh-layout": "file:../../node_modules/react-native-smartrefreshlayout/harmony/smart_refresh_layout"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 SmartRefreshLayoutPackage
+
+打开 `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-smart-refresh-layout/src/main/cpp" ./smart-refresh-layout)
+# 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_smart_refresh_layout)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "SmartRefreshLayoutPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 SmartRefresh 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { SmartRefreshControl,SMART_REFRESH_CONTROL_TYPE ,ANY_HEADER_TYPE,RNCAnyHeader,DEFAULT_HEADER_TYPE,RNCDefaultHeader} from "rnoh-smart-refresh-layout"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type == SMART_REFRESH_CONTROL_TYPE){
++ SmartRefreshControl({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ } else if (ctx.descriptor.type == ANY_HEADER_TYPE){
++ RNCAnyHeader({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ } else if (ctx.descriptor.type == DEFAULT_HEADER_TYPE) {
++ RNCDefaultHeader({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+}
+...
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-smartrefreshlayout Releases](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases)
+
+## 属性
+
+**组件 SmartRefreshControl**
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| --------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------- | -------- | -------- |
+| `HeaderComponent` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element | No | Android | Yes |
+| `renderHeader` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element/func | No | Android | No |
+| `enableRefresh` | 是否启用下拉刷新,默认为 true | boolean | No | Android | No |
+| `headerHeight` | 设定 header 的高度 | number | No | Android | Yes |
+| `primaryColor` | 设置刷新组件的主调色 | string | No | Android | Yes |
+| `autoRefresh` | 是否自动刷新 | object:{refresh:boolean, time:number} | No | Android | No |
+| `pureScroll` | 是否启用纯滚动 | boolean | No | Android | No |
+| `overScrollBounce` | 是否启用越界拖动，类似 IOS 样式。 | boolean | No | Android | No |
+| `dragRate` | 设置组件下拉高度与手指真实下拉高度的比值,默认为 0.5。 | number | No | Android | No |
+| `maxDragRate` | 设置最大显示下拉高度与 header 标准高度的比值，默认为 2.0。 | number | No | Android | No |
+| `onPullDownToRefresh` | 可下拉刷新时触发 | function | No | Android | No |
+| `onReleaseToRefresh` | 可释放刷新时触发 | function | No | Android | No |
+| `onRefresh` | 刷新时触发 | function | No | Android | Yes |
+| `onHeaderReleased` | Header 释放时触发 | function | No | Android | No |
+| `onHeaderMoving` | header 移动过程中触发,包括下拉过程和释放过程。 | ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; | No | Android | Yes |
+| `finishRefresh` | 完成刷新 | Methods | No | Android | Yes |
+
+**组件 AnyHeader**
+
+仅组件支持渲染，在 RNOH0.72.10 版本中需要给 List 类型子组件添加 bounces = {false}属性，否则无法触发本组件的下拉。（0.72.11 版本已解决）
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| -------------- | ------------------------ | ------ | -------- | -------- | -------- |
+| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 不支持 |
+
+**组件 DefaultHeader/ClassicsHeader**
+
+当前组件不支持
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| -------------- | ------------------------ | ------ | -------- | -------- | -------- |
+| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 不支持 |
+| `accentColor` | 刷新组件 Header 的强调色 | string | No | Android | 不支持 |
+
+**组件 StoreHouseHeader**
+
+当前组件不支持
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------- | --------------------------- | ------ | -------- | -------- | -------- |
+| `text` | StoreHouseHeader 的文字 | string | No | Android | 不支持 |
+| `textColor` | StoreHouseHeader 的文字颜色 | string | No | Android | 不支持 |
+| `lineWidth` | StoreHouseHeader 的文字线宽 | number | No | Android | 不支持 |
+
+---
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [Apache License 2.0](https://github.com/react-native-studio/react-native-SmartRefreshLayout/blob/0.6.7/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-exception-handler.md b/vmall/react-native-exception-handler.md
new file mode 100644
index 0000000000000000000000000000000000000000..1260dc904fe286e2b26396131928e3db60ed0108
--- /dev/null
+++ b/vmall/react-native-exception-handler.md
@@ -0,0 +1,362 @@
+> 模板版本：v0.0.1
+
+
+
react-native-exception-handler
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-exception-handler/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+To catch JS_Exceptions
+
+```typescript
+import {
+ setJSExceptionHandler,
+ getJSExceptionHandler,
+} from "react-native-exception-handler";
+
+// For most use cases:
+// registering the error handler (maybe u can do this in the index.android.js or index.ios.js)
+setJSExceptionHandler((error, isFatal) => {
+ // This is your custom global error handler
+ // You do stuff like show an error dialog
+ // or hit google analytics to track crashes
+ // or hit a custom api to inform the dev team.
+});
+//=================================================
+// ADVANCED use case:
+const exceptionhandler = (error, isFatal) => {
+ // your error handler function
+};
+setJSExceptionHandler(exceptionhandler, allowInDevMode);
+// - exceptionhandler is the exception handler function
+// - allowInDevMode is an optional parameter is a boolean.
+// If set to true the handler to be called in place of RED screen
+// in development mode also.
+
+// getJSExceptionHandler gives the currently set JS exception handler
+const currentHandler = getJSExceptionHandler();
+```
+
+To catch Native_Exceptions
+
+```typescript
+import { setNativeExceptionHandler } from "react-native-exception-handler";
+
+//For most use cases:
+setNativeExceptionHandler((exceptionString) => {
+ // This is your custom global error handler
+ // You do stuff likehit google analytics to track crashes.
+ // or hit a custom api to inform the dev team.
+ //NOTE: alert or showing any UI change via JS
+ //WILL NOT WORK in case of NATIVE ERRORS.
+});
+//====================================================
+// ADVANCED use case:
+const exceptionhandler = (exceptionString) => {
+ // your exception handler code here
+};
+setNativeExceptionHandler(
+ exceptionhandler,
+ forceAppQuit,
+ executeDefaultHandler
+);
+// - exceptionhandler is the exception handler function
+// - forceAppQuit is an optional ANDROID specific parameter that defines
+// if the app should be force quit on error. default value is true.
+// To see usecase check the common issues section.
+// - executeDefaultHandler is an optional boolean (both IOS, ANDROID)
+// It executes previous exception handlers if set by some other module.
+// It will come handy when you use any other crash analytics module along with this one
+// Default value is set to false. Set to true if you are using other analytics modules.
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```diff
+"dependencies": {
+ "rnoh": "file:../rnoh",
++ "rnoh-exception-handler": "file:../../node_modules/react-native-exception-handler/harmony/exception_handler.har",
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```diff
+"dependencies": {
+ "rnoh": "file:../rnoh",
++ "rnoh-exception-handler": "file:../../node_modules/react-native-exception-handler/harmony/exception_handler"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 ExceptionHandlerPackage
+
+打开 `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-exception-handler/src/main/cpp" ./exception_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_exception_handler)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "ExceptionHandlerPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 ExceptionHandlerPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+import type {RNPackageContext, RNPackage} from 'rnoh/ts';
+import {SamplePackage} from 'rnoh-sample-package/ts';
++ import {ExceptionHandlerPackage} from 'rnoh-exception-handler/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new ExceptionHandlerPackage(ctx)
+ ];
+}
+```
+
+### 异常信息页面配置
+
+在 `YourProject/entry/src/main/ets/pages` 目录下,新建文件`ExceptionView.ets`
+
+```typescript
+import { ExceptionComopnent } from 'rnoh-exception-handler';
+import router from '@ohos.router';
+
+interface RouterParam {
+ errMsg: string
+}
+
+@Entry
+@Component
+struct ExceptionView {
+ @State errMsg: string = ''
+
+ aboutToAppear() {
+ let params = router.getParams() as RouterParam
+ this.errMsg = params.errMsg
+ router.clear()
+ }
+
+ build() {
+ Column() {
+ ExceptionComponent({ errMsg: this.errMsg })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+```
+
+在 `YourProject/entry/src/main/resources/base/profile/main_pages.json5`补上配置
+
+```diff
+{
+ "src": [
+ "pages/Index",
++ "pages/ExceptionView"
+ ]
+}
+```
+
+### 应用重启使能
+
+在 `YourProject/entry/src/main/ets/app` 目录下,新建文件`MyAbilityStage.ets`
+
+```typescript
+import AbilityStage from "@ohos.app.ability.AbilityStage";
+import appRecovery from "@ohos.app.ability.appRecovery";
+import Want from "@ohos.app.ability.Want";
+
+export default class MyAbilityStage extends AbilityStage {
+ onCreate() {
+ appRecovery.enableAppRecovery();
+ let want: Want = {
+ bundleName: this.context.applicationInfo.name,
+ abilityName: this.context.currentHapModuleInfo.mainElementName,
+ };
+ appRecovery.setRestartWant(want);
+ }
+}
+```
+
+在 `YourProject/entry/src/main/module.json5`补上配置
+
+```diff
+{
+ "module": {
+ "name": "entry",
+ "type": "entry",
++ "srcEntry": "./ets/app/MyAbilityStage.ets",
+ "description": "$string:module_desc",
+ "mainElement": "EntryAbility",
+
+ ···
+
+ "abilities": [
+ {
+ "name": "EntryAbility",
+ "srcEntry": "./ets/entryability/EntryAbility.ets",
+ "description": "$string:EntryAbility_desc",
+ "icon": "$media:icon",
+ "label": "$string:EntryAbility_label",
+ "startWindowIcon": "$media:icon",
+ "startWindowBackground": "$color:start_window_background",
++ "recoverable": true,
+ "exported": true,
+ "skills": [
+ {
+ "entities": [
+ "entity.system.home"
+ ],
+ "actions": [
+ "action.system.home"
+ ]
+ }
+ ]
+ }
+ ]
+ }
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/reace-native-exception-handler Releases](https://github.com/react-native-oh-library/react-native-exception-handler/releases)
+
+## 静态方法
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------------------- | -------------------- | -------- | -------- | -------- | -------- |
+| `setJSExceptionHandler` | 设置 JS 异常处理方法 | function | no | All | yes |
+| `getJSExceptionHandler` | 获取 JS 异常处理方法 | function | no | All | yes |
+
+## API
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| --------------------------- | ------------------------ | -------- | -------- | ------------ | -------- |
+| `setNativeExceptionHandler` | 设置 native 异常处理方法 | function | no | android，ios | yes |
+
+## 遗留问题
+
+- [ ] Harmony 没有异常默认处理机制
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/a7ul/react-native-exception-handler/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-fast-image.md b/vmall/react-native-fast-image.md
new file mode 100644
index 0000000000000000000000000000000000000000..89f7e7e1758d65c6b16cdcfd9e7f97422095a483
--- /dev/null
+++ b/vmall/react-native-fast-image.md
@@ -0,0 +1,259 @@
+> 模板版本：v0.0.1
+
+
+
react-native-fast-image
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-fast-image/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import FastImage from "react-native-fast-image";
+
+const YourImage = () => (
+ > PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 FastImage 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { RNFastImage, FAST_IMAGE_TYPE } from "rnoh-fast-image"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === FAST_IMAGE_TYPE) {
++ RNFastImage({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+}
+...
+```
+
+### 在 ArkTs 侧引入 FastImagePackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+import type {RNPackageContext, RNPackage} from 'rnoh/ts';
+import {SamplePackage} from 'rnoh-sample-package/ts';
++ import { FastImagePackage } from 'rnoh-fast-image/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new FastImagePackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl Releases](https://github.com/react-native-oh-library/react-native-fast-image/releases)
+
+## 属性
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | -------- |
+| `source.uri` | Source for the remote image to load. | string | yes | All | yes |
+| `source.headers?` | Headers to load the image with. e.g. { Authorization: 'someAuthToken' }. | object | yes | All | yes |
+| `source.priority?` | loading url priority | enum | No | All | no |
+| `source.cache?` | setting loading url cache mode | enum | No | All | no |
+| `defaultSource?` | An asset loaded with require(...). | number | yes | All | yes |
+| `resizeMode?` | loading image for scale mode | enum | yes | ALL | yes |
+| `onLoadStart?: () => void` | Called when the image starts to load. | function | yes | ALL | yes |
+| `onProgress?: (event) => void` | Called when the image is loading. | function | yes | All | yes |
+| `onLoad?: (event) => void` | Called on a successful image fetch. Called with the width and height of the loaded image. | function | yes | All | yes |
+| `onError?: () => void` | Called on an image fetching error. | function | yes | All | yes |
+| `onLoadEnd?: () => void` | Called when the image finishes loading, whether it was successful or an error. | function | yes | All | yes |
+| `tintColor?` | If supplied, changes the color of all the non-transparent pixels to the given color. | number \| string | yes | All | yes |
+
+## 静态方法
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------------------------------------------------- | ------------------------------------------ | -------- | -------- | -------- | -------- |
+| `FastImage.preload: (source[]) => void` | Preload images to display later. e.g. | function | No | All | No |
+| `FastImage.clearMemoryCache: () => Promise` | Clear all images from memory cache. | function | No | All | no |
+| `FastImage.clearDiskCache: () => Promise` | Clear all images from disk cache. priority | function | No | All | no |
+
+## 遗留问题
+
+- [ ] 部分涉及使用缓存能力的接口[issue#8](https://github.com/react-native-oh-library/react-native-fast-image/issues/8)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/DylanVann/react-native-fast-image/blob/main/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-gesture-handler.md b/vmall/react-native-gesture-handler.md
new file mode 100644
index 0000000000000000000000000000000000000000..57db2e97867b6ae3fd5e52d4ec17f958c2f77c85
--- /dev/null
+++ b/vmall/react-native-gesture-handler.md
@@ -0,0 +1 @@
+404
\ No newline at end of file
diff --git a/vmall/react-native-image-picker.md b/vmall/react-native-image-picker.md
new file mode 100644
index 0000000000000000000000000000000000000000..5f9c3121925a9c905aaabc1db4668fa3ef1de6c1
--- /dev/null
+++ b/vmall/react-native-image-picker.md
@@ -0,0 +1,265 @@
+> 模板版本：v0.0.1
+
+
+
react-native-image-picker
+
+
+
+
+
+
+
+
+## 安装与使用
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-image-picker/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```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-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-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)
+
+## 属性
+
+### Options
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | --------------- | -------- |
+| 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. 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
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------------ | ------------------------------------------------------- | ------- | -------- | --------------- | -------- |
+| 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
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | --------------- | -------- |
+| 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, this is the same as fileName | string | no | iOS Android | yes |
+
+## 静态方法
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------------------ | -------------------------------------- | -------- | -------- | --------------- | -------- |
+| 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/vmall/react-native-linear-gradient.md b/vmall/react-native-linear-gradient.md
new file mode 100644
index 0000000000000000000000000000000000000000..8e6d38b56258331ecec41f8c92b7472d1b23279c
--- /dev/null
+++ b/vmall/react-native-linear-gradient.md
@@ -0,0 +1,242 @@
+> 模板版本：v0.0.1
+
+
+
react-native-linear-gradient
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-linear-gradient/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+快速使用：
+
+```js
+import LinearGradient from "react-native-linear-gradient";
+
+// Within your render function
+
+ Sign in with Facebook
+ ;
+
+// Later on in your styles..
+var styles = StyleSheet.create({
+ linearGradient: {
+ flex: 1,
+ paddingLeft: 15,
+ paddingRight: 15,
+ borderRadius: 5,
+ },
+ buttonText: {
+ fontSize: 18,
+ fontFamily: "Gill Sans",
+ textAlign: "center",
+ margin: 10,
+ color: "#ffffff",
+ backgroundColor: "transparent",
+ },
+});
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-linear-gradient": "file:../../node_modules/react-native-linear-gradient/harmony/linear_gradient.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-linear-gradient": "file:../../node_modules/react-native-linear-gradient/harmony/linear_gradient"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 LinearGradientPackage
+
+打开 `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-linear-gradient/src/main/cpp" ./linear-gradient)
+# 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_linear_gradient)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "LinearGradientPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 linear-gradient 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { RNLinearGradient, LINEAR_GRADIENT_TYPE, LinearGradientDescriptor } from "rnoh-linear-gradient"
+
+ @Builder
+ function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === LINEAR_GRADIENT_TYPE) {
++ RNLinearGradient({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+ }
+ ...
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-linear-gradient Releases](https://github.com/react-native-oh-library/react-native-linear-gradient/releases)
+
+## 属性
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- |
+| colors | Color Array | (string\|number)[] | NO | All | yes |
+| locations | Color for unknown array (length 0 or the same as colors) | number[] | NO | All | yes |
+| useAngle | Use angle (default false) | boolean | NO | All | yes |
+| angle | Angle (useAngle=true valid) | number | NO | All | yes |
+| angleCenter | Middle angle coordinate | { x: number,y: number} | NO | All | no |
+| start | Starting point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial |
+| end | End point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-linear-gradient/blob/harmony/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-masked-view.md b/vmall/react-native-masked-view.md
new file mode 100644
index 0000000000000000000000000000000000000000..5cacc1b82061c73a8325922a7baab37828e61fb4
--- /dev/null
+++ b/vmall/react-native-masked-view.md
@@ -0,0 +1,252 @@
+> 模板版本：v0.0.1
+
+
+
@react-native-masked-view/masked-view
+
+
+
+
+
+
+
+
+## 安装与使用
+
+> [!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
+```
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/masked-view/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import MaskedView from "@react-native-masked-view/masked-view";
+
+
+
+ Basic Mask
+
+
+ }
+>
+ {/* Shows behind the mask, you can put anything here, such as an image */}
+ ;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-masked-view": "file:../../node_modules/@react-native-masked-view/masked-view/harmony/masked_view.har",
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-masked-view": "file:../../node_modules/@react-native-masked-view/masked-view/harmony/masked_view"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 MaskedPackage
+
+打开 `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-masked-view/src/main/cpp" ./masked-view)
+# 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_masked_view)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "MaskedPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 MaskedView 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { MaskedView, MASKED_VIEW_TYPE } from "rnoh-masked-view"
+
+ @Builder
+ function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === MASKED_VIEW_TYPE) {
++ MaskedView({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+ }
+ ...
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/masked-view Releases](https://github.com/react-native-oh-library/masked-view/releases)
+
+## 属性
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ---------------------- | ------------ | ------------------ | -------- | -------- | -------- |
+| `maskElement` | 遮罩元素 | element | yes | All | yes |
+| `androidRenderingMode` | 安卓渲染模式 | software, hardware | no | android | no |
+
+## 遗留问题
+
+- [ ] 鸿蒙侧未实现遮罩效果[issue#1](https://github.com/react-native-oh-library/masked-view/issues/1)
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-masked-view/masked-view/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-netinfo.md b/vmall/react-native-netinfo.md
new file mode 100644
index 0000000000000000000000000000000000000000..a9f826449bc47bca186d5a91a4ca3bbd6ec15b7f
--- /dev/null
+++ b/vmall/react-native-netinfo.md
@@ -0,0 +1,294 @@
+> 模板版本：v0.0.1
+
+
+
@react-native-community/netinfo
+
+
+
+
+
+
+
+
+## 安装与使用
+
+> [!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/vmall/react-native-pager-view.md b/vmall/react-native-pager-view.md
new file mode 100644
index 0000000000000000000000000000000000000000..347d3f869dfaae1a87a6ce41bcb7890d0b6e919f
--- /dev/null
+++ b/vmall/react-native-pager-view.md
@@ -0,0 +1,236 @@
+> 模板版本：v0.0.1
+
+
+
react-native-pager-view
+
+
+
+
+
+
+
+
+## 安装与使用
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-pager-view/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+```bash
+yarn add xxx
+```
+
+或者
+
+```bash
+npm install xxx
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import PagerView from "react-native-pager-view";
+
+const MyPager = () => {
+ return (
+
+
+ First page
+
+
+ Second page
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ pagerView: {
+ flex: 1,
+ },
+});
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-pager-view": "file:../../node_modules/react-native-pager-view/harmony/pager_view.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-pager-view": "file:../../node_modules/react-native-pager-view/harmony/pager_view"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 ViewPagerPackage
+
+打开 `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-pager-view/src/main/cpp" ./pager_view)
+# 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_pager_view )
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "ViewPagerPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 RNCViewPager 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { RNCViewPager, PAGER_VIEW_TYPE } from "rnoh-pager-view"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === PAGER_VIEW_TYPE) {
++ RNCViewPager({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+}
+...
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-pager-view Releases](https://github.com/react-native-oh-library/react-native-pager-view/releases)
+
+## 属性
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -------- | ------------ | -------------------------- |
+| initialPage | Index of initial page that should be selected | number | 是 | ios，android | yes |
+| scrollEnabled | Should pager view scroll, when scroll enabled | bool | 是 | ios，android | yes |
+| onPageScroll | Executed when transitioning between pages (ether because the animation for the requested page has changed or when the user is swiping/dragging between pages) | function | 否 | ios，android | yes |
+| onPageScrollStateChanged | Function called when the page scrolling state has changed | function | 否 | ios，android | yes |
+| onPageSelected | This callback will be called once the ViewPager finishes navigating to the selected page | function | 否 | ios，android | yes |
+| pageMargin | Blank space to be shown between pages | number （取值范围:0~屏幕宽度） | 否 | ios，android | 仅支持取 0-368（屏幕宽度） |
+| keyboardDismissMode | Determines whether the keyboard gets dismissed in response to a drag | one of 'none' ,'on-drag' | 否 | ios,droid | yes |
+| orientation | Set horizontal or vertical scrolling orientation (it does not work dynamically) | one of horizontal vertical | 否 | ios，android | yes |
+| overScrollMode | Used to override default value of overScroll mode. Can be auto, always or never. Defaults to auto | one of auto, always ,never | 否 | android | yes |
+| offscreenPageLimit | Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0. | number | 否 | android | yes |
+| overdrag | Allows for overscrolling after reaching the end or very beginning or pages. Defaults to false | bool | 否 | ios | yes |
+| layoutDirection | Specifies layout direction. Use ltr or rtl to set explicitly or locale to deduce from the default language script of a locale. Defaults to locale | string | 否 | android,ios | yes |
+| setPage(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes |
+| setPageWithoutAnimation(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes |
+| setScrollEnabled(scrollEnabled: boolean) | FA helper function to enable/disable scroll imperatively. The recommended way is using the scrollEnabled prop, however, there might be a case where a imperative solution is more useful (e.g. for not blocking an animation) | function | 否 | android,ios | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-pager-view/blob/harmony/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-safe-area-context.md b/vmall/react-native-safe-area-context.md
new file mode 100644
index 0000000000000000000000000000000000000000..86041f5054f4c9d15d1b956915f7d39a8eb1fbca
--- /dev/null
+++ b/vmall/react-native-safe-area-context.md
@@ -0,0 +1,270 @@
+> 模板版本：v0.0.1
+
+
+
react-native-safe-area-context
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React from "react";
+import { Text, View } from "react-native";
+import {
+ SafeAreaProvider,
+ SafeAreaView,
+ initialWindowMetrics,
+} from "react-native-safe-area-context";
+
+const App = () => {
+ return (
+
+
+
+ hello
+
+
+
+ );
+};
+
+export default App;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-safe-area": "file:../../node_modules/react-native-safe-area-context/harmony/safe_area.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-safe-area": "file:../../node_modules/react-native-safe-area-context/harmony/safe_area"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 SafeAreaViewPackage
+
+打开 `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-safe-area/src/main/cpp" ./safe_area)
+# 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_safe_area)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "SafeAreaViewPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 react-native-safe-area-context 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { SAFE_AREA_TYPE, RNCSafeAreaView, SAFE_AREA_PROVIDER_TYPE, SafeAreaProvider } from "rnoh-safe-area"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === SAFE_AREA_TYPE) {
++ RNCSafeAreaView({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
++ else if (ctx.descriptor.type === SAFE_AREA_PROVIDER_TYPE) {
++ SafeAreaProvider({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+}
+...
+```
+
+### 在 ArkTs 侧引入 SafeAreaViewPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+import type {RNPackageContext, RNPackage} from 'rnoh/ts';
+import {SamplePackage} from 'rnoh-sample-package/ts';
++ import {SafeAreaViewPackage} from 'rnoh-safe-area/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new SafeAreaViewPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-safe-area-context Releases](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)
+
+## 属性
+
+**组件 SafeAreaProvider**
+
+You should add `SafeAreaProvider` in your app root component. You may need to add it in other places like the root of modals and routes when using react-native-screens.
+
+Note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates.
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- |
+| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes |
+| `initialMetrics` | Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See optimization for more information on how to use this prop. | object | no | All | yes |
+
+**组件 SafeAreaView**
+
+`SafeAreaView` is a regular View component with the safe area insets applied as padding or margin.
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------- | ----------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- |
+| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes |
+| `edges` | Sets the edges to apply the safe area insets to. Defaults to all. | array | no | All | yes |
+| `mode` | Optional, padding (default) or margin. Apply the safe area to either the padding or the margin. | string | no | All | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/th3rdwave/react-native-safe-area-context/blob/main/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-screens.md b/vmall/react-native-screens.md
new file mode 100644
index 0000000000000000000000000000000000000000..27247d0d240cd3f00458df35ecbdd410a6fcdc09
--- /dev/null
+++ b/vmall/react-native-screens.md
@@ -0,0 +1,33 @@
+> 模板版本：v0.0.1
+
+
+
react-native-screens
+
+
+
+
+
+
+
+
+### 禁用 `react-native-screens`
+
+因为 ArkUI(Navigation、NavRouter、NavDestination)没有代理任何独特功能，且无法映射到 main_page 通过页面容器优化性能，所以 react-native-screens 禁用鸿蒙原生屏幕使用 react-native views 即可，请在您的入口文件中添加以下代码。 (例如. `App.js`):
+
+```js
+import { enableScreens } from "react-native-screens";
+
+enableScreens(false);
+```
+
+您还可以通过[`detachInactiveScreens`](https://reactnavigation.org/docs/stack-navigator#detachinactivescreens)在每个导航器中禁用使用原生屏幕。后续待补充各个接口验证情况。
+
+## 属性
+
+[原库接口文档](https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md) 由于使用 RN 的 view 实现相关功能，理论上接口均支持，若有不可用部分欢迎提交 [issue](https://gitee.com/react-native-oh-library/usage-docs/issues).
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/a7ul/react-native-exception-handler/blob/master/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-svg.md b/vmall/react-native-svg.md
new file mode 100644
index 0000000000000000000000000000000000000000..9ca7ba7db8c1563ae925178b535e7f2385bebc13
--- /dev/null
+++ b/vmall/react-native-svg.md
@@ -0,0 +1,296 @@
+> 模板版本：v0.0.1
+
+
+
react-native-svg
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-svg/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add react-native-svg@npm:@react-native-oh-tpl/react-native-svg
+```
+
+#### **npm**
+
+```bash
+npm install react-native-svg@npm:@react-native-oh-tpl/react-native-svg
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import Svg, { Path, G } from "react-native-svg";
+
+const TRIANGLE_PATH_DATA = "M90 0 L0 180 L180 180 Z";
+
+
+ ;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-svg": "file:../../node_modules/react-native-svg/harmony/svg.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-svg": "file:../../node_modules/react-native-svg/harmony/svg"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 SVGPackage
+
+打开 `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-svg/src/main/cpp" ./svg)
+# 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_svg)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "SVGPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 SVG 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import {
++ SVG_VIEW_TYPE_NAME,
++ SVGView,
++ SVG_GROUP_TYPE_NAME,
++ SVGGroup,
++ SVG_PATH_TYPE_NAME,
++ SVGPath,
++ SVG_RECT_TYPE_NAME,
++ SVGRect,
++ SVG_IMAGE_TYPE_NAME,
++ SVGImage
++ } from "rnoh-svg"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === SVG_VIEW_TYPE_NAME) {
++ SVGView({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ } else if (ctx.descriptor.type === SVG_GROUP_TYPE_NAME) {
++ SVGGroup({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ } else if (ctx.descriptor.type === SVG_PATH_TYPE_NAME) {
++ SVGPath({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag
++ })
++ } else if (ctx.descriptor.type === SVG_RECT_TYPE_NAME) {
++ SVGRect({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag
++ })
++ } else if (ctx.descriptor.type === SVG_IMAGE_TYPE_NAME) {
++ SVGImage({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag
++ })
++ }
+ ...
+}
+...
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-svg Releases](https://github.com/react-native-oh-library/react-native-svg/releases)
+
+## 属性
+
+详细请查看 [react-native-svg 的文档介绍](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md)
+
+以下为目前已支持的组件属性：
+
+**Svg**：绘制组件的父组件
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| :-----: | :------: | :-------------: | -------- | -------- | -------- |
+| width | 组件宽度 | number\| string | Yes | All | Yes |
+| height | 组件高度 | number\| string | Yes | All | Yes |
+| viewBox | 组件视区 | string | No | All | Yes |
+| color | 颜色 | string | No | All | Yes |
+
+**G**：该元素是用于对其他 SVG 元素进行分组的容器
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| :--: | :--: | :--: | -------- | -------- | -------- |
+
+**Path**： 路径绘制组件，根据绘制路径生成封闭的自定义形状
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| :--: | :------------------: | :----: | -------- | -------- | -------- |
+| d | 路径绘制的命令字符串 | string | Yes | All | Yes |
+
+**Rect**： 矩形绘制组件，根据角位置和宽高生成矩形形状
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| :----: | :---------------: | :-------------: | -------- | -------- | -------- |
+| x | 在 x 轴上平移距离 | number\| string | No | All | Yes |
+| y | 在 y 轴上平移距离 | number\| string | No | All | Yes |
+| width | 元素宽度 | number\| string | Yes | All | Yes |
+| height | 元素高度 | number\| string | Yes | All | Yes |
+| rx | 定义 x 轴上的半径 | number\| string | No | All | Yes |
+| rx | 定义 y 轴上的半径 | number\| string | No | All | Yes |
+
+**Image**： 图像元素，支持 JPEG、PNG 格式
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| :----: | :---------------: | :-------------: | -------- | -------- | -------- |
+| x | 在 x 轴上平移距离 | number\| string | No | All | Yes |
+| y | 在 y 轴上平移距离 | number\| string | No | All | Yes |
+| width | 元素宽度 | number\| string | Yes | All | Yes |
+| height | 元素高度 | number\| string | Yes | All | Yes |
+| href | 图像资源引用 | source\| string | Yes | All | Yes |
+
+**公共属性**：Common props 组件属性支持情况
+
+| 属性 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | G | Path | Rect |
+| :---------: | :----------------------------------: | :----: | :----: | :------: | -------- | --- | ---- | ---- |
+| fill | 设置填充区域颜色 | string | '#000' | No | All | | √ | √ |
+| stroke | 设置边框颜色，不设置时，默认没有边框 | string | 'none' | No | All | | √ | √ |
+| strokeWidth | 设置边框宽度 | number | 1 | No | All | | √ | √ |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-svg/blob/harmony/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-tab-view.md b/vmall/react-native-tab-view.md
new file mode 100644
index 0000000000000000000000000000000000000000..533cf3ea188077370ffe3908233c7d9df05fb13e
--- /dev/null
+++ b/vmall/react-native-tab-view.md
@@ -0,0 +1,349 @@
+> 模板版本：v0.0.1
+
+
+
react-native-tab-view
+
+
+
+
+
+
+
+
+## 安装与使用
+
+正在 npm 发布中，当前请先从仓库Release中获取库 tgz，通过使用本地依赖来安装本库。
+
+```bash
+yarn add xxx
+```
+
+或者
+
+```bash
+npm install xxx
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React from "react";
+import { View, Text, Dimensions, StyleSheet } from "react-native";
+import {
+ TabView,
+ TabBar,
+ SceneMap,
+ NavigationState,
+ SceneRendererProps,
+} from "react-native-tab-view";
+
+type State = NavigationState<{
+ key: string,
+ title: string,
+}>;
+
+const FirstRoute = () => (
+
+
+ First tab
+
+
+);
+
+const SecondRoute = () => (
+
+
+ Second tab
+
+
+);
+
+const renderScene = SceneMap({
+ first: FirstRoute,
+ second: SecondRoute,
+});
+const TabViewTest = () => {
+ const initialLayout = { width: Dimensions.get("window").width };
+ const [index, setIndex] = React.useState(0);
+ const renderTabBar = (
+ props: SceneRendererProps & { navigationState: State }
+ ) => (
+ > PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 RNCViewPager 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { RNCViewPager, PAGER_VIEW_TYPE } from 'rnoh-pager-view'
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if(ctx.descriptor.type === PAGER_VIEW_TYPE){
++ RNCViewPager({
++ tag:ctx.descriptor.tag,
++ ctx:ctx.rnohContext,
++ buildCustomComponent:CustomComponentBuilder
++ })
++ }
+ ...
+}
+...
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-tab-view Releases](https://github.com/react-native-oh-library/react-navigation/releases/)
+
+## 属性
+
+详情请查看[tabview 官方文档](https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/README.md)
+
+如下是 tabview 已经鸿蒙化的属性：
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| --------------------- | ------------------------------------------------------------------------------------------------------ | -------- | -------- | ----------- | -------- |
+| `onIndexChange` | Callback which is called on tab change, receives the index of the new tab as argument | function | No | All | yes |
+| `renderScene` | Callback which returns a react element to render as the page for the tab. | function | No | All | yes |
+| `renderTabBar` | Callback which returns a custom React Element to use as the tab bar. | function | No | All | yes |
+| `tabBarPosition` | Position of the tab bar in the tab view. | string | No | All | yes |
+| `keyboardDismissMode` | String indicating whether the keyboard gets dismissed in response to a drag gesture. | string | No | All | yes |
+| `swipeEnabled` | Passing false will disable swipe gestures, but the user can still switch tabs by pressing the tab bar. | boolean | No | All | yes |
+| `style` | Style to apply to the pager view wrapping all the scenes. | boolean | No | All | yes |
+| `tabStyle` | Style to apply to the individual tab items in the tab bar. | boolean | No | All | yes |
+| `indicatorStyle` | Style to apply to the active indicator. | boolean | No | All | yes |
+| `labelStyle` | Style to apply to the tab item label. | boolean | No | All | yes |
+| `style` | Style to apply to the tab bar container. | boolean | No | All | yes |
+| `activeColor` | Custom color for icon and label in the active tab. | string | No | All | yes |
+| `inactiveColor` | Custom color for icon and label in the inactive tab. | string | No | All | yes |
+| `scrollEnabled` | Boolean indicating whether to make the tab bar scrollable. | boolean | No | All | yes |
+| `bounces` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | boolean | No | All | yes |
+| `gap` | Define a spacing between tabs. | number | No | All | yes |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/satya164/react-native-tab-view/blob/main/LICENSE.md) ，请自由地享受和参与开源。
diff --git a/vmall/react-native-video.md b/vmall/react-native-video.md
new file mode 100644
index 0000000000000000000000000000000000000000..a50d97d62485500f337b7d97cefd477470e1186d
--- /dev/null
+++ b/vmall/react-native-video.md
@@ -0,0 +1,342 @@
+> 模板版本：v0.0.1
+
+
+
react-native-video
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-video/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React, {useState, useRef} from 'react';
+import {View, ScrollView, StyleSheet, Text,TextInput} from 'react-native';
+import RNCVideo from 'react-native-video'
+
+function RNCVideoDemo() {
+ const videoRef = React.useRef(null);
+
+ const [muted, setMuted] = useState(true);
+ const [paused, setPaused] = useState(false);
+ const [repeat, setRepeat] = useState(true);
+ const [disableFocus, setDisableFocus] = useState(false);
+ const [uri, setUri] = useState('https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4');
+ const [txt, setTxt] = useState('empty');
+ const [resizeMode, setResizeMode] = useState('none');
+ const [posterResizeMode, setPosterResizeMode] = useState('cover');
+ const [seekSec, setSeekSec] = useState(5000);
+
+ const [onVideoLoad, setOnVideoLoad] = useState("onVideoLoad");
+ const [onVideoLoadStart, setOnVideoLoadStart] = useState("onVideoLoadStart");
+ const [onVideoError, setOnVideoError] = useState("onVideoError");
+ const [onVideoProgress, setOnVideoProgress] = useState("onVideoProgress");
+ const [onVideoEnd, setOnVideoEnd] = useState("onVideoEnd");
+ const [onVideoBuffer, setOnVideoBuffer] = useState("onVideoBuffer");
+ const [onPlaybackStalled, setOnPlaybackStalled] = useState("onPlaybackStalled");
+ const [onPlaybackResume, setOnPlaybackResume] = useState("onPlaybackResume");
+
+ return (
+
+
+ { videoRef.current?.seek(5)}} >seek:5s
+
+ {
+ console.log(`onLoad`)
+ }}
+ onLoadStart={(e) => {
+ console.log(`onLoadStart`)
+ }}
+ onProgress={(e) => {
+ console.log(`onProgress`)
+ }}
+ onError={(e) => {
+ console.log(`onError`)
+ }}
+ onEnd={() => {
+ console.log(`onEnd`)
+ }}
+ onBuffer={(e) => {
+ console.log(`onBuffer`)
+ }}
+ onPlaybackStalled={() => {
+ console.log(`onPlaybackStalled`)
+ }}
+ onPlaybackResume={() => {
+ console.log(`onPlaybackResume`)
+ }}
+ onReadyForDisplay={() => {
+ console.log(`onReadyForDisplay`)
+ }}
+ >
+ );
+}
+const styles = StyleSheet.create({
+ video: {
+ width: '100%',
+ height: 260,
+ },
+ button: {
+ paddingHorizontal: 8,
+ paddingVertical: 6,
+ borderRadius: 4,
+ backgroundColor: "oldlace",
+ alignSelf: "flex-start",
+ marginHorizontal: "1%",
+ marginBottom: 6,
+ minWidth: "25%",
+ minHeight:20,
+ textAlign: "center",
+ },
+ });
+
+export default RNCVideoDemo;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-video": "file:../../node_modules/react-native-video/harmony/rn_video.har"
+ }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+ "rnoh": "file:../rnoh",
+ "rnoh-slider": "file:../../node_modules/react-native-video/harmony/rn_video"
+ }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 RNCVideoPackage
+
+打开 `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-video/src/main/cpp" ./video)
+# 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_video)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "RNCVideoPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 RNCVideo 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { RNCVideo, RNC_VIDEO_TYPE } from "rnoh-video"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === RNC_VIDEO_TYPE) {
++ RNCVideo({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+}
+...
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-video Releases](https://github.com/react-native-oh-library/react-native-video/releases)
+
+## 属性
+
+详情请查看[react-native-video 官方文档](https://github.com/react-native-video/react-native-video/blob/support/5.2.X/README.md)
+
+如下是 react-native-video 已经鸿蒙化的属性：
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | -------- | -------------------------------------------------------- | -------- |
+| `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri. | object | Yes | All | yes |
+| `disableFocus` | Determines whether video audio should override background music/audio in Android devices.
+
react-native-webview
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-webview/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
+
+```bash
+yarn add xxx
+```
+
+或者
+
+```bash
+npm install xxx
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import { WebView } from "react-native-webview";
+
+> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
+
+### 在 ArkTs 侧引入 webview 组件
+
+打开 `entry/src/main/ets/pages/index.ets`，添加：
+
+```diff
+import {
+ RNApp,
+ ComponentBuilderContext,
+ RNAbility,
+ AnyJSBundleProvider,
+ MetroJSBundleProvider,
+ ResourceJSBundleProvider,
+} from 'rnoh'
+import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
+import { createRNPackages } from '../RNPackagesFactory'
++ import { WebView, WEB_VIEW } from "rnoh-webview"
+
+@Builder
+function CustomComponentBuilder(ctx: ComponentBuilderContext) {
+ if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ SampleView({
+ ctx: ctx.rnohContext,
+ tag: ctx.descriptor.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
++ else if (ctx.descriptor.type === WEB_VIEW) {
++ WebView({
++ ctx: ctx.rnohContext,
++ tag: ctx.descriptor.tag,
++ buildCustomComponent: CustomComponentBuilder
++ })
++ }
+ ...
+}
+...
+```
+
+### 在 ArkTs 侧引入 WebViewPackage
+
+打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加：
+
+```diff
+import type {RNPackageContext, RNPackage} from 'rnoh/ts';
+import {SamplePackage} from 'rnoh-sample-package/ts';
++ import { WebViewPackage } from 'rnoh-webview/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+ return [
+ new SamplePackage(ctx),
++ new WebViewPackage(ctx)
+ ];
+}
+```
+
+### 运行
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+然后编译、运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-webview Releases](https://github.com/react-native-oh-library/react-native-webview/releases)
+
+## 属性
+
+详情请查看[webview 官方文档](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md)
+
+如下是 webview 已经鸿蒙化的属性：
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | ----------------- | -------- |
+| `source` | Loads static HTML or a URI (with optional headers) in the WebView | One of:
+
@react-navigation/elements
+
+
+
+
+
+
+
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-navigation/releases?q=elements&expanded=true)中获取库 tgz，通过使用本地依赖来安装本库。**
+#### **yarn**
+
+```bash
+yarn add xxx
+```
+
+#### **npm**
+
+```bash
+npm install xxx
+```
+
+
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-navigation Releases](https://github.com/react-native-oh-library/react-navigation/releases?q=elements&expanded=true)
+
+## 属性
+
+详细请查看 [react-navigation/elements 的文档介绍](https://reactnavigation.org/docs/elements/#resourcesavingview)
+
+
+**Header**：用作标头的组件
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| :-----: | :------: | :-------------: | -------- | -------- | -------- |
+| headerTitle | 场景标题，或者返回一个React元素用作标题 | string \| React.reactNode | No | All | 未验证 |
+| headerTitleAlign | 标题对齐方式 | left \| center | No | All | 未验证 |
+| headerTitleAllowFontScaling | 标题是否缩放 | boolean | No | All | 未验证 |
+| headerLeft | 函数，返回一个React元素用在页眉左侧 | React.reactNode | No | All | 未验证 |
+| headerRight | 函数，返回一个React元素用在页眉右侧 | React.reactNode | No | All | 未验证 |
+| headerShadowVisible | 是否显示阴影 | boolean | No | All | 未验证 |
+| headerStyle | 页眉样式 | ViewStyle | No | All | 未验证 |
+| headerTitleStyle | 页眉标题颜色 | TextStyle | No | All | 未验证 |
+| headerLeftContainerStyle | headerLeft容器的样式 | ViewStyle | No | All | 未验证 |
+| headerRightContainerStyle | headerRight容器的样式 | ViewStyle | No | All | 未验证 |
+| headerTitleContainerStyle | headerTitle容器的样式 | ViewStyle | No | All | 未验证 |
+| headerBackgroundContainerStyle | headerBackground容器的样式 | ViewStyle | No | All | 未验证 |
+| headerTintColor | 页眉颜色 | string | No | All | 未验证 |
+| headerPressColor | 页眉按下颜色 | string | No | All | 未验证 |
+| headerPressOpacity | 页眉按下不透明度 | number | No | All | 未验证 |
+| headerTransparent | 页眉是否透明 | boolean | No | All | 未验证 |
+| headerBackground | 函数，返回一个React元素对页眉背景渲染 | function | No | All | 未验证 |
+| headerStatusBarHeight | 页眉状态栏高度 | number | No | All | 未验证 |
+
+**HeaderBackground**：可用于Header的headerBackground属性
+
+**HeaderTitle**：可用于Header的headerTitle属性
+
+**HeaderBackButton**：用于显示后退按钮标题的组件
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| :-----: | :------: | :-------------: | -------- | -------- | -------- |
+| disabled | 是否可用 | boolean | No | All | 未验证 |
+| onPress | 点击事件 | function | No | All | 未验证 |
+| pressColor | 点击时的颜色 | string | No | All | 未验证 |
+| backImage | 函数，返回一个React元素用于后退按钮显示的图片 | React.reactNode | No | All | 未验证 |
+| tintColor | 按钮颜色 | string | No | All | 未验证 |
+| label | 按钮的文本 | string | No | All | 未验证 |
+| truncatedLabel | 空间不足时显示的文本 | string | No | All | 未验证 |
+| labelVisible | 文本是否可见 | boolean | No | All | 未验证 |
+| labelStyle | 文本样式 | TextStyle | No | All | 未验证 |
+| allowFontScaling | 文本是否根据字体缩放 | boolean | No | All | 未验证 |
+| onLabelLayout | 标签大小更改时要触发的回调。 | function | No | All | 未验证 |
+| screenLayout | 屏幕布局 | Layout | No | All | 未验证 |
+| titleLayout | 标题中title元素的布局 | Layout | No | All | 未验证 |
+| canGoBack | 能否导航回来 | boolean | No | All | 未验证 |
+| accessibilityLabel | 屏幕阅读器按钮的辅助功能标签 | string | No | All | 未验证 |
+| testID | ID | string | No | All | 未验证 |
+| style | 按钮样式 | ViewStyle | No | All | 未验证 |
+
+
+**MissingIcon**：渲染丢失的图标符号的组件。它可以用作图标的回退，以显示缺少图标
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| :-----: | :------: | :-------------: | -------- | -------- | -------- |
+| color | icon的颜色 | string | No | All | 未验证 |
+| size | icon的大小 | number | No | All | 未验证 |
+| style | icon的样式 | TextStyle | No | All | 未验证 |
+
+**PlatformPressable**：在[Pressable](https://reactnative.dev/docs/Pressable)之上提供抽象以处理平台差异的组件
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| :-----: | :------: | :-------------: | -------- | -------- | -------- |
+| pressColor | 按压时的颜色 | string | No | All | 未验证 |
+| pressOpacity | 按压时的不透明度 | number | No | All | 未验证 |
+
+**ResourceSavingView**：通过使用removeClippedSubviews来帮助提高非活动屏幕的性能的组件，它接受一个可见的道具来指示是否应该剪辑屏幕
+
+**SafeAreaProviderCompat**：来自“react native safe-area context”的SafeAreaProvider组件的包装器
+
+**HeaderBackContext**：React上下文，可用于获取父屏幕的后标题
+
+**HeaderShownContext**：React上下文，可用于检查页眉在父屏幕中是否可见
+
+**HeaderHeightContext**：React上下文，可用于获取父屏幕中最近的可见页眉的高度
+
+## 方法
+
+| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 |
+| ----------------------- | -------------------- | -------- | -------- | -------- | -------- |
+| `useHeaderHeight` | 返回父屏幕中最近的可见页眉的高度 | function | no | All | 未验证 |
+| `getDefaultHeaderHeight` | 返回默认页眉高度 | function | no | All | yes |
+| `getHeaderTitle` | 返回页眉标题文本 | function | no | All | 未验证 |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/elements/LICENSE) ，请自由地享受和参与开源。
diff --git a/vmall/react-navigation.md b/vmall/react-navigation.md
new file mode 100644
index 0000000000000000000000000000000000000000..38c2531b841678889a2060fb1e5855fc90cc129b
--- /dev/null
+++ b/vmall/react-navigation.md
@@ -0,0 +1,33 @@
+> 模板版本：v0.0.1
+
+
+
react-navigation
+
+
+
+
+
+
+
+
+## Package Versions
+|Name | Latest Version |
+| ---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| [@react-navigation/bottom-tabs](./#) | [](https://www.npmjs.com/package/@react-navigation/bottom-tabs) |
+| [@react-navigation/core](./#) | [](https://www.npmjs.com/package/@react-navigation/core) |
+| [@react-navigation/devtools](./#) | [](https://www.npmjs.com/package/@react-navigation/devtools) |
+| [@react-navigation/drawer](./#) | [](https://www.npmjs.com/package/@react-navigation/drawer) |
+| [@react-navigation/elements](./react-navigation-elements.md) | [](https://www.npmjs.com/package/@react-navigation/elements) |
+| [@react-navigation/material-top-tabs](./#) |[](https://www.npmjs.com/package/@react-navigation/material-top-tabs) |
+| [@react-navigation/native-stack](./#) | [](https://www.npmjs.com/package/@react-navigation/native-stack) |
+| [@react-navigation/native](./#) | [](https://www.npmjs.com/package/@react-navigation/native) |
+| [@react-navigation/routers](./#) | [](https://www.npmjs.com/package/@react-navigation/routers) |
+| [@react-navigation/stack](./#) | [](https://www.npmjs.com/package/@react-navigation/stack) |
+| [react-native-tab-view](./#) | [](https://www.npmjs.com/package/react-native-tab-view) |
+
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/a7ul/react-native-exception-handler/blob/master/LICENSE) ，请自由地享受和参与开源。
+
+
+ 
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+