screens/MainTab.js

(...)
import SearchHeader from '../components/SearchHeader'

(...)

      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          title: '검색',
            tabBarIcon: ({color, size}) => (
            <Icon name="search" size={size} color={color} />
          ),
          headerTitle: () => <SearchHeader />,
        }}
      />
    </Tab.Navigator>
  );
}

export default MainTab;

검색 화면을 띄웠을 때 헤더가 다음과 같이 나타날 것입니다.

▲ 그림 7-2 커스텀 헤더

iOS는 컴포넌트가 중앙에 정렬되고, 안드로이드는 좌측에 정렬됩니다. 우리는 타이틀이 헤더의 일부 영역만 사용하지 않고 전체 영역을 사용하도록 만들고 싶습니다. 그렇게 하려면 화면 크기를 가져온 다음에 해당 값을 참고해 dp 단위의 크기를 직접 설정해줘야 합니다.