推荐开源项目:React Native Dropdown Picker
React Native Dropdown Picker 是一个为 React Native 应用设计的下拉选择器组件。它提供了一个简单的接口来创建一个可定制的下拉菜单,用户可以从中选择一个或多个选项。
以下是如何使用该项目的基本步骤:
- 安装库:
npm install @react-native-community/picker react-native-dropdown-picker
- 在你的 React Native 代码中导入并使用:
import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import DropdownPicker from 'react-native-dropdown-picker';
const App = () => {
const [selectedItem, setSelectedItem] = useState(null);
return (
<View style={styles.container}>
<DropdownPicker
items={[
{ label: 'Iron Man', value: 'ironman' },
{ label: 'Captain America', value: 'captainamerica' },
{ label: 'Thor', value: 'thor' },
]}
defaultValue={selectedItem}
onChangeItem={item => setSelectedItem(item.value)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
},
});
export default App;
在这个例子中,我们创建了一个简单的下拉选择器,列出了三个英雄作为选项,并且使用了一个状态变量 selectedItem
来存储当前选中的值。当用户选择一个选项时,onChangeItem
回调会被触发,并更新 selectedItem
的值。
评论已关闭