구현하려는 것
- 'Home'에서는 헤더 좌측에 로고, 우측에 메뉴버튼이 보여진다.
- 나머지 화면에서는 좌측에 뒤로가기 버튼, 우측에 메뉴버튼이 보여진다.
내가 생각한 방법은 screen name이 'Home' 일 때와 아닐 때로 조건을 거는 것이다. 일단 'CustomHeader' 컴포넌트를 따로 만들어서 screenOptions의 header에 props로 넘겨주고 있는 상태.
header: (props) => <CustomHeader { ...props } />,현재 스크린의 name을 받아오기 위해선 useRoute를 사용해야한다.
import { useRoute } from '@react-navigation/native';
.
.
.
.
const route = useRoute();
console.log(route.name);위와 같이 작성하면 screen name을 받아올 수 있다.
아래는 조건식을 적용한 CustomHeader의 전체 코드
