position absolute 사용하기

RN에서는 style안에 position이라는 속성이 있습니다. 공식 docs을 보시면 아시겠지만 평소에는 relative 입니다. 하지만 고정 위치를 사용한다던가, 또는 컴포넌트 끼리 겹치도록 만들어야 할 때가 있습니다.

이때 사용하는게 position absolute입니다. web에서 position을 하신분들은 쉽게 알 수 있을건데요. 잘 모르시면 검색을 해주세요.

여기서 중요한건 바로 상위 컴포넌트의 크기(위치)을 따라간다는 겁니다.

그리고 그리고 z-index가 없지만 RN은 무조건 뒤에 있는 컴포넌트을 맨 위로 올려둡니다.

그러니 일단 가장 위에 놓고싶은 컴포넌트를 맨 마지막에 두시면 됩니다. 그 후에 조금씩조금씩 하시면 되요.

이게 간단한 설명인데 이제 간단히 예제를 통해서 이해를 좀 더 해보도록 하겠습니다.

일단 적당히 project를 하나 만들고

class gitbookTestUI extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{backgroundColor: '#FFAAAA', flex: 1}}></View>
        <View style={{flexDirection: 'row', flex: 1}}>
          <View style={{backgroundColor: '#FFAA00', flex: 1}}></View>
          <View style={{backgroundColor: '#00AAAA', flex: 1}}></View>
        </View>
        <View style={{backgroundColor: '#FF00AA', flex: 1}}></View>
      </View>
    );
  }
}

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

이런 코드를 짭시다. 이런 결과가 나옵니다. 이제

class gitbookTestUI extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{backgroundColor: '#FFAAAA', flex: 1}}>
          <View style={{position: 'absolute', backgroundColor: '#FFFFFF', right: 30, bottom: 30, height: 30, width: 30}}></View>
        </View>
        <View style={{flexDirection: 'row', flex: 1}}>
          <View style={{backgroundColor: '#FFAA00', flex: 1}}>
            <View style={{position: 'absolute', backgroundColor: '#FFFFFF', right: 30, bottom: 30, height: 30, width: 30}}></View>
          </View>
          <View style={{backgroundColor: '#00AAAA', flex: 1}}></View>
        </View>
        <View style={{backgroundColor: '#FF00AA', flex: 1}}>
          <View style={{position: 'absolute', backgroundColor: '#FFFFFF', right: 30, bottom: 30, height: 30, width: 30}}></View>
        </View>
        <View style={{position: 'absolute', backgroundColor: '#AAAAAA', right: 40, bottom: 40, height: 30, width: 30}}></View>
      </View>
    );
  }
}

코드를 이렇게 바꾸고 다시 실행을 해봅시다.

이런결과가 나옵니다. 하얀박스는 right: 30, bottom: 30, height: 30, width:30을 주었습니다. 일단 하얀박스부터 살펴보죠. 일단 height, width는 크기라는걸 당연히 아시겟죠. 그렇다면 right,bottom은 당연히 위치입니다.상대적인 위치이지요. 누구로 부터의 상대적인 위치일까요? 바로 바로 상위view로 부터의 상대적인 위치입니다. 가장위의 하얀박스는 핑크색View의 자식입니다. 그렇기 때문에 핑크색view의 상대적인 위치로 부터 right bottom이 정해집니다. 나머지도 마찬가지 입니다.

그렇다면 맨밑의 회색박스는 어떻게 하얀박스 위에 있을까요?

맨밑의 회색박스는 render에서 맨맽에 있습니다. render는 위에서 부터 차근차근 실행되고 아까 말했다 시피 맨 뒤의 component를 위에 올립니다. 간단히 차근차근 위에 쌓아올린다는 이미지이지요. 그렇기때문에 회색박스는 하얀박스보다 나중에 그려짐으로써 위에 있게 됩니다.

아마 쉬운 예제이기때문에 금방 이해가 갈것이라고 생각됩니다. 잘 모르시겠으면 조금 더 이 예제를 가지고 놀아보세요. Top, left로 바꾸어서 한 번 해보면 더 빨리 이해가 될 것이라고 생각됩니다.