目录正文如何使用它1.安装2.导入自动完成的下拉组件3.基本使用方法4.数据集应该是一个js对象或数组5.可用的道具预览正文 一个具有搜索和自动完成(typeahead)功能的Re
一个具有搜索和自动完成(typeahead)功能的React Native的下拉项目选择器。
# Yarn
$ yarn add react-native-autocomplete-dropdown
# NPM
$ npm i react-native-autocomplete-dropdown
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
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' },
]}
/>;
如下所示
[
{ id: "1", title: "Alpha" },
{ id: "2", title: "Beta" },
{ id: "3", title: "Gamma" }
]
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>
The postAutocomplete Dropdown For React Nativeappeared first onReactScript.
以上就是React Native提供自动完成的下拉菜单的方法示例的详细内容,更多关于React Native自动完成下拉菜单的资料请关注编程网其它相关文章!
--结束END--
本文标题: ReactNative提供自动完成的下拉菜单的方法示例
本文链接: https://www.lsjlt.com/news/170118.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0