[RN] native에서 position fixed 사용하기!

position fixed를 사용하고 싶은가? 아쉽지만 RN에는 fixed 옵션이 없다 ㅜㅜ

하지만 구현하는 방법은 있는데 바로 position absolute를 이용하는 방법이다.

 

이는 absolute가 가지고 있는 특징을 이용하여 꼼수를 쓰는 방법이라고 난 말하고 싶은데

사용해보면 생각보다 쉽게 구현할 수 있다.

 

먼저 absolute가 가진 속성을 이해해야 하는데 absolute는 부모 요소의 위치에 영향을 받는다

즉 부모의 위치가 고정이면 absolute를 사용하는 자식 요소의 위치도 고정이라고 할 수 있다.

 

자 그러면 어떻게 사용해야 할 지 알아보자

native에서 scroll은 항상 scrollview나 flatList를 사용하게 된다.

이를 사용하면 scrollview 내부에서 스크롤을 하게 되므로 고정시키고자 하는 요소가 스크롤 내부에 없다면

스크롤 시 원하는 요소를 화면에 고정할 수 있다.

const testCode = () => {
	return <View>
    <ScrollView>
    	...컨텐츠
    </ScrollView>
	<Button></Button>
    </View>
}

위와 같이 스크롤 영역과 버튼을 따로 분리한다.

그리고 원하는데로 스타일을 입력해주면 스크롤을 해도 버튼이 화면 중앙에 표시되도록 할 수 있다.

const testCode = () => {
	return <View>
    <ScrollView style={{flex: 1}}> // 영역을 차지하도록 꼭 써줘야 한다.
    	...컨텐츠
    </ScrollView>
	<Button style={{position: absolute, top: 50%}}></Button>
    </View>
}

이 때 scrollView에는 꼭 영역의 크기를 지정해줘야 한다.

 

생각해보면 겁나 간단한건데 fixed 사용에 익숙해지다보니 구현할 생각을 못해서 방황했다.

그래도 생각보다 쉽게 구현할 수 있어서 다행이다.