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

Z时代
2024-01-10
分类：综合

react

代码：

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