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

第ReactNative提供自動(dòng)完成的下拉菜單的方法示例目錄正文如何使用它1.安裝2.導(dǎo)入自動(dòng)完成的下拉組件3.基本使用方法4.數(shù)據(jù)集應(yīng)該是一個(gè)JS對(duì)象或數(shù)組5.可用的道具預(yù)覽

正文

一個(gè)具有搜索和自動(dòng)完成（typeahead）功能的ReactNative的下拉項(xiàng)目選擇器。

如何使用它

1.安裝

#Yarn

$yarnaddreact-native-autocomplete-dropdown

#NPM

$npmireact-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'}}//orjust'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:StylePropViewStyle

inputContainerStyle:StylePropViewStyle

rightButtonsContainerStyle:StylePropViewStyle

suggestionsListContainerStyle:StylePropViewStyle

suggestionsListTextStyle:StylePropTextStyle

ChevronIconComponent:JSX.Element;

ClearIconComponent:JSX.Element;

InputComponent:React.ComponentType;

ItemSeparatorComponent:JSX.Element;

EmptyResultComponent:JSX.Element;

emptyResultText:string;

flatListProps:FlatListPropsany

預(yù)覽

ThepostAutocompleteDropdownForReac