HybridApp-React Native 2세대 (ListView - SectionList)

SectionList는 아래와 같이 필수 속성을 이용해야 한다.

-sections

-renderSectionHeader

-renderItem

-keyExtractor (필수는 아니지만 키값이 없을 경우 경고창이 나온다. 그것을 해결하기 위해 사용)

<최종화면> - ListView를 이용해서 데이터를 보여준다.

---

AVD를 실행시키고 , cmd창에서 작업할 경로까지 접근하여 initd을 하자.

RN10SectionList폴더에 새 파일(Main.js)을 만들자.

 

임의로 대량의 데이터를 만들고, SectionList를 사용해보자.

해당 리스트를 클릭했을때, 해당 이름이 알림창에 나오도록 하자.

---

<복붙용 코드>

import React, {Component} from 'react';
import {View, Text, StyleSheet, SectionList, TouchableOpacity, Alert} from 'react-native';
 
export default class Main extends Component{
 
    constructor(){
        super();
 
        // 대량의 데이터
        this.state={
            sectionDatas:[
                // SectionList의 섹션 하나 객체에는 title, data 2개의 프로퍼티 필요
                {title:'한식',data:["백반","고기산적","비빔밥"]},
                {title:'중식',data:["짜장면","짬뽕","탕수육"]},
                {title:'일식',data:["초밥","회","덮밥"]},
            ],
        };
    }
    render(){
        return(
            <View style={style.root}>
                {/* 리스트에 그룹칭이 가능하 리스트뷰 */}
                {/* 3개의 필수 속성 */}
                {/* 1) section - 섹션 title과 섹션별 data들을 가진 대량의 데이터*/}
                {/* 2) renderSectionHeader - 섹션별 title영역에 그려질 컴포넌트를 리턴하는 콜백함수 지정 */}
                {/* 3) renderItem - 섹션별 Item영역에 그려질 컴포넌트를 리턴하는 콜백함수 지정 */}
                <SectionList
                        sections={this.state.sectionDatas}
                        renderSectionHeader={ ({section})=>{
                            return (
                                <View style={style.sectionHeader}>
                                    <Text style={style.sectionTitle}>{section.title}</Text>
                                </View>
                            );
                        }}
                        renderItem={ ({item,index,section})=>{
                                return(
                                    <TouchableOpacity style={style.itemView} onPress={()=>{this.clickItem(item)}} >
                                        <Text style={style.itemView}>{item}</Text>
                                    </TouchableOpacity>
                                );
                        }}
                    // keyExtractor={(item,index)=>{return index}}
                    keyExtractor={(item,index)=> index}
                    >
                    
                    </SectionList>
            </View>
        );
    }//render method..
    clickItem=(item)=>{
        Alert.alert(item);
    }
}
 
const style=StyleSheet.create({
    root:{flex:1, padding:16},
    sectionHeader:{
        padding:4,
        backgroundColor:"#eeeeee",
    },
    sectionTitle:{
        fontSize:24,
        fontWeight:'bold',
    },
    itemView:{
        padding:8,
    },
});