탭탭카드놀이) FlatList에서 JS객체 배열 사용하기(문자열, 로컬이미지)

탭탭카드놀이를 만들며 공부한 내용입니다

의견을 주시면 감사하겠습니다

---

FlatList를 이용해서 스와이프로 카드를 넘기도록 구현하는데 JSON파일을 사용해서 구현하다가 막혔다

하루를 꼬박 써서 JS파일을 사용하는 해결법을 찾아냈고 기록을 위해 작성한다

JSON파일로 해결하지 못한 것부터 JS파일로 해결한 것까지 모두 기록하는 글이다

 

1. JSON파일 사용

각 카드마다 달라야 하는 값은 이미지와 배경 색깔, 텍스트이다

JSON파일을 준비하고 Word.js에서 FlatList를 통해 사용한다

- 디렉터리 구조
wordCard.json파일과 Word.js파일에서 작업했다

 

- JSON파일

image에는 이미지 파일의 상대 경로를 string형태로 저장,

name에는 출력될 텍스트를 string형태로 저장했다

(이미지 파일이 없어서 동일한 파일을 일단 넣어서 확인만 했음)

 

- JS파일

item.name의 경우는 정상적으로 출력이 됐지만 require에 들어가는 item.image 때문에 오류가 났다

- 출력된 오류

 

---

해결법

//wordCard.js

export const wordCard = [
    {
        "id" : 1, 
        "image" : require("../images/Lion1.png"), 
        "bgColor" : "red", 
        "name" : "사자"
    }, 
    {
        "id" : 2, 
        "image" : require("../images/Lion2.png"),
        "bgColor" : "blue",  
        "name" : "강아지"
    }, 
    {
        "id" : 3, 
        "image" : require("../images/EmptyHeart.png"), 
        "bgColor" : "green", 
        "name" : "고양이"
    }, 
    {
        "id" : 4, 
        "image" : require("../images/Heart1.png"), 
        "bgColor" : "gray", 
        "name" : "쥐"
    }, 
    {
        "id" : 5, 
        "image" : require("../images/Heart2.png"), 
        "bgColor" : "beige", 
        "name" : "소"
    }, 
    {
        "id" : 6, 
        "image" :require("../images/Heart3.png"), 
        "bgColor" : "tomato", 
        "name" : "말"
    }
]

- JSON파일을 JS파일로 교체하고 Word.js에서 import 한다

image파일은 require함수로 로컬에서 불러오고 배경색을 바꾸기 위한 bgColor을 추가했다

 

 

//Word.js
<CardSection style={{width:SCREEN_WIDTH}}> 
    <Card style={{backgroundColor : item.bgColor}}>
        <CheckBtn onPress={() => console.log('채크버튼')}>
            <CheckBtnImage source={require("../asset/images/EmptyCheck.png")}></CheckBtnImage>
        </CheckBtn>
        <CardImgShell>
            <CardImg source={item.image} resizeMode="contain"></CardImg>
        </CardImgShell>
        <CardContents onPress={() => console.log(item.name)}>
            <CardName>
                <CardNameText>{item.name}</CardNameText>
            </CardName>
        </CardContents>
    </Card>
</CardSection>

- Word.js

 <Card style={{backgroundColor : item.bgColor}}> -> 배경색을 item에서 받아온다

<CardImg source={item.image} resizeMode="contain" /> -> 카드 이미지를 item에서 받아온다 

 

(이미지 파일이 없어서 있는 거로 만들어놨음 추후에 교체 예정)