From a801cf61965318b094cc6311d07fd2e4dbce5b52 Mon Sep 17 00:00:00 2001 From: zhaoDuan Date: Tue, 16 Jul 2024 10:31:22 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[#IAD8FK]=20=E6=96=B0=E5=A2=9Ereact-nat?= =?UTF-8?q?ive-element-dropdown=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-element-dropdown.md | 500 +++++++++++++++++++++++++ 1 file changed, 500 insertions(+) create mode 100644 zh-cn/react-native-element-dropdown.md diff --git a/zh-cn/react-native-element-dropdown.md b/zh-cn/react-native-element-dropdown.md new file mode 100644 index 00000000..ae7dcee8 --- /dev/null +++ b/zh-cn/react-native-element-dropdown.md @@ -0,0 +1,500 @@ + +> 模板版本：v0.2.2 + +

+

react-native-element-dropdown

+

+

+ + Supported platforms + + + License + + +

+ + + + +> [!TIP] [Github 地址](https://github.com/hoaphantn7604/react-native-element-dropdown) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-element-dropdown@2.12.1 --save +``` + +#### **yarn** + +```bash +yarn add react-native-element-dropdown@2.12.1 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 +### Dropdown example +![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-dropdown-2.png) +```js + import React, { useState } from 'react'; + import { StyleSheet, Text, View } from 'react-native'; + import { Dropdown } from 'react-native-element-dropdown'; + import AntDesign from '@expo/vector-icons/AntDesign'; + + const data = [ + { label: 'Item 1', value: '1' }, + { label: 'Item 2', value: '2' }, + { label: 'Item 3', value: '3' }, + { label: 'Item 4', value: '4' }, + { label: 'Item 5', value: '5' }, + { label: 'Item 6', value: '6' }, + { label: 'Item 7', value: '7' }, + { label: 'Item 8', value: '8' }, + ]; + + const DropdownComponent = () => { + const [value, setValue] = useState(null); + const [isFocus, setIsFocus] = useState(false); + + const renderLabel = () => { + if (value || isFocus) { + return ( + + Dropdown label + + ); + } + return null; + }; + + return ( + + {renderLabel()} + setIsFocus(true)} + onBlur={() => setIsFocus(false)} + onChange={item => { + setValue(item.value); + setIsFocus(false); + }} + renderLeftIcon={() => ( + + )} + /> + + ); + }; + + export default DropdownComponent; + + const styles = StyleSheet.create({ + container: { + backgroundColor: 'white', + padding: 16, + }, + dropdown: { + height: 50, + borderColor: 'gray', + borderWidth: 0.5, + borderRadius: 8, + paddingHorizontal: 8, + }, + icon: { + marginRight: 5, + }, + label: { + position: 'absolute', + backgroundColor: 'white', + left: 22, + top: 8, + zIndex: 999, + paddingHorizontal: 8, + fontSize: 14, + }, + placeholderStyle: { + fontSize: 16, + }, + selectedTextStyle: { + fontSize: 16, + }, + iconStyle: { + width: 20, + height: 20, + }, + inputSearchStyle: { + height: 40, + fontSize: 16, + }, + }); +``` +### MultiSelect example +![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-multiselect-1.png) +```js + import React, { useState } from 'react'; + import { StyleSheet, View } from 'react-native'; + import { MultiSelect } from 'react-native-element-dropdown'; + import AntDesign from '@expo/vector-icons/AntDesign'; + + const data = [ + { label: 'Item 1', value: '1' }, + { label: 'Item 2', value: '2' }, + { label: 'Item 3', value: '3' }, + { label: 'Item 4', value: '4' }, + { label: 'Item 5', value: '5' }, + { label: 'Item 6', value: '6' }, + { label: 'Item 7', value: '7' }, + { label: 'Item 8', value: '8' }, + ]; + + const MultiSelectComponent = () => { + const [selected, setSelected] = useState([]); + + return ( + + { + setSelected(item); + }} + renderLeftIcon={() => ( + + )} + selectedStyle={styles.selectedStyle} + /> + + ); + }; + + export default MultiSelectComponent; + + const styles = StyleSheet.create({ + container: { padding: 16 }, + dropdown: { + height: 50, + backgroundColor: 'transparent', + borderBottomColor: 'gray', + borderBottomWidth: 0.5, + }, + placeholderStyle: { + fontSize: 16, + }, + selectedTextStyle: { + fontSize: 14, + }, + iconStyle: { + width: 20, + height: 20, + }, + inputSearchStyle: { + height: 40, + fontSize: 16, + }, + icon: { + marginRight: 5, + }, + selectedStyle: { + borderRadius: 12, + }, + }); +``` +### SelectCountry example +![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-dropdown-4.png) +```js + import React, { useState } from 'react'; + import { StyleSheet } from 'react-native'; + import { SelectCountry } from 'react-native-element-dropdown'; + + const local_data = [ + { + value: '1', + lable: 'Country 1', + image: { + uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg', + }, + }, + { + value: '2', + lable: 'Country 2', + image: { + uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg', + }, + }, + { + value: '3', + lable: 'Country 3', + image: { + uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg', + }, + }, + { + value: '4', + lable: 'Country 4', + image: { + uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg', + }, + }, + { + value: '5', + lable: 'Country 5', + image: { + uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg', + }, + }, + ]; + + const SelectCountryScreen = _props => { + const [country, setCountry] = useState('1'); + + return ( + { + setCountry(e.value); + }} + /> + ); + }; + + export default SelectCountryScreen; + + const styles = StyleSheet.create({ + dropdown: { + margin: 16, + height: 50, + borderBottomColor: 'gray', + borderBottomWidth: 0.5, + }, + imageStyle: { + width: 24, + height: 24, + }, + placeholderStyle: { + fontSize: 16, + }, + selectedTextStyle: { + fontSize: 16, + marginLeft: 8, + }, + iconStyle: { + width: 20, + height: 20, + }, + inputSearchStyle: { + height: 40, + fontSize: 16, + }, + }); +``` + + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.400; ROM：3.0.0.22; + +## 组件 + +详细请查看 [react-native-element-dropdown的文档介绍](https://github.com/hoaphantn7604/react-native-element-dropdown) + +以下为目前已支持的组件属性： + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +**Dropdown**：单选组件 + +| Props | Params | isRequire | Description | Platform | HarmonyOS Support | +| ------------------ | ----------------------------------------------- | --------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | +| mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. | All | Yes | +| data | Array | Yes | Data is a plain array | All | Yes | +| labelField | String | Yes | Extract the label from the data item | All | Yes | +| valueField | String | Yes | Extract the primary key from the data item | All | Yes | +| searchField | String | No | Specify the field of data list you want to search | All | Yes | +| onChange | (item: object) => void | Yes | Selection callback | All | Yes | +| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | All | Yes | +| value | Item | No | Set default value | All | Yes | +| placeholder | String | No | The string that will be rendered before dropdown has been selected | All | Yes | +| placeholderStyle | TextStyle | No | Styling for text placeholder | All | Yes | +| selectedTextStyle | TextStyle | No | Styling for selected text | All | Yes | +| selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} | All | Yes | +| style | ViewStyle | No | Styling for view container | All | Yes | +| containerStyle | ViewStyle | No | Styling for list container | All | Yes | +| maxHeight | Number | No | Customize max height for list container | All | Yes | +| minHeight | Number | No | Customize min height for list container | All | Yes | +| fontFamily | String | No | Customize font style | All | Yes | +| iconStyle | ImageStyle | No | Styling for icon | All | Yes | +| iconColor | String | No | Color of icons | All | Yes | +| itemContainerStyle | TextStyle | No | Styling for item container in list | All | Yes | +| itemTextStyle | TextStyle | No | Styling for text item in list | All | Yes | +| activeColor | String | No | Background color for item selected in list container | All | Yes | +| search | Boolean | No | Show or hide input search | All | Yes | +| searchQuery | (keyword: string, labelValue: string) => Boolean| No | Callback used to filter the list of items | All | Yes | +| inputSearchStyle | ViewStyle | No | Styling for input search | All | Yes | +| searchPlaceholder | String | No | The string that will be rendered before text input has been entered | All | Yes | +| renderInputSearch | (onSearch: (text:string) => void) => JSX.Element| No | Customize TextInput search | All | Yes | +| disable | Boolean | No | Specifies the disabled state of the Dropdown | All | Yes | +| dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' | All | Yes | +| autoScroll | Boolean | No | Auto scroll to index item selected, default is true | All | Yes | +| showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true | All | Yes | +| renderLeftIcon | (visible?: boolean) => JSX.Element | No | Customize left icon for dropdown | All | Yes | +| renderRightIcon | (visible?: boolean) => JSX.Element | No | Customize right icon for dropdown | All | Yes | +| renderItem | (item: object, selected: Boolean) => JSX.Element| No | Takes an item from data and renders it into the list | All | Yes | +| flatListProps | FlatListProps | No | Customize FlatList element | All | Yes | +| inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true| All | Yes | +| onFocus | () => void | No | Callback that is called when the dropdown is focused | All | Yes | +| onBlur | () => void | No | Callback that is called when the dropdown is blurred | All | Yes | +| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true | All | Yes | +| backgroundColor | String | No | Set background color | All | Yes | +| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example3 | All | Yes | +| onConfirmSelectItem | (item: object) => void | No | Selection callback. Refer example/src/dropdown/example3 | All | Yes | +| testID | String | No | Used to locate this view in end-to-end tests | All | Yes | +| itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]| All | Yes | +| accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected | All | Yes | +| itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]| All | Yes | +| closeModalWhenSelectedItem | Boolean | No | By default, closeModalWhenSelectedItem is set to true. When closeModalWhenSelectedItem is set to false, the Modal won't close when an item is selected. | All | Yes | +| excludeItems | Item[] | No | The array containing the items to be excluded. | All | Yes | +| excludeSearchItems | Item[] | No | The array containing the items to be excluded. | All | Yes | + + + +**MultiSelect**：多选组件 +| Props | Params | isRequire | Description | Platform | HarmonyOS Support | +| ------------------ | -----------------------------------------------------| --------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | +| mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. | All | Yes | +| data | Array | Yes | Data is a plain array | All | Yes | +| labelField | String | Yes | Extract the label from the data item | All | Yes | +| valueField | String | Yes | Extract the primary key from the data item | All | Yes | +| searchField | String | No | Specify the field of data list you want to search | All | Yes | +| onChange | (value[]) => void | Yes | Selection callback. A array containing the "valueField". | All | Yes | +| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | All | Yes | +| value | Item[] | No | Set default value. A array containing the "valueField". | All | Yes | +| placeholder | String | No | The string that will be rendered before dropdown has been selected | All | Yes | +| placeholderStyle | TextStyle | No | Styling for text placeholder | All | Yes | +| style | ViewStyle | No | Styling for view container | All | Yes | +| containerStyle | ViewStyle | No | Styling for list container | All | Yes | +| maxHeight | Number | No | Customize max height for list container | All | Yes | +| minHeight | Number | No | Customize min height for list container | All | Yes | +| maxSelect | Number | No | maximum number of items that can be selected | All | Yes | +| fontFamily | String | No | Customize font style | All | Yes | +| iconStyle | ImageStyle | No | Styling for icon | All | Yes | +| iconColor | String | No | Color of icons | All | Yes | +| activeColor | String | No | Background color for item selected in list container | All | Yes | +| itemContainerStyle | TextStyle | No | Styling for item container in list | All | Yes | +| itemTextStyle | TextStyle | No | Styling for text item in list | All | Yes | +| selectedStyle | ViewStyle | No | Styling for selected view | All | Yes | +| selectedTextStyle | TextStyle | No | Styling for selected text | All | Yes | +| selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} | All | Yes | +| renderSelectedItem | (item: object, unSelect?: () => void) => JSX.Element | No | Takes an item from data and renders it into the list selected | All | Yes | +| alwaysRenderSelectedItem | Boolean | No | Always show the list of selected items | All | Yes | +| visibleSelectedItem | Boolean | No | Option to hide selected item list, Ẽx: visibleSelectedItem={false} | All | Yes | +| search | Boolean | No | Show or hide input search | All | Yes | +| searchQuery | (keyword: string, labelValue: string) => Boolean | No | Callback used to filter the list of items | All | Yes | +| inputSearchStyle | ViewStyle | No | Styling for input search | All | Yes | +| searchPlaceholder | String | No | The string that will be rendered before text input has been entered | All | Yes | +| renderInputSearch | (onSearch: (text:string) => void) => JSX.Element | No | Customize TextInput search | All | Yes | +| disable | Boolean | No | Specifies the disabled state of the Dropdown | All | Yes | +| dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' | All | Yes | +| showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true | All | Yes | +| renderLeftIcon | (visible?: boolean) => JSX.Element | No | Customize left icon for dropdown | All | Yes | +| renderRightIcon | (visible?: boolean) => JSX.Element | No | Customize right icon for dropdown | All | Yes | +| renderItem | (item: object, selected: Boolean) => JSX.Element | No | Takes an item from data and renders it into the list | All | Yes | +| flatListProps | FlatListProps | No | Customize FlatList element | All | Yes | +| inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true| All | Yes | +| onFocus | () => void | No | Callback that is called when the dropdown is focused | All | Yes | +| onBlur | () => void | No | Callback that is called when the dropdown is blurred | All | Yes | +| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true | All | Yes | +| inside | Boolean | No | inside default is false | All | Yes | +| backgroundColor | String | No | Set background color | All | Yes | +| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example7 | All | Yes | +| confirmUnSelectItem | Boolean | No | Turn On confirm un-select item. Refer example/src/dropdown/example7 | All | Yes | +| onConfirmSelectItem | (item: any) => void | No | Selection callback. Refer example/src/dropdown/example7 | All | Yes | +| testID | String | No | Used to locate this view in end-to-end tests | All | Yes | +| itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]| All | Yes | +| accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected | All | Yes | +| itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]| All | Yes | +| excludeItems | Item[] | No | The array containing the items to be excluded. | All | | +| excludeSearchItems | Item[] | No | The array containing the items to be excluded. | All | Yes | + + +**SelectCountry**：选择国家/地区组件，接收所有Dropdown的props并新增了以下props +| Props | Params | isRequire | Description | Platform | HarmonyOS Support | +| ---------- | ---------- | --------- | ------------------------------------ | -------- | ----------------- | +| imageField | String | Yes | Extract the image from the data item | All | Yes | +| imageStyle | ImageStyle | No | Styling for image | All | Yes | + +**Method**：方法 + +| API | Params | Description | Platform | HarmonyOS Support | +| ---- | ---------- | ------------------ | -------- | ----------------- | +| API | Params | Description | All | Yes | +| open | () => void | Open dropdown list | All | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/hoaphantn7604/react-native-element-dropdown/blob/master/LICENSE)，请自由地享受和参与开源。 + \ No newline at end of file -- Gitee