React-Native #5 | React-Navigation (Tab Navigation)

React-Navigation (Tab Navigation)

개요

• 리액트 네이티브에서 네비게이션 생성할때 사용하는 라이브러리
• 리액트 에서 React-Router-Dom 과 비슷한 역할과 구현 방법을 가지고 있습니다.

용법

전체적인 프레임

• 아래와 같습니다

// ~/navigation/Tabs.tsx

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Movie from "../screens/Movie";
import Tv from "../screens/Tv";
import Search from "../screens/Search";

const Tab = createBottomTabNavigator();

export default Tabs() {
  <Tab.Navigator>
    <Tab.Screen name="Movie" component={Movie} />
    <Tab.Screen name="TV" component={Tv} />
    <Tab.Screen name="Search" component={Search} />
  </Tab.Navigator>
}

// ~/App.tsx

import { NavigationContainer } from "@react-navigation/native";
import Tabs from "./navigation/Tabs";
...(생략)

export default function App() {
  ...(생략)
  return (
    <NavigationContainer>
      <Tabs />
    </NavigationContainer>
  )
}

네비게이션 옵션 적용 (다크모드, 아이콘)

• 아래와 같습니다 (Theme 사용)

// ~/navigation/Tabs.tsx

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Movie from "../screens/Movie";
import Search from "../screens/Search";
import Tv from "../screens/Tv";
import { Ionicons } from "@expo/vector-icons";

const Tab = createBottomTabNavigator();

export default function Tabs() {

  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Movie"
        component={Movie}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="film-outline" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="TV"
        component={Tv}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="tv-outline" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={Search}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="search-outline" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

// ~/App.tsx

import { useColorScheme } from "react-native";
import { NavigationContainer, DarkTheme, DefaultTheme } from "@react-navigation/native";
import Tabs from "./navigation/Tabs";
...(생략)

export default function App() {
  const isDark = useColorScheme() === "dark";
  ...(생략)
  return (
    <NavigationContainer theme={isDark ? DarkTheme : DefaultTheme}>
      <Tabs />
    </NavigationContainer>
  )
}

• 아래와 같습니다 (커스텀)

// ~/navigation/Tabs.tsx

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Movie from "../screens/Movie";
import Search from "../screens/Search";
import Tv from "../screens/Tv";
import { useColorScheme } from "react-native";
import { Ionicons } from "@expo/vector-icons";

const Tab = createBottomTabNavigator();

export default function Tabs() {
  const isDark = useColorScheme() === "dark";

  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: {
          backgroundColor: isDark ? "black" : "white",
        },
        tabBarActiveTintColor: isDark ? "white" : "black",
        headerStyle: {
          backgroundColor: isDark ? "black" : "white",
        },
        headerTitleStyle: {
          color: isDark ? "white" : "black",
        },
        tabBarLabelStyle: {
          fontSize: 10,
          fontWeight: "600",
        },
      }}
    >
      <Tab.Screen
        name="Movie"
        component={Movie}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="film-outline" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="TV"
        component={Tv}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="tv-outline" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={Search}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="search-outline" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

// ~/App.tsx

import { NavigationContainer } from "@react-navigation/native";
import Tabs from "./navigation/Tabs";
...(생략)

export default function App() {
  ...(생략)
  return (
    <NavigationContainer>
      <Tabs />
    </NavigationContainer>
  )
}

마치며

• 이미 React-Router-Dom 을 통해 비슷한 역할과 용법을 사용하는 라이브러리를 사용해서 학습하는 데 크게 어렵지는 않았습니다.
• 네비게이션은 <Options> 속성을 통해 스타일 주는 것만 명심하면 되겠습니다.