[React Native] 3X3 FlatList 배열 만들기

 

메인 화면에서 다운로드한 책을 3x3 열로 보여주기 위해 react-native-grid-layout을 이용하고자 했으나

번들 오류로 인해 react-native에 포함되어 있는 FlatList로 grid layout을 구현하였다.

여기를 참고하여 코드를 작성하였습니다.

 

 

1. 배경화면 넣기

 

ImageBackground를 이용합니다.

Image와 다르게 child를 가질 수 있어 child로 다른 components를 포함할 수 있습니다.

 

1.1 local file 이미지 경로에 추가하기

<ImageBackground source={require('./assets/background_image.jpg')}  style={styles.backgroundImage}>

source={require('local_file_경로')}와 같이 사용합니다.

 

1.2 이미지 크기 늘리기

배경화면으로 이미지를 사용하기 위해

width와 height의 범위를 100%로 합니다.

 

1.2.1 이미지 크기에 맞게 늘리기

이미지를 확대하다보면 가로나 세로가 잘리는 경우가 있는데 resizeMode 속성을 이용하면 됩니다.

- resizeMode: 'contain'

가로 세로 중 넓은 부분이 100%를 차지할 때 까지만 이미지를 늘리는 것입니다.

본 이미지의 전체를 보여줄 때 사용합니다.

 

- resizeMode: 'cover'

이미지의 가로 세로 중 좁은 부분이 부모 컴포넌트의 100%를 차지할 때까지 이미지를 늘리는 것입니다.

이미지는 잘리지만 부모 컴포넌트를 가득 채우고 싶을 때 사용합니다.

 

[참고: 여기]

 

 

2. FlatList 배열 만들기

 

2.1 FlatList data에 넣을 bookArr 배열을 만듭니다.

저 같은 경우는 json 타입으로 idx와 이미지 경로를 가진 데이터 배열을 선언해 주었습니다.

 {
    idx:"1",
    src:require("./assets/book1.png"),
  },

 

2.2 renderItem

bookArr의 한 원소가 Item이 되고 한 item을 어떻게 처리할지 코드를 짭니다.

터치 가능하게 + 행으로 추가 + 이미지 출력

renderItem={({item}) => (
                <TouchableOpacity>
                <View
                  style={{
                    flex:1,
                    flexDirection:'column',
                    margin:10
                  }}>
                    <Image
                      style={styles.imageThumbnail}
                      source={item.src}
                    />
                  </View>
                  </TouchableOpacity>
              )}

 

2.3 한 colunm을 이루는 원소의 개수를 정해줍니다.

              numColumns={3}

 

 

3. 실행 화면

 

 

4. 전체 코드

 

import React, { Component } from 'react';
import {StyleSheet,View, Image,ImageBackground, FlatList} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'column',
  },
  backgroundImage:{
    width: "100%",
    height:"100%",
  },
  boardImage:{
    marginTop:"10%",
    marginLeft:"5%",
    width:"95%",
    height:"95%",
  },
  imageThumbnail: {
    justifyContent: 'center',
    alignItems: 'center',
    resizeMode:'contain',
    width:190,
    height:250,
  },
  bookContainer: {
    marginHorizontal:"8%",
    marginVertical:"10%",
  },
});

const bookArr=[
  {
    idx:"1",
    src:require("./assets/book1.png"),
  },
  {
    idx:"2",
    src:require("./assets/book2.jpg"),
  },
  {
    idx:"3",
    src:require("./assets/book3.jpg"),
  },
  {
    idx:"4",
    src:require("./assets/book4.jpg"),
  },
  {
    idx:"5",
    src:require("./assets/book5.jpg"),
  },
  {
    idx:"6",
    src:require("./assets/book6.jpg"),
  },
  {
    idx:"7",
    src:require("./assets/book7.jpg"),
  },
];

export default class Mainpage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ImageBackground source={require('./assets/background_image.jpg')}  style={styles.backgroundImage}>
          <ImageBackground source={require('./assets/greenboard.png')} style={styles.boardImage}>
            <FlatList
              keyExtractor={item => item.idx}
              data={bookArr}
              style={styles.bookContainer}
              renderItem={({item}) => (
                <TouchableOpacity>
                <View
                  style={{
                    flex:1,
                    flexDirection:'column',
                    margin:10
                  }}>
                    <Image
                      style={styles.imageThumbnail}
                      source={item.src}
                    />
                  </View>
                  </TouchableOpacity>
              )}
              numColumns={3}
            />
          </ImageBackground>
        </ImageBackground>
      </View>
    );
  }
 
  goSub1Screen(){
    this.props.navigation.navigate('Mypage');
    
    console.log("pressed");
  }

}