React Native 여러 이미지들을 약간씩만 겹쳐서 쌓기

overlap, overlay, images, stack ... 등 여러 키워드로 오랜 시간 구글링하다가 포기하길 반복하다가 

드디어 해결했다~~~

 

overlap images로 검색하면 다 1-2개 이미지만 겹치는 방법이 나와 있어서 적용하기 어려웠다

나는 user input에 따라 길이가 달라지는 이미지들의 리스트를 보여주는데, 이 이미지들을 조금씩 겹치게 하는 것이 목적이었다 

 

나는 아래서부터 위로 하나씩 component를 쌓는 코드를 짜서 reversed_index라는 새로운 변수를 만들어 줘야 했다.

 

위부터 0, 1, 2 index를 갖는데 이를 아래부터 0, 1, 2 로 바꿔준 index를 reversed_index라는 변수에 저장하고

이 reversed_index가 0이면 (=맨 아래 component면) 아무 style을 적용하지 않는다. 얘는 겹칠 게 없으니까

그 외의 경우엔 position: 'relative'으로 설정하고 겹치고 싶은 모양에 따라 top, bottom, left, right 등을 조정하고 zIndex까지 설정해준다.

 

zIndex가 무엇인지 드디어 이해했는데, 말 그대로 z축이라고 생각하면 되는 듯

여러 component가 겹쳐있을 때 뭐를 맨 위에 둘지 결정하는 옵션이다. zIndex가 클수록 위에, 작을수록 아래로 간다.

난 가장 최근에 추가된, 위에 있는 component일수록 z축에서도 위에 올리고 싶기 때문에 reversed_index를 그대로 zIndex로 설정해주었다.

 

 ...
 render() {
 	const {...} = this.state;
    var reversed_index; 
    
    return (
    	...
 		{
            imageList.map((item, index) => {
          	  // 아래부터 0, 1, 2, ... 로 index 바꿔주기 
              reversed_index = imageList.length - 1 - index;
              return (
              // reversed_index가 0인 경우 (맨 아래 component), style 적용하지 않음
              // 그 외의 경우, 다음과 같이 style 적용함 
              // bottom을 조정해서 아래 component와 약간 겹치도록 함
              // zIndex를 설정해 위에 오는 component가 더 z축에서 더 위로 오게 설정함 
              <View style={ (reversed_index==0) ? {} : {position: 'relative', bottom: reversed_index*15*(-1), zIndex: reversed_index}} key={index}>
                <TouchableOpacity key={index}>
                  <MyComponenet key={index} {...item}/> 
                </TouchableOpacity>
                </View>
              )
            })      
          }
          ...
          )
          ...
          }