[React Native] FlatList를 통한 ListView구현

<FlatList/> 안에 data, renderItem 두 개의 props를 넣어 완성. data 에는 리스트로 보여주길 원하는 값을, renderItem은 리스트로 보여줄 템플릿을 렌더링한다.

renderItem={({item,index})=>{

 

여기에서 볼 수 있듯, renderItem= { ( {item,index} ) } 로 { 안에 ( 안에 {로 3중으로 해야 item을 제대로 활용할 수 있다.

 

또한, horizontal={true} 이나 pagingEnabled={true} 등을 사용할 수 있다.

 

다음으로 extraData 를 props로 전달함을 통해 data를 바꾸지 않고, extraData의 값을 변형하여 list를 re-render하라는 신호를 보낼 수 있다.

 

샘플 예시

 

/**
 * 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
} from 'react-native';

class ListItem extends Component{


    render(){

        return(
            <View style={{width:250,height:150}}>
                <Text style={{flex:1}}>WOW!</Text>
                <Text style={{flex:1}}>{this.props.title}</Text>
                <Text style={{flex:1}}>{this.props.desc}</Text>
            </View>
        );
    }
}


export default class App extends Component {


    returnFlatListItem(item,index){
        console.log(item.name1);
        console.log(item);
        return(
            <ListItem title={item.name1}
                      desc={item.text}
            />
        );
    }

    render() {

        return (
            <View style={styles.container}>
                <FlatList
                    style={styles.listContainer}
                    data={dataSample}
                    renderItem={({item,index})=>{
                        // console.log(item);
                        return(this.returnFlatListItem(item,index));
                    }
                    }
                />

            </View>
        );
    }
}

const dataSample=[
    {
        name1:"img1",
        text:"../assets/images/feather.png"
    },
    {
        name1:"img2",
        text:"../assets/images/miami.png"
    },
    {
        name1:"img3",
        text:"test~"
    },
    {
        name1:"img4",
        text:"test2222"
    },
    {
        name1:"img5",
        text:"final"
    }
];

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        paddingTop: 20,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'tomato',
        marginTop: Platform.OS === 'ios' ? 34 : 0
    },
    listContainer:{
        width:300,
        height:300,
        flexDirection: 'column',
        backgroundColor:'cyan',
    },
    listItem:{
        flex:1,
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'yellow',
        margin:10,
    }
});