[react-native] 가로 이미지 리스트뷰 만들기!

이번에는 이미지가 들어가 있는 가로 listview를 만들어보도록하자 

기존의 listview 대신 이번에는 flatlist 를 이용하려고한다.

flatlist에는 data 가 들어갈 파일하나와 data를 바인딩해서 보여줄 파일 하나 총 두개가 필요하다.

먼저 data에는 총 4개의 데이터를 넣었다.

const flatListData = [
    {
        "key" :"1",
        "name" :"Cream Tea",
        "foodDescription" : "this is cup of cream tea",
        "imageUrl" : "https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
    },
    {
        "key" :"2",
        "name" :"Cream Tea",
        "foodDescription" : "this is cup of cream tea",
        "imageUrl" : "https://homepages.cae.wisc.edu/~ece533/images/arctichare.png"
    },
    {
        "key" :"3",
        "name" :"Cream Tea",
        "foodDescription" : "this is cup of cream tea",
        "imageUrl" : "https://homepages.cae.wisc.edu/~ece533/images/baboon.png"
    },
    {
        "key" :"4",
        "name" :"Cream Tea",
        "foodDescription" : "this is cup of cream tea",
        "imageUrl" : "https://homepages.cae.wisc.edu/~ece533/images/frymire.png"

    },
];

export  default flatListData;

그 다음 해당 데이터를 바인딩 해서 쓰는 화면을 만들자.

import React, {Component} from 'react';
import {AppRegistry,Image,FlatList,StyleSheet,Text,View} from 'react-native';
import flatListData from './flatlistdata'

class FlatListItem extends Component{
    render() {
        return(
          <View style ={{flex:1,marginRight: 30,justifyContent: 'center', alignItems: 'center'}}>
              <Image source={{uri:this.props.item.imageUrl ,width : 300 , height: 300}}></Image>
              <Text>{this.props.item.key}</Text>
          </View>

        );
    }
}
class BasicFlatList extends Component {
    render() {
        return (
           <View style={{flex: 1,  marginTop: 22 , justifyContent: 'center'}}>
               <FlatList
                    data ={flatListData}
                    horizontal = {true}
                    renderItem = {({item,index})=>{
                        // console.log(`Item=${JSON.stringify(item)}, index= ${index}`)
                        return(
                            <FlatListItem item={item} index = {index}/>
                        );
                    }}
               />
           </View>
        );
    }
}

export default BasicFlatList;

현재는 2개의 데이터만 뽑아 왔지만 추가적으로 데이터를 가지고 오고싶으면, this.props.item.(원하는 컬럼의 이름)을 추가하면 된다.

flatlist는 default  아이템 랜더링 방향은 세로이지만 horizontal = {true} 를 추가하면 가로에서 세로로 변경된다.

마지막으로 App.js에서 BasicFlatList를 불러서 뷰를 랜더링하자.

import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Image} from 'react-native';
import BasicFlatList from './BasicFlatList'

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <BasicFlatList/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

모든 작업을 마치면 결과는 다음과 같을 것이다.