From 2ec71f826368c6fa8c52f195e01b2d94844d9d1a Mon Sep 17 00:00:00 2001
From: Louis-C7 <972339262@qq.com>
Date: Wed, 15 Nov 2023 15:42:27 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 814e6652e..0c7482a88 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,14 @@
 		<link rel="icon" href="https://librarycodes.gitee.io/docsify-plus/img/logo.ico" type="image/x-icon" />
 		<link rel="shortcut icon" href="https://librarycodes.gitee.io/docsify-plus/img/logo.ico" type="image/x-icon" />
 		<!-- 默认主题 -->
+		<meta name="theme-color" content="#f2f4f6">
+
+		<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
+		<link rel="stylesheet" href="css/card.min.css" type="text/css" >
 		<!-- <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/docsify/lib/themes/vue.css"> -->
 		<!-- <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/docsify/lib/themes/vue.css" /> -->
-		<link rel="stylesheet" href="//fastly.jsdelivr.net/npm/docsify/lib/themes/buble.css" />
+		<!-- <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/docsify/lib/themes/buble.css" /> -->
 		<!-- <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/docsify/lib/themes/dark.css" /> -->
 		<!-- <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/docsify/lib/themes/pure.css" /> -->
 	</head>
@@ -21,6 +26,7 @@
 		<script>
 			window.$docsify = {
 				el: '#main',
+				themeColor: '#876296',
 				// 项目名称
 				name: 'RNOH三方库文档',
 				// 项目图标
-- 
Gitee


From a602afbbca335bdbeb461860426a736b36b0d64e Mon Sep 17 00:00:00 2001
From: Louis-C7 <972339262@qq.com>
Date: Wed, 15 Nov 2023 15:49:44 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _navbar.md      |  2 +-
 index.html      |  4 ++--
 zh-cn/README.md | 16 ++++++++++++++++
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 zh-cn/README.md

diff --git a/_navbar.md b/_navbar.md
index a561fbfc5..3b115bb15 100644
--- a/_navbar.md
+++ b/_navbar.md
@@ -1,7 +1,7 @@
 <!-- _navbar.md -->
 
 * 相关链接
-  * [文档Gitee地址](https://gitee.com/librarycodes/docsify-plus)
+  * [文档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/)
diff --git a/index.html b/index.html
index 0c7482a88..99d1b2444 100644
--- a/index.html
+++ b/index.html
@@ -28,11 +28,11 @@
 				el: '#main',
 				themeColor: '#876296',
 				// 项目名称
-				name: 'RNOH三方库文档',
+				name: 'RNOH三方库使用文档',
 				// 项目图标
 				// logo: '/img/icon.svg',
 				// 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
-				repo: 'https://gitee.com/librarycodes/docsify-plus',
+				repo: 'https://gitee.com/react-native-oh-library/usage-docs/tree/master',
 				// 封面支持，默认加载的是项目根目录下的_coverpage.md文件
 				coverpage: true,
 				// 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
diff --git a/zh-cn/README.md b/zh-cn/README.md
new file mode 100644
index 000000000..47f8f8d93
--- /dev/null
+++ b/zh-cn/README.md
@@ -0,0 +1,16 @@
+# 简介
+
+> 欢迎开始React-Native的旅程！如果你在找如何搭建环境的文档，请移步开发文档的[搭建开发环境](https://react-native-oh-library.gitee.io/docs/#/zh-cn/environment)章节。
+
+## 概述
+
+该文档旨在帮助开发者在OpenHarmony平台使用React Native OpenHarmony的第三方库，并呈现每个三方库的信息。
+
+## RNOH 三方库总览
+
+| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | 已发布的最新版本 | 文档链接
+| :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | :----------: |
+| 1 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) |
+| 3 | @react-native-picker/picker | 2.5.1 | 是 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) |
+
+## 社区
-- 
Gitee


From 0fb7a154c4a478009fae2961f5660640ac57b9b1 Mon Sep 17 00:00:00 2001
From: Louis-C7 <972339262@qq.com>
Date: Wed, 15 Nov 2023 15:50:09 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0picker=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                    |   1 +
 _sidebar.md                  |   3 +
 zh-cn/picker.md              | 259 +++++++++++++++++++++++++++++++++++
 zh-cn/react-native-slider.md |   2 +-
 4 files changed, 264 insertions(+), 1 deletion(-)
 create mode 100644 zh-cn/picker.md

diff --git a/README.md b/README.md
index c9b0503b4..47f8f8d93 100644
--- a/README.md
+++ b/README.md
@@ -11,5 +11,6 @@
 | 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | 已发布的最新版本 | 文档链接
 | :----------: | :----------: | :----------: | :----------: | :----------: | :----------: | :----------: |
 | 1 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider@4.4.3-0.1.1](https://github.com/react-native-oh-library/react-native-slider/releases/tag/4.4.3-0.1.1) | [链接](zh-cn/react-native-slider.md) |
+| 3 | @react-native-picker/picker | 2.5.1 | 是 | 90% | [@react-native-oh-library/picker@2.5.1-0.0.1](https://github.com/react-native-oh-library/picker/releases/tag/2.5.1-0.0.1) | [链接](zh-cn/picker.md) |
 
 ## 社区
diff --git a/_sidebar.md b/_sidebar.md
index 52baeb33a..220d75e14 100644
--- a/_sidebar.md
+++ b/_sidebar.md
@@ -1,6 +1,9 @@
 <!-- _sidebar.md -->
+- [首页](README.md)
+
 - 三方库说明文档合集
 
     - [@react-native-community/slider](zh-cn/react-native-slider.md)
     - [@react-native-community/checkbox](zh-cn/react-native-checkbox.md)
+    - [@react-native-picker/picker](zh-cn/picker.md)
 
diff --git a/zh-cn/picker.md b/zh-cn/picker.md
new file mode 100644
index 000000000..65b73c2c9
--- /dev/null
+++ b/zh-cn/picker.md
@@ -0,0 +1,259 @@
+<p align="center">
+  <h1 align="center"> <code>@react-native-picker/picker</code> </h1>
+</p>
+<p align="center">
+    <a href="https://github.com/react-native-picker/picker">
+        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20windows%20|%20macos%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
+    </a>
+    <a href="https://github.com/react-native-picker/picker/blob/master/LICENSE">
+        <img src="https://img.shields.io/npm/l/@react-native-picker/picker.svg" alt="License" />
+    </a>
+</p>
+
+## 安装与使用
+
+目前 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
+```
+
+进入到工程目录并输入以下命令：
+
+```bash
+yarn add @react-native-picker/picker@npm:@react-native-oh-library/picker
+```
+
+或者
+
+```bash
+npm install @react-native-picker/picker@npm:@react-native-oh-library/picker
+```
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import { Picker } from "@react-native-picker/picker";
+
+const [selectedLanguage, setSelectedLanguage] = useState();
+
+<Picker
+  selectedValue={selectedLanguage}
+  onValueChange={(itemValue, itemIndex) => setSelectedLanguage(itemValue)}
+>
+  <Picker.Item label="Java" value="java" />
+  <Picker.Item label="JavaScript" value="js" />
+</Picker>;
+```
+
+## Link
+
+目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
+
+首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
+
+### 引入原生端代码
+
+目前有两种方法：
+
+1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
+2. 直接链接源码。
+
+方法一：通过 har 包引入
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+    "rnoh": "file:../rnoh",
+    "rnoh-slider": "file:../../node_modules/'@react-native-picker/picker/harmony/picker.har"
+  }
+```
+
+点击右上角的 `sync` 按钮
+
+或者在终端执行：
+
+```bash
+cd entry
+ohpm install
+```
+
+方法二：直接链接源码
+打开 `entry/oh-package.json5`，添加以下依赖
+
+```json
+"dependencies": {
+    "rnoh": "file:../rnoh",
+    "rnoh-slider": "file:../../node_modules/'@react-native-picker/picker/harmony/picker"
+  }
+```
+
+打开终端，执行：
+
+```bash
+cd entry
+ohpm install --no-link
+```
+
+### 配置 CMakeLists 和引入 PickerPackge
+
+打开 `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-picker/src/main/cpp" ./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_picker)
+# RNOH_END: link_packages
+```
+
+打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "SamplePackage.h"
++ #include "HarmonyPickerPackage.h"
+
+using namespace rnoh;
+
+std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
+    return {
+      std::make_shared<SamplePackage>(ctx),
++     std::make_shared<HarmonyPickerPackage>(ctx)
+    };
+}
+```
+
+### 在 ArkTs 侧引入 picker 组件
+
+打开 `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 { RNCHarmonyPicker, HARMONY_PICKER_TYPE } from "rnoh-picker"
+
+@Entry
+@Component
+struct Index {
+  @StorageLink('RNAbility') rnAbility: RNAbility | undefined = undefined
+
+  @Builder
+  buildCustomComponent(ctx: ComponentBuilderContext) {
+    if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+      SampleView({
+        ctx: ctx.rnohContext,
+        tag: ctx.descriptor.tag,
+        buildCustomComponent: this.buildCustomComponent.bind(this)
+      })
+    }
++   else if (ctx.descriptor.type === HARMONY_PICKER_TYPE) {
++     RNCHarmonyPicker({
++       ctx: ctx.rnohContext,
++       tag: ctx.descriptor.tag,
++       buildCustomComponent: this.buildCustomComponent.bind(this)
++     })
++   }
+    ...
+  }
+  ...
+}
+```
+
+### 运行
+
+在右上角选择 entry 模块，运行即可。
+
+## 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+| `@react-native-oh-library/picker` Version | Required React Native Version | Required RNOH Version | Required DevEco Studio Version | Required ROM Version  |
+| ----------------------------------------- | ----------------------------- | --------------------- | ------------------------------ | --------------------- |
+| `2.5.1-0.0.1`                             | `0.72.5`                      | `0.72.10`             | `4.0.3.601`                    | `OpenHarmony 4.10.10` |
+
+## 属性
+
+### PickerProps
+
+| 名称                      | 说明                                                                                              | 类型                                                         | 是否必填 | 平台                  | 鸿蒙支持  |
+| ------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- | --------------------- | --------- |
+| `onValueChange`           | Callback for when an item is selected.                                                            | function                                                     | No       | All                   | yes       |
+| `selectedValue`           | Value matching value of one of the items. Can be a string or an integer.                          | any                                                          | No       | All                   | yes       |
+| `style`                   | NA                                                                                                | pickerStyleType                                              | No       | All                   | yes       |
+| `testID`                  | Used to locate this view in end-to-end tests.                                                     | string                                                       | No       | All                   | yes       |
+| `enabled`                 | If set to false, the picker will be disabled, i.e. the user will not be able to make a selection. | bool                                                         | No       | Android, Web, Windows | no        |
+| `mode`                    | On Android, specifies how to display the selection items when the user taps on the picker         | enum('dialog', 'dropdown')                                   | No       | Android               | no        |
+| `dropdownIconColor`       | On Android, specifies color of dropdown triangle.                                                 | ColorValue                                                   | No       | Android               | no        |
+| `dropdownIconRippleColor` | On Android, specifies ripple color of dropdown triangle.                                          | ColorValue                                                   | No       | Android               | no        |
+| `prompt`                  | Prompt string for this picker, used on Android in dialog mode as the title of the dialog.         | string                                                       | No       | Android               | no        |
+| `itemStyle`               | Style to apply to each of the item labels.                                                        | [text styles](https://reactnative.dev/docs/text-style-props) | No       | iOS, Windows          | partially |
+| `numberOfLines`           | On Android & iOS, used to truncate the text with an ellipsis after computing the text layout.     | number                                                       | No       | Android, iOS          | no        |
+| `onBlur`                  | NA                                                                                                | function                                                     | No       | Android               | no        |
+| `onFocus`                 | NA                                                                                                | function                                                     | No       | Android               | no        |
+| `selectionColor`          | NA                                                                                                | ColorValue                                                   | No       | iOS                   | no        |
+| `themeVariant`            | NA                                                                                                | enum('light', 'dark')                                        | No       | iOS                   | no        |
+
+### PickerItemProps
+
+| 名称                 | 说明                                                                                                     | 类型          | 是否必填 | 平台    | 鸿蒙支持 |
+| -------------------- | -------------------------------------------------------------------------------------------------------- | ------------- | -------- | ------- | -------- |
+| `label`              | Displayed value on the Picker Item.                                                                      | string        | yes      | All     | yes      |
+| `value`              | Actual value on the Picker Item.                                                                         | number,string | yes      | All     | yes      |
+| `color`              | Displayed color on the Picker Item.                                                                      | ColorValue    | yes      | All     | no       |
+| `label`              | Displayed value on the Picker Item.                                                                      | string        | no       | All     | yes      |
+| `fontFamily`         | Displayed fontFamily on the Picker Item.                                                                 | string        | no       | All     | yes      |
+| `style`              | Style to apply to individual item labels.                                                                | ViewStyleProp | no       | Android | yes      |
+| `enabled`            | If set to false, the specific item will be disabled, i.e. the user will not be able to make a selection. | boolean       | no       | Android | no       |
+| `contentDescription` | Sets the content description to the Picker Item.                                                         | string        | no       | Android | no       |
+
+## 方法
+
+| 名称    | 说明                            | 平台    | 鸿蒙支持 |
+| ------- | ------------------------------- | ------- | -------- |
+| `blur`  | Programmatically closes picker. | Android | no       |
+| `focus` | Programmatically opens picker.  | Android | no       |
+
+## 遗留问题
+
+- [ ] numberOfLines 属性不支持[issue#2](https://github.com/react-native-oh-library/picker/issues/2)
+- [ ] PickerItemProps 的 color 和 fontFamily 不支持（OH 的 Picker 组件不支持单独设置 PickerItem 的样式）
+- [ ] themeVariant 属性不支持
+- [ ] selectionColor 不支持
+- [ ] itemStyle 不支持设置 textAlign（OH 的 Picker 不支持设置）
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/callstack/react-native-slider/blob/main/LICENSE.md) ，请自由地享受和参与开源。
diff --git a/zh-cn/react-native-slider.md b/zh-cn/react-native-slider.md
index ec9b0e8e9..b4d156674 100644
--- a/zh-cn/react-native-slider.md
+++ b/zh-cn/react-native-slider.md
@@ -211,7 +211,7 @@ ohpm install
 
 ## 属性
 
-| 属性                    | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 类型                                         | 是否必填 | 原库平台     | 鸿蒙支持 |
+| 名称                    | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 类型                                         | 是否必填 | 原库平台     | 鸿蒙支持 |
 | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | ------------ | -------- |
 | `style`                 | Used to style and layout the `Slider`. See `StyleSheet.js` and `ViewStylePropTypes.js` for more info.                                                                                                                                                                                                                                                                                                                                                                              | View.style                                   | No       | All          | yes      |
 | `disabled`              | If true the user won't be able to move the slider.<br/>Default value is false.                                                                                                                                                                                                                                                                                                                                                                                                     | bool                                         | No       | All          | yes      |
-- 
Gitee