발단

기존 리액트 네이티브 어플리케이션의 전면적인 리뉴얼 작업을 이번주에 시작하였고
공통 컴포넌트들을 만드는 한 주 를 보냈다.
나는 그 중 헤더 컴포넌트를 담당하였다.

전개

그냥..열심히 만들었다. 앞으로 어디에 어떻게 위치할지는 일단 적당히 position : absolute 주면 되지 않을까하는 가벼운 마음으로

위기

일단 헤더 컴포넌트를 이쁘게 잘 만들었는데 이거 어떻게 쓸 지 난관에 봉착.
일단 만들 땐 그냥 position : absolute 써서 위에다가 고정해놓았다.
그런데 이거 다른 컴포넌트들과 함께 쓰려면 이렇게 그냥 position : absolute로 위에 얹어 놓기만 하면 안될거같은 느낌적인 느낌이 들었다.

절정

동료와 함께 공통 컴포넌트를 나누어서 잘 만들고 한꺼번에 모아서 컴포넌트를 점검하는 시간을 가졌다. 근데 이거 우려한대로 position : absolute 주니까 다른 컴포넌트들은 이 헤더 컴포넌트아래에 이쁘게 촤라락 순서로 가는게 아니라 그냥 헤더랑 겹치고 뭐 난리가 남

결말을 기다리는 중

주말에 생각나서 알아보던 중 이런걸 발견

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const CustomHeader = () => {
  return (
    <View>
      <Text>Custom Header</Text>
    </View>
  );
};

const MyStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ header: () => <CustomHeader /> }}
      />
      {/* 다른 스크린들 */}
    </Stack.Navigator>
  );
};

export default MyStack;

오..아니.??? 그냥 Stack.Screen의 options 속성에 header에 내가 만든 헤더 컴포넌트를 넣어주면 되나?
그럼 알아서 헤더로 위치 넣어주고 고정도 시켜주고 알아서 그 아래의 컴포넌트들도 위치 시켜주고 그러나??
라고 행복하게 기대하며 화요일에 출근해서 봐야징 ><