[React Native] ScrollView과 position: absolute를 같이 쓰고 싶을 때 (flex를 이용하는 방법)

목표

• 각각의 탭을 클릭했을 때 나오는 content가 scrollview이면서 그 scrollview의 position이 absolute이고, zIndex로 해당 scrollview를 보여주고 숨기고를 구현하고 싶었다.

실패

• 여느 view를 구현하듯이 scrollview에도 position: 'absolute'를 적용했더니, 끝까지 스크롤되지 않았다. 구글링을 많이 해봤지만 통하지 않았다.

해결법

• position: 'relative'. 즉 position은 건들지 않고, flex만 건들면 되는 문제였다.
• height도 설정해줘야 한다. 그렇지 않으면 완전히 겹쳐지지 않는다. 나같은 경우는 1000으로 설정했지만, 실제로 1000까지 스크롤되지는 않는다.

코드

<View>
    {/* S1 *}
    <ScrollView contentContainerStyle={{ flex: 0, height: 1000 }}>
        {...content}
    </ScrollView>
    {/* S2 *}
    <ScrollView contentContainerStyle={{ flex: 1, , height: 1000 }}>
        {...content}
    </ScrollView>
</View>

• 주의할 점: 이렇게 하면 S2가 보인다고 생각하겠지만, 실제로는 S1이 보인다. 왜그런지는 모르겠지만... 아무튼 이 코드를 참고하면 absolute를 쓰지 않고 flex만으로도 원하는 기능을 구현할 수 있다.