diff --git a/zh-cn/react-native-country-picker-modal.md b/zh-cn/react-native-country-picker-modal.md new file mode 100644 index 0000000000000000000000000000000000000000..ca2a73c24b0c1b8c758bb67c0ac21d49018ad1e9 --- /dev/null +++ b/zh-cn/react-native-country-picker-modal.md @@ -0,0 +1,175 @@ +> 模板版本:v0.0.1 + +

+

react-native-country-picker-modal

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/xcarpentier/react-native-country-picker-modal) + +## 安装与使用 + +进入到工程目录并输入以下命令: + + + +#### **npm** + +```bash +npm install react-native-country-picker-modal +``` + +#### **yarn** + +```bash +yarn add react-native-country-picker-modal +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState } from 'react' +import { View, Text, StyleSheet, PixelRatio, Switch } from 'react-native' +import CountryPicker from 'react-native-country-picker-modal' +import { CountryCode, Country } from './src/types' + +const styles = StyleSheet.create({ + // ... +}) + +export default function App() { + const [countryCode, setCountryCode] = useState('FR') + const [country, setCountry] = useState(null) + const [withCountryNameButton, setWithCountryNameButton] = useState( + false, + ) + const [withFlag, setWithFlag] = useState(true) + const [withEmoji, setWithEmoji] = useState(true) + const [withFilter, setWithFilter] = useState(true) + const [withAlphaFilter, setWithAlphaFilter] = useState(false) + const [withCallingCode, setWithCallingCode] = useState(false) + const onSelect = (country: Country) => { + setCountryCode(country.cca2) + setCountry(country) + } + return ( + + Welcome to Country Picker ! + + ) +} +``` + +## 约束与限制 + +### 兼容性 + +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 + + +## 属性 +详细请查看 [react-native-country-picker-modal的文档介绍](https://github.com/xcarpentier/react-native-country-picker-modal) + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +| Props | Params | isRequire | Description | Platform | HarmonyOS Support | +| ------------------ | ----------------------------------------------- | --------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | +| countryCode | [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L252) | Yes | countryCode | All | Yes | +| region | [Region](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L272) | No | region | All | Yes | +| subregion | [Subregion](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L282) | No | subregion | All | Yes | +| countryCodes | [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L252) | No | countryCodes | All | Yes | +| theme | [Theme](https://github.com/xcarpentier/react-native-country-picker-modal/blob/7611d34fa35744dbec3fbcdd9b4401494b1ba8c4/src/CountryTheme.ts#L5) | No | theme | All | Yes | +| translation | [TranslationLanguageCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L309) | No | translation | All | Yes | +| modalProps | [ModalProps](https://facebook.github.io/react-native/docs/modal#props) | No | modalProps | All | Yes | +| filterProps | [CountryFilterProps](https://facebook.github.io/react-native/docs/textinput#props) | No | extends TextInputProps | All | Yes | +| flatListProps | [FlatListProps](https://facebook.github.io/react-native/docs/flatlist#props) | No | extends flatListProps | All | Yes | +| withAlphaFilter | boolean | No | Use AlphaFilter | All | Yes | +| withCallingCode | boolean | No | Using the CallingCode | All | Yes | +| withCurrency | boolean | No | Use Currency | All | Yes | +| withEmoji | boolean | No | Use Emoji | All | Yes | +| withCountryNameButton | boolean | No | Use the button with the country name | All | Yes | +| withCurrencyButton | boolean | No | Using the With Currency Button | All | Yes | +| withCallingCodeButton | boolean | No | Using the With Call Code Button | All | Yes | +| withFlagButton | boolean | No | Using Flagged Buttons | All | Yes | +| withCloseButton | boolean | No | Using the Close Button | All | Yes | +| withFilter | boolean | No | withFilter | All | Yes | +| withFilter | TextStyle | No | withFilter | All | Yes | +| withModal | TextStyle | No | withModal | All | Yes | +| visible | boolean | No | visible | All | Yes | +| containerButtonStyle | StyleProp | No | containerButtonStyle | All | Yes | +| renderFlagButton | (props: (FlagButton['props'])): ReactNode ([FlagButton props](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/FlagButton.tsx#L73)) | No | renderFlagButton | All | Yes | +| renderCountryFilter | (props: CountryFilter['props']): ReactNode ([CountryFilter props is TextInputProps](https://facebook.github.io/react-native/docs/textinput#props)) | No | renderCountryFilter | All | Yes | +| onSelect | (country: Country): void ([Country](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L263)) | Yes | onSelect | All | Yes | +| onOpen | (): void | Yes | onOpen | All | Yes | +| onClose | (): void | Yes | onClose | All | Yes | +| closeButtonImage | [ImageSourcePropType](https://facebook.github.io/react-native/docs/image#props) | No | closeButtonImage | All | Yes | +| closeButtonStyle | StyleProp | No | closeButtonStyle | All | Yes | +| closeButtonImageStyle | StyleProp | No | closeButtonImageStyle | All | Yes | +| disableNativeModal | boolean (you have to wrap your all app with CountryModalProvider) | No | disableNativeModal | All | Yes | +| preferredCountries | [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L254) preferred countries they appear first (`withAlphaFilter` must be false) | No | preferredCountries | All | Yes | + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/entria/react-native-view-overflow/blob/master/LICENSE) ,请自由地享受和参与开源。 diff --git a/zh-cn/react-native-element-dropdown.md b/zh-cn/react-native-element-dropdown.md new file mode 100644 index 0000000000000000000000000000000000000000..6ffdeff30d7fdb956a817695deb32631ec4a0543 --- /dev/null +++ b/zh-cn/react-native-element-dropdown.md @@ -0,0 +1,499 @@ + +> 模板版本: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 --save +``` + +#### **yarn** + +```bash +yarn add react-native-element-dropdown +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!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.26; SDK:HarmonyOS NEXT Developer Beta1; IDE:DevEco Studio 5.0.3.300; 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 | HarmonyOS Support | +| ------------------ | ----------------------------------------------- | --------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | +| mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. | Yes | +| data | Array | Yes | Data is a plain array | Yes | +| labelField | String | Yes | Extract the label from the data item | Yes | +| valueField | String | Yes | Extract the primary key from the data item | Yes | +| searchField | String | No | Specify the field of data list you want to search | Yes | +| onChange | (item: object) => void | Yes | Selection callback | Yes | +| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | Yes | +| value | Item | No | Set default value | Yes | +| placeholder | String | No | The string that will be rendered before dropdown has been selected | Yes | +| placeholderStyle | TextStyle | No | Styling for text placeholder | Yes | +| selectedTextStyle | TextStyle | No | Styling for selected text | Yes | +| selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} | Yes | +| style | ViewStyle | No | Styling for view container | Yes | +| containerStyle | ViewStyle | No | Styling for list container | Yes | +| maxHeight | Number | No | Customize max height for list container | Yes | +| minHeight | Number | No | Customize min height for list container | Yes | +| fontFamily | String | No | Customize font style | Yes | +| iconStyle | ImageStyle | No | Styling for icon | Yes | +| iconColor | String | No | Color of icons | Yes | +| itemContainerStyle | TextStyle | No | Styling for item container in list | Yes | +| itemTextStyle | TextStyle | No | Styling for text item in list | Yes | +| activeColor | String | No | Background color for item selected in list container | Yes | +| search | Boolean | No | Show or hide input search | Yes | +| searchQuery | (keyword: string, labelValue: string) => Boolean| No | Callback used to filter the list of items | Yes | +| inputSearchStyle | ViewStyle | No | Styling for input search | Yes | +| searchPlaceholder | String | No | The string that will be rendered before text input has been entered | Yes | +| renderInputSearch | (onSearch: (text:string) => void) => JSX.Element| No | Customize TextInput search | Yes | +| disable | Boolean | No | Specifies the disabled state of the Dropdown | Yes | +| dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' | Yes | +| autoScroll | Boolean | No | Auto scroll to index item selected, default is true | Yes | +| showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true | Yes | +| renderLeftIcon | (visible?: boolean) => JSX.Element | No | Customize left icon for dropdown | Yes | +| renderRightIcon | (visible?: boolean) => JSX.Element | No | Customize right icon for dropdown | Yes | +| renderItem | (item: object, selected: Boolean) => JSX.Element| No | Takes an item from data and renders it into the list | Yes | +| flatListProps | FlatListProps | No | Customize FlatList element | Yes | +| inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true| Yes | +| onFocus | () => void | No | Callback that is called when the dropdown is focused | Yes | +| onBlur | () => void | No | Callback that is called when the dropdown is blurred | Yes | +| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true | Yes | +| backgroundColor | String | No | Set background color | Yes | +| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example3 | Yes | +| onConfirmSelectItem | (item: object) => void | No | Selection callback. Refer example/src/dropdown/example3 | Yes | +| testID | String | No | Used to locate this view in end-to-end tests | Yes | +| itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]| Yes | +| accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected | Yes | +| itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]| 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. | Yes | +| excludeItems | Item[] | No | The array containing the items to be excluded. | Yes | +| excludeSearchItems | Item[] | No | The array containing the items to be excluded. | Yes | + + + +**MultiSelect**:多选组件 +| Props | Params | isRequire | Description | HarmonyOS Support | +| ------------------ | -----------------------------------------------------| --------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | +| mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. | Yes | +| data | Array | Yes | Data is a plain array | Yes | +| labelField | String | Yes | Extract the label from the data item | Yes | +| valueField | String | Yes | Extract the primary key from the data item | Yes | +| searchField | String | No | Specify the field of data list you want to search | Yes | +| onChange | (value[]) => void | Yes | Selection callback. A array containing the "valueField". | Yes | +| onChangeText | (search: string) => void | No | Callback that is called when the text input's text changes | Yes | +| value | Item[] | No | Set default value. A array containing the "valueField". | Yes | +| placeholder | String | No | The string that will be rendered before dropdown has been selected | Yes | +| placeholderStyle | TextStyle | No | Styling for text placeholder | Yes | +| style | ViewStyle | No | Styling for view container | Yes | +| containerStyle | ViewStyle | No | Styling for list container | Yes | +| maxHeight | Number | No | Customize max height for list container | Yes | +| minHeight | Number | No | Customize min height for list container | Yes | +| maxSelect | Number | No | maximum number of items that can be selected | Yes | +| fontFamily | String | No | Customize font style | Yes | +| iconStyle | ImageStyle | No | Styling for icon | Yes | +| iconColor | String | No | Color of icons | Yes | +| activeColor | String | No | Background color for item selected in list container | Yes | +| itemContainerStyle | TextStyle | No | Styling for item container in list | Yes | +| itemTextStyle | TextStyle | No | Styling for text item in list | Yes | +| selectedStyle | ViewStyle | No | Styling for selected view | Yes | +| selectedTextStyle | TextStyle | No | Styling for selected text | Yes | +| selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} | Yes | +| renderSelectedItem | (item: object, unSelect?: () => void) => JSX.Element | No | Takes an item from data and renders it into the list selected | Yes | +| alwaysRenderSelectedItem | Boolean | No | Always show the list of selected items | Yes | +| visibleSelectedItem | Boolean | No | Option to hide selected item list, Ẽx: visibleSelectedItem={false} | Yes | +| search | Boolean | No | Show or hide input search | Yes | +| searchQuery | (keyword: string, labelValue: string) => Boolean | No | Callback used to filter the list of items | Yes | +| inputSearchStyle | ViewStyle | No | Styling for input search | Yes | +| searchPlaceholder | String | No | The string that will be rendered before text input has been entered | Yes | +| renderInputSearch | (onSearch: (text:string) => void) => JSX.Element | No | Customize TextInput search | Yes | +| disable | Boolean | No | Specifies the disabled state of the Dropdown | Yes | +| dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' | Yes | +| showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true | Yes | +| renderLeftIcon | (visible?: boolean) => JSX.Element | No | Customize left icon for dropdown | Yes | +| renderRightIcon | (visible?: boolean) => JSX.Element | No | Customize right icon for dropdown | Yes | +| renderItem | (item: object, selected: Boolean) => JSX.Element | No | Takes an item from data and renders it into the list | Yes | +| flatListProps | FlatListProps | No | Customize FlatList element | Yes | +| inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true| Yes | +| onFocus | () => void | No | Callback that is called when the dropdown is focused | Yes | +| onBlur | () => void | No | Callback that is called when the dropdown is blurred | Yes | +| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true | Yes | +| inside | Boolean | No | inside default is false | Yes | +| backgroundColor | String | No | Set background color | Yes | +| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example7 | Yes | +| confirmUnSelectItem | Boolean | No | Turn On confirm un-select item. Refer example/src/dropdown/example7 | Yes | +| onConfirmSelectItem | (item: any) => void | No | Selection callback. Refer example/src/dropdown/example7 | Yes | +| testID | String | No | Used to locate this view in end-to-end tests | Yes | +| itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]| Yes | +| accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected | Yes | +| itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]| Yes | +| excludeItems | Item[] | No | The array containing the items to be excluded. | | +| excludeSearchItems | Item[] | No | The array containing the items to be excluded. | Yes | + + +**SelectCountry**:选择国家/地区组件,接收所有Dropdown的props并新增了以下props +| Props | Params | isRequire | Description | HarmonyOS Support | +| ---------- | ---------- | --------- | ------------------------------------ | ----------------- | +| imageField | String | Yes | Extract the image from the data item | Yes | +| imageStyle | ImageStyle | No | Styling for image | Yes | + +**Method**:方法 + +| API | Params | Description | HarmonyOS Support | +| ---- | ---------- | ------------------ | ----------------- | +| API | Params | Description | Yes | +| open | () => void | Open dropdown list | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-elements/react-native-elements/blob/next/LICENSE),请自由地享受和参与开源。 + \ No newline at end of file