[React Native] SectionList를 통해 전화번호부/사전같은 기능 만들기

SectionList 내부에 sections에는 데이터를, renderItem을 통해 flatList와 같은 기능을 준다. 다음으로 renderSectionHeader를 통해 각 섹션마다 헤더(사전으로 치자면 A,B,C,D...)를 추가해준다.

 

데이터는 크게 섹션헤더, 섹션내 데이터 두 가지로 이뤄진다.

섹션헤더는 String값, 섹션 내 데이터는 { } 형식으로, 아래쪽 '데이터 예시’ 파트에 간단히 예시가 소개되어있다.

 

 

샘플 예시

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    Dimensions,
    ScrollView,
    FlatList,
    TouchableOpacity,
    Platform,
    SectionList
} from 'react-native';
import dataSample  from "../assets/data/dataSample";


const myScreen = Dimensions.get('window');

class SectionItem extends Component{


    render(){
        return(
            <View style={{flex:1,backgroundColor:'cyan'}}>
                <Text style={styles.textStyle}>{this.props.item.name}</Text>
                <Text style={styles.textStyle}>{this.props.item.description}</Text>
            </View>
        );
    }
}

class SectionHeader extends Component{
    render(){
        return(
            <View style={{flex:1,backgroundColor:'green'}}>
                <Text style={styles.textStyle}>{this.props.section.title}</Text>
            </View>
        );
    }
}

export default class App extends Component {

    render() {

        return (
            <View style={styles.container}>
                <SectionList sections={dataSample}

                             renderItem={({item,index})=>{
                                 console.log(item);
                                 return(
                                     <SectionItem
                                         item={item}
                                         index={index}
                                     >

                                     </SectionItem>
                                 );
                             }}
                             renderSectionHeader={({section})=>{
                                 return(
                                     <SectionHeader section={section}/>
                                 );
                             }}
                             keyExtractor={(item,index)=>item.name}
                >
                </SectionList>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width:myScreen.width,
        height:myScreen.height,
        flexDirection: 'column',
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'tomato',
        marginTop: Platform.OS === 'ios' ? 20 : 0,
    },
    textStyle:{
        fontSize:16,
        fontWeight:'bold',
        color:"red",
        marginLeft:20,
        marginRight:10
    }
});