screens/types.ts - RootStackParamList

    export type RootStackParamList = {
      MainTab: MainTabNavigationScreenParams;
      Article: {
        id: number;
      };
      Register: undefined;
      Login: undefined;
      MyArticles: undefined;
    };

    UserMenuScreenMainTab에 등록하고, 나머지는 RootStack에 등록합니다. 이 과정에서, MainTab에서 아이콘 하단의 텍스트를 숨기고, RootStack에 등록해둔 Article 화면의 헤더 제목도 한국어로 변경해주겠습니다.

    screens/MainTab.tsx

    (...)
    import UserMenuScreen from './UserMenuScreen';
    
    const Tab = createBottomTabNavigator<MainTabParamList>();
    
    function MainTab() {
      return (
        <Tab.Navigator
          screenOptions={{
            tabBarShowLabel: false,
          }}>
          <Tab.Screen
            name="Articles"
            component={ArticlesScreen}
            options={{
              title: '게시글 목록',
              tabBarIcon: ({color, size}) => (
                <MaterialIcons name="article" color={color} size={size} />
              ),
            }}
          />
          <Tab.Screen
            name="UserMenu"
            component={UserMenuScreen}
            options={{
              title: '게시글 목록',
              tabBarIcon: ({color, size}) => (
                <MaterialIcons name="person" color={color} size={size} />
              ),
            }}
          />
        </Tab.Navigator>
      );
    }
    
    export default MainTab;
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.