推荐一款跨平台的React Native下拉选择组件:react-native-modal-dropdown
warning:
这篇文章距离上次修改已过182天,其中的内容可能已经有所变动。
React Native下拉选择器组件react-native-modal-dropdown
提供了一个简单的下拉选择器,适用于跨平台的React Native应用。
首先,您需要安装这个组件:
npm install react-native-modal-dropdown
或者使用yarn:
yarn add react-native-modal-dropdown
接下来,在您的React Native代码中引入并使用ModalDropdown
:
import React, { useState } from 'react';
import { Text, View } from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
const DropdownExample = () => {
const [selectedItem, setSelectedItem] = useState('');
const options = ['Item 1', 'Item 2', 'Item 3'];
return (
<View style={{ marginTop: 20 }}>
<ModalDropdown
options={options}
defaultIndex={options.indexOf(selectedItem)}
textStyle={{ color: 'blue' }}
onSelect={(index, value) => setSelectedItem(value)}
>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={{ marginRight: 10 }}>{selectedItem}</Text>
</View>
</ModalDropdown>
</View>
);
};
export default DropdownExample;
在这个例子中,我们创建了一个简单的下拉选择器,其中包含三个选项。用户选择一个选项后,该选项将显示在下拉选择器旁边。这个组件提供了一个可以自定义的下拉菜单,并且使用起来非常简单。
评论已关闭