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

import React from 'react';
import {SectionList, FlatList, TouchableOpacity, Text, View, Image} from 'react-native';
import {Dimensions} from "react-native";

const {width, height} = Dimensions.get('window');

class MyListItem extends React.PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      isSelected: false
    }
  }

  _onPress = (changeSelected) => {
    this.setState(previousState => (
      {
        isSelected: !previousState.isSelected,
      }
    ));
    changeSelected()
  };

  render() {
    const textColor = 'black';
    const sectionWidth = (width * 0.84 - 4*10)/3;
    const sectionHeight = height/20;
    return (
      <TouchableOpacity onPress={() => this._onPress(this.props.changeSelected)} disabled={this.props.hasSelected && !this.state.isSelected}>
        <View style={{width: sectionWidth, height: sectionHeight, backgroundColor: this.state.isSelected? '#00bfff':'lightgrey',
          alignItems: 'center', justifyContent: 'center', marginHorizontal: 3, borderRadius:15}}>
          <Text style={{textAlign: 'center', color: textColor, fontSize: 12, paddingTop: 2}}>{this.props.title}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

export default class SelectSec extends React.PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      hasSelected: false
    }
  }

  changeSelected = () => {
    this.setState(previousState => (
      {
        hasSelected: !previousState.hasSelected,
      }
    ));
  };

  _keyExtractor = (item, index) => item.id;

  _ItemSeparatorComponent= () => (
    <View style={{height: 10}}/>
  );

  _renderSectionListItem = ({item}) => (
    <FlatList
      data={item}
      numColumns={3}
      renderItem={this._renderItem}
      keyExtractor={this._keyExtractor}
      ItemSeparatorComponent={this._ItemSeparatorComponent}
    />
  );

  _renderItem = ({item}) => (
    <MyListItem
      id={item.id}
      title={item.title}
      changeSelected={this.changeSelected}
      hasSelected={this.state.hasSelected}
    />
  );

  _renderSectionHeader = ({section}) => (
    <Text style={{fontSize: 18, color: 'black', marginHorizontal: 10, marginTop: 30, marginBottom: 15}}>{section.title}</Text>
  );

  render() {
    const sections = [
      {title: '部门分类', data:[[
        {id:'0', title: '总体'},
        {id:'1', title: '管理信息化部'},
        {id:'2', title: '高性能部'},
        {id:'3', title: '科技云'},
        {id:'4', title: '大数据部'},
        {id:'5', title: '新媒体部'},
        {id:'6', title: '物联网中心'},
        {id:'7', title: '科研信息化部'},
        {id:'8', title: '亚马逊云'},
        {id:'9', title: '矿大附属中学'},
        {id:'10', title: '管理云'},
        {id:'11', title: '宁波材料所'},
        {id:'12', title: '遥地所'},
        ]]
      },
        {title: '部门分类', data:[[
          {id:'0', title: '机器分布'},
          {id:'1', title: '用户分布'},
          {id:'2', title: '存储分布'},
          {id:'3', title: '骨干流量图'},
          {id:'4', title: '机房分布'},
          {id:'5', title: '物联网标识节点'},
          {id:'6', title: '监控设备'},
        ]]
      },
    ];
    return (
      <SectionList
        sections={sections}
        keyExtractor={(item, index) => item + index}
        renderItem={this._renderSectionListItem}
        renderSectionHeader={this._renderSectionHeader}
        numColumns={3}
        columnWrapperStyle={{borderWidth:3, borderColor:'#f4f4f4'}}
      />
    );
  }
}
复制代码