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>
        );
    }

}

二、效果图