React-Native之（小白计划七）SectionList带分类的列表

亦凉 2022-05-23 09:15 180阅读 0赞

# 代码： #

import React, { Component } from 'react';
    
    import {
        StyleSheet,
        Text,
        View,
        SectionList,//分类列表
    } from 'react-native';
    
    
    const CITY_NAMES = [
        {
      title:'一线',data:['北京','上海','广州','深圳']},
        {
      title:'二线',data:['苏州','成都','武汉','郑州']},
        {
      title:'二三线',data:['洛阳','厦门','青岛','拉萨']},
        ];
    
    export default class FlatListDemo extends Component<Props> {
        static navigationOptions = {
            title: 'SectionList',
        };
    
    
        render() {
            return (
                <View style={styles.container}>
                    <SectionList
                        //1数据的获取和渲染
                        sections={CITY_NAMES}   //分类列表的数据源data
                        renderItem={(data) =><View style={styles.item}>
                                                  <Text style={styles.text}>{data.item}</Text>
                                             </View>}
    
    
                        //2渲染分类标题(从数据源中解构出section)
                        renderSectionHeader={({section})=><View style={styles.SectionListHeader}>
                                                            <Text style={styles.text}>{section.title}</Text>
                                                       </View>}
                        ItemSeparatorComponent={()=>< View  style={styles.separator}/>}//分割线
                    />
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        item: {
            backgroundColor: '#cdd2ff',
            height: 100,
            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,
        }
    });

# 效果： #

![70][]

[70]: /images/20220523/9d17b55a24f54b8c84a61187a4fd387d.png