importReactfrom'react';import{SectionList,TouchableOpacity,Text,View}from'react-native';importstylesfrom'./Selector.style'constsection=[{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},]]},];exportdefaultclassSelectorextendsReact.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})=>(<Textstyle={styles.header}>{section.title}</Text>);renderSectionListItem=({item})=>(<Viewstyle={styles.item}>{item.map((item,i)=>(this.renderItem(item,i)))}</View>);renderItem=(item,i)=>(<TouchableOpacitykey={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',}]}><Textstyle={styles.text}>{item.title}</Text></TouchableOpacity>);render(){return(<SectionListsections={section}keyExtractor={(item,index)=>itemindex}renderItem={this.renderSectionListItem}renderSectionHeader={this.renderSectionHeader}columnWrapperStyle={{borderWidth:3,borderColor:'#f4f4f4'}}/>);}}conststyles=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
访客