React native 中 SectionList用法

一、代码

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

 export default class App extends React.Component {

     constructor(props) {
         super(props);
     }

     _renderItem = (info) => {
         var txt = '  ' + info.item.title;
         return <Text
             style={{ height: 60, textAlignVertical: 'center', backgroundColor: "#ffffff", color: '#5C5C5C', fontSize: 15 }}>{txt}</Text>
     }

     _sectionComp = (info) => {
         var txt = info.section.key;
         return <Text
             style={{ height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: '#9CEBBC', color: 'white', fontSize: 30 }}>{txt}</Text>
     }

     render() {
         var sections = [
             { key: "A", data: [{ title: "爱" }, { title: "啊" }, { title: "奥" }] },
             { key: "B", data: [{ title: "不" }, { title: "吧" }, { title: "包" }] },
             { key: "C", data: [{ title: "吃" }, { title: "车" }] },
             { key: "W", data: [{ title: "王者" }, { title: "王者荣耀" }] },
         ];

         return (
             <View style={{ flex: 1 }}>
                 <SectionList
                     numColumns ={3}
                     horizontal={false}
                     renderSectionHeader={this._sectionComp}
                     renderItem={this._renderItem}
                     sections={sections}
                     ItemSeparatorComponent={() => <View><Text></Text></View>}
                     ListHeaderComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录</Text></View>}
                     ListFooterComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录尾部</Text></View>}
                 />
             </View>
         );
     }

 }

二、效果图