react-native(리액트 네이티브) component - SectionList

react-native(리액트 네이티브) component - SectionList

import React, {Component} from 'react';

import {StyleSheet, Text, SectionList, Dimensions,} from 'react-native';

const { height, width } = Dimensions.get("window");

export default class MyComponent extends Component {

render() {

return (

<SectionList

renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}

renderSectionHeader={({section: {title}}) => (

<Text style={{fontWeight: 'bold'}}>{title}</Text>

)}

sections={[

{title: 'Title1', data: ['item1', 'item2']},

{title: 'Title2', data: ['item3', 'item4']},

{title: 'Title3', data: ['item5', 'item6']},

]}

keyExtractor={(item, index) => item + index}

/>

);

}

}

const styles = StyleSheet.create({

separator: {

flex: 1,

height: StyleSheet.hairlineWidth*10,

width: width,

backgroundColor: 'red',

},

});