💡Navigation pattern 종류

Native Stack

설치

expo install @react-navigation/native-stack

사용법

1. createNativeStackNavigator() 로 네비게이터 생성

2. 생성 된 스택에서 제공하는 Screen 컴포넌트로 페이지를 생성

   • name : 해당 페이지의 고유한 이름(id)이 된다.
   • component : 페이지의 루트 컴포넌트를 전달한다. 전달 된 컴포넌트는 navigation 관련 Props를 매개변수로 전달받는다.
     
   • options : 해당 페이지에 적용 할 화면 옵션

     // 기본 옵션 적용법
      <Stack.Screen
     	name="MyPage"
     	component={MyPageScreen}
     	options={{
            title: "마이페이지",
            headerStyle: {
            	backgroundColor: "#fff"
     		}
     	}}
      />
     
      // 매개변수로 route와 navigation 객체를 전달 받아 동적인 값을 부여 할 수 있다
      <Stack.Screen
     	name="MyPage"
     	component={MyPageScreen}
     	options={({ navigation, route }) => ({
     		title: `${route.params.nickname}의 마이페이지`,
     	})}
      />

3. 생성 된 Screen 들을 Navigator로 감싼다.

   • initialRouteName : 초기 화면 설정. 미설정 시 가장 상단의 Screen이 초기 화면이 됨.
   • screenOptions : 전체 페이지에 공통으로 적용 될 화면 옵션

    // App.tsx
    import { NavigationContainer } from "@react-navigation/native";
    import { createNativeStackNavigator } from "@react-navigation/native-stack";
   
    import HomeScreen from "../screens/HomeScreen"
    import MyPageScreenfrom "../screens/MyPageScreen"
    import SettingScreen from "../screens/SettingScreen"
   
    import { RootStackParamList } from "../types"
   
    const Stack = createNativeStackNavigator<RootStackParamList>();
   
    export default function App() {
      return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="HomePage">
            <Stack.Screen name="HomePage" component={HomeScreen} />
            <Stack.Screen name="MyPage" component={MyPageScreen} />
            <Stack.Screen name="Setting" component={SettingScreen} />
          </Stack.Navigator>
        </NavigationContainer>);
    }

4. 스택에 Screen으로 설정 된 컴포넌트는 navigation 관련 Props를 매개변수로 전달 받는다.

   • navigation
     • navigate : 페이지 이동. 페이지명, params 전달
     • goBack : 뒤로가기

       type ScreenProps = NativeStackScreenProps<RootStackParamList>;
       
       const HomeScreen = ({ navigation }: ScreenProps) => {
       	const navigationHandler = () => {
       		navigation.navigate("MyPage", {userId: "user123", nickname: "user"})
       	}
       
       	return (
       		...
       	)
       }

   • route
     • name : 페이지 명 조회
     • params : 페이지 이동 시 params로 전달 받은 데이터 조회

       type ScreenProps = NativeStackScreenProps<RootStackParamList, "MyPage">;
       
       const MyPageScreen = ({ route }: ScreenProps) => {
         return (
           <View>
             <Text>user nickname is... {route.params.nickname}</Text>
           </View>);
       };

---

Drawer

설치

expo install @react-navigation/drawer

추가 패키지 설치

expo install react-native-gesture-handler react-native-reanimated

사용법

1. createDrawerNavigator() 로 네비게이터 생성

2. Screen 생성 후 Navagator로 감싸줌 (Stack과 동일)

   • drawer 전용 option 참고

   // App.tsx
    import { NavigationContainer } from "@react-navigation/native";
    import { createDrawerNavigator} from "@react-navigation/drawer";
   
    import HomeScreen from "../screens/HomeScreen"
    import MyPageScreenfrom "../screens/MyPageScreen"
    import SettingScreen from "../screens/SettingScreen"
   
    import { RootStackParamList } from "../types"
   
    import { Ionicons } from '@expo/vector-icons';
   
    const Drawer = createNativeStackNavigator<RootStackParamList>();
   
    export default function App() {
      return (
        <NavigationContainer>
          <Drawer.Navigator initialRouteName="HomePage" options={{
              drawerActiveBackgroundColor: "#f0e1ff", // 활성 버튼 배경 색
              drawerActiveTintColor: "#3c0a6b", // 버튼 글자색
              drawerStyle: {
                  backgroundColor: "#fff" // 드로어 배경 색
              }
          }} >
            <Drawer.Screen name="HomePage" component={HomeScreen} options={{
                  drawerLabel: "Home",  // 탭 이름
                  drawerIcon: ({ color, size }) => <Ionicons name="home" size={size} color={color} /> // 탭 아이콘
            }} />
            <Drawer.Screen name="MyPage" component={MyPageScreen} />
            <Drawer.Screen name="Setting" component={SettingScreen} />
          </Drawer.Navigator>
        </NavigationContainer>);
    }

3. navigation 메서드를 활용해 드로어를 여닫을 수 있다

   type ScreenProps = NativeStackScreenProps<RootStackParamList>;
   
   const HomeScreen = ({ navigation }: ScreenProps) => {
       const drawerHandler = () => {
           navigation.toggleDrawer()
       }
   
       return (
           ...
       )
   }

---

Bottom Tabs

설치

expo install @react-navigation/bottom-tabs

사용법

1. createBottomTabNavigator() 로 네비게이터 생성

2. Screen 생성 후 Navagator로 감싸줌 (Stack과 동일)

   // App.tsx
    import { NavigationContainer } from "@react-navigation/native";
    import { createDrawerNavigator} from "@react-navigation/drawer";
   
    import HomeScreen from "../screens/HomeScreen"
    import MyPageScreenfrom "../screens/MyPageScreen"
    import SettingScreen from "../screens/SettingScreen"
   
    import { RootStackParamList } from "../types"
   
    import { Ionicons } from '@expo/vector-icons';
   
    const Tab = createBottomTabNavigator<RootStackParamList>();
   
    export default function App() {
      return (
        <NavigationContainer>
          <Tab.Navigator initialRouteName="HomePage" options={{
              tabBarActiveTintColor: "#3c0a6b", // 활성 탭 글자 색
              tabBarInactiveTintColor: "#7e7e7e", // 비활설 탭 글자 색
          }}>
            <Tab.Screen name="HomePage" component={HomeScreen} options={{
                tabBarIcon: ({ size, color }) => <Ionicons name="home" size={size} color={color} />
            }} />
            <Tab.Screen name="MyPage" component={MyPageScreen} />
            <Tab.Screen name="Setting" component={SettingScreen} />
          </Tab.Navigator>
        </NavigationContainer>);
    }

💡Nested Navigator

여러 네비게이션 패턴 중첩 사용하기

// App.tsx
const Stack = createNativeStackNavigator<RootStackParamList>();
const Drawer = createDrawerNavigator<RootStackParamList>();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Main" component={MainScreen} />
      <Drawer.Screen name="Favorites" component={FavoritesScreen} />
    </Drawer.Navigator>
  );
};

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Drawer"
            component={DrawerNavigator}
            // Drawer와 Stack의 헤더가 중첩되어 Stack의 헤더는 숨김처리
            options={{ headerShown: false }}
          />
          <Stack.Screen name="MyPage" component={MyPageScreen} />
          <Stack.Screen name="Setting" component={SettingScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}