React Native：分组列表组件SectionList

官方案例

如果要渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择。

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

export default class SectionListBasics extends Component {
     
  render() {
     
    return (
      <View style={
     styles.container}>
        <SectionList
          sections={
     [
            {
     title: 'D', data: ['Devin']},
            {
     title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={
     ({
     item}) => <Text style={
     styles.item}>{
     item}</Text>}
          renderSectionHeader={
     ({
     section}) => <Text style={
     styles.sectionHeader}>{
     section.title}</Text>}
          keyExtractor={
     (item, index) => index}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
     
  container: {
     
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
     
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
     
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

案例：

const CITY_NAMES = [
    {
     title: "一线", data: ["北京", "上海", "广州", "深圳",]},
    {
     title: "二线", data: ["成都", "武汉", "南京", "杭州"]},
    {
     title: "三线", data: ["梅州", "中山", "东莞", "茂名"]}
]

type Props = {
     };
export default class App extends Component<Props> {
     

    render() {
     
        return (
            <View style={
     styles.container}>
                <SectionList
                    //1数据的获取和渲染
                    sections={
     CITY_NAMES}   //分类列表的数据源data
                    renderItem={
     (data) => this.renderItemView(data)}


                    //2渲染分类标题(从数据源中解构出section)
                    renderSectionHeader={
     ({
     section}) =>
                        this.renderHeaderView(section)}

                    ItemSeparatorComponent={
     () =>
                        < View style={
     styles.separator}/>}//分割线
                />
            </View>

        );
    }

    //条目布局
    renderItemView(data) {
     
        return <View style={
     styles.item}>
            <Text style={
     styles.text}>{
     data.item}</Text>
        </View>
    }

    //条目布局
    renderHeaderView(section) {
     
        return <View style={
     styles.SectionListHeader}>
            <Text style={
     styles.text}>{
     section.title}</Text>
        </View>
    }
}

const styles = StyleSheet.create({
     
    container: {
     
        flex: 1,
    },
    item: {
     
        backgroundColor: '#cdd2ff',
        height: 80,
        marginRight: 15,
        marginLeft: 15,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 5,//漂浮的效果
        borderRadius: 5,//圆角
    },
    //标题样式
    SectionListHeader: {
     
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#9ea1ff',
        marginRight: 15,
        marginLeft: 15,
        borderRadius: 5,//圆角
    },
    text: {
     
        color: '#401d14',
        fontSize: 20,
    },
    //分割线样式
    separator: {
     
        height: 1,
        backgroundColor: 'gray',
        marginRight: 15,
        marginLeft: 15,
    }
});

效果图：