Part 2. 프로젝트 구조 잡기

1) navigator 기본 설정

① StackNavigator

import SignInPage from "../pages/SignInPage";
import SignUpPage from "../pages/SignUpPage";
import DetailPage from "../pages/DetailPage";
import TabNavigator from "./BottomTabNavigator";
const { createStackNavigator } = require("@react-navigation/stack");

const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="SignInPage" component={SignInPage}></Stack.Screen>
      <Stack.Screen name="SignUpPage" component={SignUpPage}></Stack.Screen>
      <Stack.Screen name="bottomTab" component={TabNavigator}></Stack.Screen>
      <Stack.Screen name="DetailPage" component={DetailPage}></Stack.Screen>
    </Stack.Navigator>
  );
};

export default StackNavigator;

② bottomTabNavigator

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import MainPage from "../pages/MainPage";
import SearchPage from "../pages/SearchPage";
import MyPage from "../pages/MyPage";

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={MainPage}></Tab.Screen>
      <Tab.Screen name="Search" component={SearchPage}></Tab.Screen>
      <Tab.Screen name="MyPage" component={MyPage}></Tab.Screen>
    </Tab.Navigator>
  );
};

export default TabNavigator;

2) navigator 수정

① StackNavigator

/*로그인, 회원가입 페이지는 헤더가 필요 없고,
bottomTab에도 헤더가 존재 → StackNavigator의 헤더 숨기기*/
...
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
...

② bottomTabNavigator

// 초기 상태에는 label만 표시되는 상태이므로, Instagram처럼 label 숨기기
...
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        title: "Moongram",
        tabBarShowLabel: false,
      }}>
  //tab 별 아이콘 추가 - 아이콘은 MaterialCommunityIcon 사용
   <Tab.Screen
        name="Home"
        component={MainPage}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
...

3) App.jsx 수정

import { NavigationContainer } from "@react-navigation/native";
import { StatusBar } from "expo-status-bar";
import { NativeBaseProvider } from "native-base";
import { SafeAreaProvider } from "react-native-safe-area-context";
import StackNavigator from "./src/navigators/StackNavigator";

export default function App() {
  return (
    <NativeBaseProvider>
      <SafeAreaProvider>
        <StatusBar style="auto" />
        <NavigationContainer>
          <StackNavigator />
        </NavigationContainer>
      </SafeAreaProvider>
    </NativeBaseProvider>
  );
}