SectionList中包含FlatList实现一行多个item

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'
  }
});复制代码