거절

부드러운 타이틀은 싫어하지만 오늘 매우 재미있는 것을 알았기 때문에 기세대로 씁니다.

머리

React Native에서 화면 전환을 할 때 기본 표준으로 사용되는 React Navigation. 그 중 Drawer navigation을 사용하는 경우, 햄버거 메뉴는 Stack Navigation과 조합하여 구현한다는 것이 상식이었습니다.

React Navigation 자체 최근 v5가 나와 쓰는 방법이 얽히 바뀌고 있습니다만, 선인이 쓴 v4까지의 지견 햄버거 메뉴가있는 StackNavigator에서 래핑 한 구성 요소를 반환하는 함수 '를 쓰고, 그런데이 고층 함수 어떻게 설명할까 고민하고 있었는데,

주제

조금 다시 본가의 API 문서를 보았습니다.
h tps : // 레아 ct ゔ ぃ가 치온. 오 rg / cs / d 라우 r ゔ ぃ 가와 r # 오 치온 s

title
Generic title that can be used as a fallback for headerTitle and drawerLabel

어라? headerTitle은 무슨 일(.´･ω･)?

headerShown
Whether to show or hide the header for the screen. The header is not shown by default. Setting this to true shows the header.

그래? 설마

// https://reactnavigation.org/docs/drawer-based-navigationのサンプルコードです
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home"
        // ↓これだけ追加
        screenOptions={{
          headerShown: true
        }}
      >
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

( ﾟДﾟ)
햄버거 메뉴! 너 햄버거 메뉴가 아닌가! 잘 지냈니? 조금 마른거야? (혼란)

설명

headerShown 에 대한 설명 기사가 없는 것도 무리는 없다.headerShown 는 2020/11/10에 구현됨 뿐이다.

초의역: StackNavigator 사용할 수 있다고 말했지만 뭐 여러가지 문제 있고 헤더 구현했어.

요약

headerShown 는 @react-navigation/[email protected] 에서 사용할 수 있게 되어 있습니다. 최신 버전으로 올라가는 사람은 headerShown를 사용합시다. StackNavigator와 같은 헤더의 커스터마이즈도 할 수 있어요. 시도하지 않지만.