推荐使用:React Native Select Multiple —— 多选列表组件
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SelectMultiple from 'react-native-select-multiple';
const SelectMultipleExample = () => {
const [selectedItems, setSelectedItems] = useState([]);
const [options, setOptions] = useState([
{ key: '1', label: 'Option 1' },
{ key: '2', label: 'Option 2' },
{ key: '3', label: 'Option 3' },
// ...更多选项
]);
const onSelectedItemsChange = (selectedItems) => {
setSelectedItems(selectedItems);
};
return (
<View style={styles.container}>
<SelectMultiple
style={styles.selectMultiple}
textStyle={styles.selectMultipleText}
items={options}
selectedItems={selectedItems}
onSelectedItemsChange={onSelectedItemsChange}
alignLeft={true}
selectText="Select options"
/>
<View style={styles.selectedItemsContainer}>
{selectedItems.map((item) => (
<Text key={item.key}>{item.label}</Text>
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
selectMultiple: {
// 样式定义
},
selectMultipleText: {
// 样式定义
},
selectedItemsContainer: {
// 样式定义
},
});
export default SelectMultipleExample;
这个例子展示了如何在React Native应用中使用SelectMultiple
组件来创建一个多选列表。用户可以选择多个选项,并且选中的项目会被展示在屏幕上。这个例子使用了React的函数组件和Hooks API来管理状态,这是当前React Native的推荐做法。
评论已关闭