ReactNative中SectionList组件

一个简单sectionlist的实现
效果

代码实现：

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Text,
  SectionList,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

var Diemnsions = require('Dimensions');
var width = Diemnsions.get('window').width;

const arr = [
  {key: 'Section 1', data: [{title: 'A'},{title: 'B'},{title: 'C'},{title: 'D'}]},
  {key: 'Section 2', data: [{title: 'A'},{title: 'B'},{title: 'C'},{title: 'D'}]},
  {key: 'Section 3', data: [{title: 'A'},{title: 'B'},{title: 'C'},{title: 'D'}]},
  {key: 'Section 4', data: [{title: 'A'},{title: 'B'},{title: 'C'},{title: 'D'}]},
  {key: 'Section 5', data: [{title: 'A'},{title: 'B'},{title: 'C'},{title: 'D'}]},
  {key: 'Section 6', data: [{title: 'A'},{title: 'B'},{title: 'C'},{title: 'D'}]},

];

export default class App10 extends Component {

  constructor(props) {
    super(props);
  }
  render() {

    return (

      <View style={{ flex: 1 }}>
        <View style = {style.titleStyle}>
          <Text>SectionList</Text>
        </View>


        <SectionList
          renderSectionHeader={this.sectionShow}
          renderItem={this.cellShow}
          sections={arr}
          keyExtractor={(item, index) => (index)}
          //组的分割线
          SectionSeparatorComponent= {()=><View style={{height:5,width:200,backgroundColor:'blue'}}/>}
          //cell的分割线
          ItemSeparatorComponent = {()=><View style={{height:10,width:100,backgroundColor:'red'}}/>}

          ListHeaderComponent = {<View style={{alignItems:'center',
            justifyContent:'center',height:64,width:width,backgroundColor:'purple'}}><Text>头部</Text></View>}
          ListFooterComponent = {<View style={{alignItems:'center',
            justifyContent:'center',height:64,width:width,backgroundColor:'purple'}}><Text>尾部</Text></View>}

          numColumns = {3}
          columnWrapperStyle={{borderWidth:10,backgroundColor:'black',paddingLeft:20}}/>
      </View>
    );
  }

  sectionShow = (info) => {
    return <Text style={{height:44,backgroundColor:'yellow',}}>{info.section.key}</Text>
  }

  cellShow = (info) => {
    return <Text style={{height:44,backgroundColor:'orange'}}>{info.item.title}</Text>
  }
}

const style = StyleSheet.create({

  titleStyle:{
    marginTop:25,
    height:44,
    backgroundColor:'red',
    alignItems:'center',
    justifyContent:'center'
  }
})