React Native提供自動完成的下拉菜單的方法示例

更新時間：2022年10月25日 15:10:50 作者：Jovie

這篇文章主要為大家介紹了React Native提供自動完成的下拉菜單的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

一個具有搜索和自動完成（typeahead）功能的React Native的下拉項目選擇器。

如何使用它

1.安裝

# Yarn
$ yarn add react-native-autocomplete-dropdown
# NPM
$ npm i react-native-autocomplete-dropdown

2.導入自動完成的下拉組件

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.數據集應該是一個JS對象或數組

如下所示

[
  { 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>