标题: **React Native分段多选组件:React-Native-Sectioned-Multi-Select**
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';
const App = () => {
const [selectedItems, setSelectedItems] = React.useState({});
const renderItem = (item) => (
<View style={styles.item}>
<Text>{item.label}</Text>
</View>
);
const renderSectionHeader = (section) => (
<Text style={styles.sectionHeader}>{section.title}</Text>
);
const sections = [
{
title: 'Section 1',
data: [
{ key: '1', label: 'Item 1' },
{ key: '2', label: 'Item 2' },
],
},
{
title: 'Section 2',
data: [
{ key: '3', label: 'Item 3' },
{ key: '4', label: 'Item 4' },
],
},
];
return (
<View style={styles.container}>
<SectionedMultiSelect
styles={styles}
renderItem={renderItem}
renderSectionHeader={renderSectionHeader}
sections={sections}
selectedItems={selectedItems}
onSelectedItemsChange={setSelectedItems}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
},
item: {
height: 40,
justifyContent: 'center',
paddingLeft: 15,
borderColor: '#ccc',
borderBottomWidth: 1,
},
sectionHeader: {
paddingTop: 10,
paddingLeft: 15,
fontWeight: 'bold',
},
});
export default App;
这个代码实例展示了如何在React Native应用中使用react-native-sectioned-multi-select
组件来创建一个分段的多选列表。它定义了自定义的渲染函数来定制每个项目和节标题的外观,并设置了节的数据结构。用户可以选择节中的多个项目,并且可以通过selectedItems
状态跟踪所选择的项目。
评论已关闭