From e5f4b98d8399f94b28e56a8ce25f4bfed4e77be9 Mon Sep 17 00:00:00 2001 From: dingyuanjie <911260800@qq.com> Date: Wed, 12 Jun 2024 15:32:56 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=20=E6=96=B0=E5=A2=9E=20react-native-dr?= =?UTF-8?q?opdown-picker=20=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-dropdown-picker.md | 235 ++++++++++++++++++++++++++ 1 file changed, 235 insertions(+) create mode 100644 zh-cn/react-native-dropdown-picker.md diff --git a/zh-cn/react-native-dropdown-picker.md b/zh-cn/react-native-dropdown-picker.md new file mode 100644 index 00000000..4301b125 --- /dev/null +++ b/zh-cn/react-native-dropdown-picker.md @@ -0,0 +1,235 @@ + +模板版本：v0.2.1 + +

+

react-native-dropdown-picker

+

+ +

+ + Supported platforms + + + License + +

+ + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-dropdown-picker) + + +## 安装与使用 + +正在 npm 发布中，当前请先从仓库Release中获取库 tgz，通过使用本地依赖来安装本库。 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-dropdown-picker Releases](https://github.com/react-native-oh-library/react-native-dropdown-picker/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + + + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-dropdown-picker@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-dropdown-picker@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, {useState} from 'react'; +import {View, Text} from 'react-native'; +import DropDownPicker from 'react-native-dropdown-picker'; + +export default function App() { + const [open, setOpen] = useState(false); + const [value, setValue] = useState(null); + const [items, setItems] = useState([ + {label: 'Apple', value: 'apple'}, + {label: 'Banana', value: 'banana'}, + {label: 'Pear', value: 'pear'}, + ]); + + return ( + + + + + + + Chosen fruit: {value === null ? 'none' : value} + + + ); +} + + +``` + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +版本信息如以下：react-native：0.72.5；react-native-harmony: 0.72.20；DevEco Studio: 5.0.3.200；SDK: HarmonyOS NEXT Developer Beta1；ROM: 3.0.0.18 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-dropdown-picker Releases](https://github.com/react-native-oh-library/react-native-dropdown-picker/releases) + + + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Component | Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ---- | ----------- | ---- | -------- | ---- | ------------ | +| BadgeBodyComponent | items | 下拉选择数据集 | Array | yes | all | yes| +| Modal | open | 打开遮罩，下拉 | Boolean | yes | all | yes| +| input | placeholder | placeholder | string | no | all | yes| +| Modal | closeAfterSelecting | 选择之后关闭遮罩 | boolean | no | all | yes| +| Text | labelProps | props | Object | no | all | yes| +| Modal | disabled | 禁用下拉 | Boolean | no | all | yes| +| Modal | disabledStyle | 禁用样式 | Object | no | all | yes| +| Modal | placeholderStyle | placeholder样式 | Object | no | all | yes| +| Modal | containerStyle | containerStyle样式 | Object | no | all | yes| +| Modal | style | style样式 | Object | no | all | yes| +| Text | textStyle | textStyle样式 | Object | no | all | yes| +| Text | labelStyle |labelStyle样式 | Object | no | all | yes| +| Modal | arrowIconStyle | 下拉图标样式 | Object | no | all | yes| +| TickIconComponent | tickIconStyle | tickIcon Style样式 | Object | no | all | yes| +| CloseIconComponent | closeIconStyle | closeIcon Style样式 | Object | no | all | yes| +| Modal | badgeStyle | badgeStyle样式 | Object | no | all | yes| +| Modal | badgeTextStyle | badgeText Style样式 | Object | no | all | yes| +| Modal | badgeDotStyle | badgeDot Style样式 | Object | no | all | yes| +| Modal | searchContainerStyle | search Container Style样式 | Object | no | all | yes| +| Modal | searchTextInputStyle | search Text Input Style样式 | Object | no | all | yes| +| Modal | searchPlaceholderTextColor | search Placeholder Text Color样式 | Object | no | all | yes| +| Modal | searchWithRegionalAccents | 搜索search With Regional Accents | Boolean | no | all | yes| +| Modal | dropDownContainerStyle | drop Down Container Style样式 | Object | no | all | yes| +| Modal | modalContentContainerStyle | modal Content Container Style样式 | Object | no | all | yes| +| Modal | modalAnimationType | modal Animation Type | 'none'or'slide' or 'fade' | no | all | yes| +| Modal | arrowIconContainerStyle | arrow Icon Container Style | Object | no | all | yes| +| Modal | closeIconContainerStyle | close Icon Container Style | Object | no | all | yes| +| Modal | tickIconContainerStyle | tick Icon Container Style | Object | no | all | yes| +| Modal | listItemContainerStyle | list Item Container Style | Object | no | all | yes| +| Modal | listItemLabelStyle | list Item Label Style | Object | no | all | yes| +| Modal | listChildContainerStyle | list Child Container Style | Object | no | all | yes| +| Modal | listChildLabelStyle | list Child Label Style | Object | no | all | yes| +| Modal | listParentContainerStyle | list Parent Container Style | Object | no | all | yes| +| Modal | listParentLabelStyle | list Parent Label Style | Object | no | all | yes| +| Modal | selectedItemContainerStyle | selected Item Container Style | Object | no | all | yes| +| Modal | selectedItemLabelStyle | selected Item Label Style | Object | no | all | yes| +| Modal | disabledItemContainerStyle | disabled Item Container Style | Object | no | all | yes| +| Modal | disabledItemLabelStyle | disabled Item Label Style | Object | no | all | yes| +| Modal | customItemContainerStyle | custom Item Container Style | Object | no | all | yes| +| Modal | customItemLabelStyle | custom Item Label Style | Object | no | all | yes| +| Modal | listMessageContainerStyle | list Message Container Style | Object | no | all | yes| +| Modal | listMessageTextStyle | list Message Text Style | Object | no | all | yes| +| Modal | itemSeparatorStyle | item Separator Style | Object | no | all | yes| +| Modal | badgeSeparatorStyle | badge Separator Style | Object | no | all | yes| +| Modal | listMode | list Mode | Object | no | all | yes| +| Modal | categorySelectable | categor Selectable | Object | no | all | yes| +| Modal | searchable | search able | boolean | no | all | yes| +| Modal | searchPlaceholder | search Placeholder | string | no | all | yes| +| Modal | schema | schema object | Object | no | all | yes| +| Modal | language | language | string | no | all | yes| +| Modal | translation | translation object | Object | no | all | yes| +| Modal | multipleText | multiple Text | string | no | all | yes| +| Modal | mode | Mode Type | 'DEFAULT' or 'SIMPLE' or 'BADGE' | no | all | yes| +| Modal | itemKey | item Key | string | no | all | yes| +| Modal | maxHeight | max Height | number | no | all | yes| +| Modal | renderBadgeItem | render Badge Item | JSX.Element | no | all | yes| +| Modal | renderListItem | render List Item | JSX.Element | no | all | yes| +| Modal | itemSeparator | item Separator | boolean | no | all | yes| +| Modal | bottomOffset | bottom Offset | number | no | all | yes| +| Modal | badgeColors | badge Colors | string | no | all | yes| +| Modal | badgeDotColors | badge Dot Colors | string | no | all | yes| +| Modal | showArrowIcon | show Arrow Icon | boolean | no | all | yes| +| Modal | showBadgeDot | show Badge Dot | boolean | no | all | yes| +| Modal | showTickIcon | show Tick Icon | boolean | no | all | yes| +| Modal | stickyHeader | sticky Header | boolean | no | all | yes| +| Modal | autoScroll | auto Scroll | boolean | no | all | yes| +| Modal | ArrowUpIconComponent | Arrow Up Icon Component | JSX.Element | no | all | yes| +| Modal | ArrowDownIconComponent | Arrow Down Icon Component | JSX.Element | no | all | yes| +| Modal | CloseIconComponent | Close Icon Component | JSX.Element | no | all | yes| +| Modal | TickIconComponent | Tick Icon Component | JSX.Element | no | all | yes| +| Modal | ListEmptyComponent | List Empty Component | JSX.Element | no | all | yes| +| Modal | ActivityIndicatorComponent | Activity Indicator Component | JSX.Element | no | all | yes| +| Modal | activityIndicatorSize | activity Indicator Size | number | no | all | yes| +| Modal | activityIndicatorColor | activity Indicator Color | string | no | all | yes| +| Modal | props | props | object | no | all | yes| +| Modal | itemProps | itemProps | object | no | all | yes| +| Modal | badgeProps | badge Props | object | no | all | yes| +| Modal | modalProps | modal Props | object | no | all | yes| +| Modal | flatListProps | flat List Props | object | no | all | yes| +| Modal | scrollViewProps | scroll View Props | object | no | all | yes| +| Modal | searchTextInputProps | search Text Input Props | object | no | all | yes| +| Modal | modalTitle | modal Title | string | no | all | yes| +| Modal | modalTitleStyle | modal Title Style | object | no | all | yes| +| Modal | loading | loading | boolean | no | all | yes| +| Modal | min | min | number | no | all | yes| +| Modal | max | max | number | no | all | yes| +| Modal | addCustomItem | add Custom Item | boolean | no | all | yes| +| Modal | setOpen | set Open | Dispatch | yes | all | yes| +| Modal | setItems | set Items | Dispatch | no | all | yes| +| Modal | disableBorderRadius | disable Border Radius | object | no | all | yes| +| Modal | containerProps | container Props | object | no | all | yes| +| Modal | onLayout | onLayout | Dispatch | no | all | yes| +| Modal | onPress | onPress | Dispatch | no | all | yes| +| Modal | onOpen | onOpen | Dispatch | no | all | yes| +| Modal | onClose | onClose | Dispatch | no | all | yes| +| Modal | onChangeSearchText | onChange Search Text | Dispatch | no | all | yes| +| Modal | onDirectionChanged | onDirection Changed | Dispatch | no | all | yes| +| Modal | zIndex | zIndex | number | no | all | yes| +| Modal | zIndexInverse | zIndex Inverse | number | no | all | yes| +| Modal | disableLocalSearch | disable Local Search | boolean | no | all | yes| +| Modal | dropDownDirection | drop Down Direction | Dispatch | no | all | yes| +| Modal | theme | theme | string | no | all | yes| +| Modal | rtl | rtl | boolean | no | all | yes| +| Modal | testID | testID | string | no | all | yes| +| Modal | closeOnBackPressed | close OnBack Pressed | boolean | no | all | yes| +| Modal | hideSelectedItemIcon | hideSelectedItemIcon | boolean | no | all | yes| +| Modal | extendableBadgeContainer | extendable Badge Container | boolean | no | all | yes| + + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-dropdown-picker/releases) ，请自由地享受和参与开源。 -- Gitee