React Native提供自動(dòng)完成的下拉菜單的方法示例
正文

一個(gè)具有搜索和自動(dòng)完成(typeahead)功能的React Native的下拉項(xiàng)目選擇器。
如何使用它
1.安裝
# Yarn $ yarn add react-native-autocomplete-dropdown # NPM $ npm i react-native-autocomplete-dropdown
2.導(dǎo)入自動(dòng)完成的下拉組件
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
3.基本使用方法
const [selectedItem, setSelectedItem] = useState(null);
<AutocompleteDropdown
clearOnFocus={false}
closeOnBlur={true}
closeOnSubmit={false}
initialValue={{ id: '2' }} // or just '2'
onSelectItem={setSelectedItem}
dataSet={[
{ id: '1', title: 'Alpha' },
{ id: '2', title: 'Beta' },
{ id: '3', title: 'Gamma' },
]}
/>;
4.數(shù)據(jù)集應(yīng)該是一個(gè)JS對(duì)象或數(shù)組
如下所示
[
{ id: "1", title: "Alpha" },
{ id: "2", title: "Beta" },
{ id: "3", title: "Gamma" }
]
5.可用的道具
dataSet?: TAutocompleteDropdownItem[]; inputHeight?: number; suggestionsListMaxHeight?: number; initialValue?: string | object; loading?: boolean; useFilter?: boolean; showClear?: boolean; showChevron?: boolean; closeOnBlur?: boolean; closeOnSubmit?: boolean; clearOnFocus?: boolean; debounce?: number; direction?: 'down' | 'up'; position?: 'absolute' | 'relative'; bottomOffset?: number; textInputProps?: TextInputProps; onChangeText?: (text: string) => void; onSelectItem?: (item: TAutocompleteDropdownItem) => void; renderItem?: ( item: TAutocompleteDropdownItem, searchText: string, ) => JSX.Element; onOpenSuggestionsList?: (isOpened: boolean) => void; onClear?: () => void; onChevronPress?: () => void; onSubmit?: TextInputProps['onSubmitEditing']; onBlur?: TextInputProps['onBlur']; onFocus?: TextInputProps['onFocus']; controller?: (controller: AutocompleteDropdownRef) => void; containerStyle?: StyleProp<ViewStyle>; inputContainerStyle?: StyleProp<ViewStyle>; rightButtonsContainerStyle?: StyleProp<ViewStyle>; suggestionsListContainerStyle?: StyleProp<ViewStyle>; suggestionsListTextStyle?: StyleProp<TextStyle>; ChevronIconComponent?: JSX.Element; ClearIconComponent?: JSX.Element; InputComponent?: React.ComponentType; ItemSeparatorComponent?: JSX.Element; EmptyResultComponent?: JSX.Element; emptyResultText?: string; flatListProps?: FlatListProps<any>
預(yù)覽

The postAutocomplete Dropdown For React Nativeappeared first onReactScript.
以上就是React Native提供自動(dòng)完成的下拉菜單的方法示例的詳細(xì)內(nèi)容,更多關(guān)于React Native自動(dòng)完成下拉菜單的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React如何使用axios請(qǐng)求數(shù)據(jù)并把數(shù)據(jù)渲染到組件
這篇文章主要介紹了React如何使用axios請(qǐng)求數(shù)據(jù)并把數(shù)據(jù)渲染到組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
React Native仿美團(tuán)下拉菜單的實(shí)例代碼
本篇文章主要介紹了React Native仿美團(tuán)下拉菜單的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
詳解如何在React單頁面應(yīng)用中捕獲錯(cuò)誤
在當(dāng)前的Web開發(fā)中,使用React構(gòu)建單頁面應(yīng)用(SPA)已經(jīng)成為一種常見的做法,然而,當(dāng)應(yīng)用程序遇到錯(cuò)誤時(shí),有可能會(huì)導(dǎo)致整個(gè)頁面崩潰,給用戶帶來不好的體驗(yàn),本文將介紹如何在React單頁面應(yīng)用中捕獲錯(cuò)誤,以防止整個(gè)頁面的崩潰,需要的朋友可以參考下2023-09-09
react 下拉框內(nèi)容回顯的實(shí)現(xiàn)思路
這篇文章主要介紹了react 下拉框內(nèi)容回顯,實(shí)現(xiàn)思路是通過將下拉框選項(xiàng)的value和label一起存儲(chǔ)到state中, 初始化表單數(shù)據(jù)時(shí)將faqType對(duì)應(yīng)的label查找出來并設(shè)置到Form.Item中,最后修改useEffect,需要的朋友可以參考下2024-05-05

