7.4.1 SearchHeader 컴포넌트 만들기

MainTab 컴포넌트에서 현재 화면에 따라 다른 헤더 제목을 설정하기 위해 getHeaderTitle이라는 함수를 만들었지요?

네이티브 스택 내비게이터의 headerTitle 옵션에는 문자열이 아닌 JSX를 넣어줄 수도 있습니다. 우선 SearchHeader라는 컴포넌트를 만듭니다.

components/SearchHeader.js

import React from 'react';
import {StyleSheet, Text} from 'react-native';

function SearchHeader() {
  return <Text style={styles.block}>Hello</Text>;
}

const styles = StyleSheet.create({
  block: {
    color: 'white',
    backgroundColor: 'blue',
  },
});

export default SearchHeader;

임시로 배경이 파란색인 Text를 보여주도록 했습니다. 이제 이 컴포넌트를 검색 화면일 때 headerTitle로 지정해보겠습니다. MainTab을 열어서 검색 화면의 설정을 같이 수정하세요.