import React from 'react';
import {
SectionList,
TouchableOpacity,
Text,
View
} from 'react-native';
import styles from './Selector.style'
const section = [
{title: '部门分类', data:[[
{id:'0', title: '总体', tag: 1},
{id:'1', title: '管理信息化部', tag: 1},
{id:'2', title: '高性能部', tag: 1},
{id:'3', title: '科技云', tag: 1},
{id:'4', title: '大数据部', tag: 1},
{id:'5', title: '新媒体部', tag: 1},
{id:'6', title: '物联网中心', tag: 1},
{id:'7', title: '科研信息化部', tag: 1},
{id:'8', title: '亚马逊云', tag: 1},
{id:'9', title: '矿大附属中学', tag: 1},
{id:'10', title: '管理云', tag: 1},
{id:'11', title: '宁波材料所', tag: 1},
{id:'12', title: '遥地所', tag: 1},
]]
},
{title: '分布分类', data:[[
{id:'13', title: '机器分布', tag: 2},
{id:'14', title: '用户分布', tag: 2},
{id:'15', title: '存储分布', tag: 2},
{id:'16', title: '骨干流量图', tag: 2},
{id:'17', title: '机房分布', tag: 2},
{id:'18', title: '物联网标识节点', tag: 2},
{id:'19', title: '监控设备', tag: 2},
]]
},
];
export default class Selector extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
hasSelected1: '0',
hasSelected2: '13',
}
}
changeSelect1 = (id) => {
this.setState(
{
hasSelected1: id,
}
);
};
changeSelect2 = (id) => {
this.setState(
{
hasSelected2: id,
}
);
};
renderSectionHeader = ({section}) => (
<Text style={styles.header}>{section.title}</Text>
);
renderSectionListItem = ({item}) => (
<View style={styles.item}> { item.map((item, i) => ( this.renderItem(item, i) )) } </View>
);
renderItem = (item, i) => (
<TouchableOpacity key={i} onPress={ () => item.tag === 1 ? this.changeSelect1(item.id): this.changeSelect2(item.id) } style={[styles.touch, item.tag === 1 ? {backgroundColor: this.state.hasSelected1 === item.id? '#00bfff':'lightgrey',}: {backgroundColor: this.state.hasSelected2 === item.id? '#00bfff':'lightgrey',} ]} > <Text style={styles.text}>{item.title}</Text> </TouchableOpacity>
);
render() {
return (
<SectionList sections={section} keyExtractor={(item, index) => item + index} renderItem={this.renderSectionListItem} renderSectionHeader={this.renderSectionHeader} columnWrapperStyle={{borderWidth:3, borderColor:'#f4f4f4'}} />
);
}
}
const styles = StyleSheet.create({
item: {
flexDirection: 'row',
flexWrap: 'wrap'
},
touch: {
width: sectionWidth,
height: sectionHeight,
alignItems: 'center',
justifyContent: 'center',
marginLeft: 5,
marginBottom: 5,
borderRadius:15
},
text: {
textAlign: 'center',
color: 'black',
fontSize: 12,
paddingTop: 2
},
header: {
fontSize: 18,
color: 'black',
paddingHorizontal: 10,
paddingTop: 30,
paddingBottom: 15,
backgroundColor: '#f4f4f4'
}
});
今天的文章SectionList中包含FlatList实现一行多个item分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/18557.html