[React Native] Navigation (Tab)

1. Navigation

React Native는 지속적으로 개발되어 가고 있기 때문에, 버전별 사용법이 다를 수 있다. 그렇기 때문에 공식 문서(reactnavigation.org/docs/getting-started)를 확인하여 제작하는 것을 권장한다.

 

설치된 목록은 package.json 파일에서 확인할 수 있다.

// Navigation 설치
npm install @react-navigation/native

// 의존성 설치
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

npx pod-install

 

 

 

2. Tab Navigator

1) Tab Navigator 설치

npm install @react-navigation/bottom-tabs

2) Linking

Tab Navigator도 Stack Navigator와 마찬가지로 NavigationContainer로 감싸주어야 하며, Tab Navigator를 사용하기 위해 createBottomTabNavigator 메서드를 이용해야한다.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabHomeScreen from './src/home_tab';
import TabUserScreen from './src/user_tab';

const Tab = createBottomTabNavigator();

class App extends Component {
 
  render() {
    return (
      
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen
            name="Home" component={TabHomeScreen}
          />
          <Tab.Screen
            name="User" component={TabUserScreen}
          />
        </Tab.Navigator>
      </NavigationContainer>
...

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

class TabHomeScreen extends Component {

  render() {
    return (
        <View style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
        }}>
            <Text>Home Screen</Text>
        </View>
    )
  }
}

export default TabHomeScreen;

3) Style

Tab Navigator의 경우에는 공통으로 사용되는 부분이기에 Tab.Navigator 내부에 정의가 된다.

import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, Button, Linking } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabHomeScreen from './src/home_tab';
import TabUserScreen from './src/user_tab';
import TabMessageScreen from './src/message_tab';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

const TabBarIcon = (focused, name) => {
  let iconImagePath;

  if(name == 'Home') {
    iconImagePath = require('./src/assets/pics/homeicon.png')
  } else if (name == 'User') {
    iconImagePath = require('./src/assets/pics/user.png')
  } else if (name == 'Message') {
    iconImagePath = require('./src/assets/pics/message.png')
  }

  return (
    <Image
      style={{width: focused ? 24 : 20, height: focused ? 24 : 20}}
      source={iconImagePath}
    />
  )
}

class App extends Component {
 
  render() {
    return (
      
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName="Home"
          tabBarOptions={{
            activeBackgroundColor: 'skyblue',
            activeTintColor: 'blue',
            inactiveTintColor: '#fff',
            style: {
              backgroundColor: '#c6cbef'
            },
            labelPosition: 'beside-icon'
          }}
          screenOptions={({route}) => ({ //각 탭에 그림 삽입 및 선택 효과
            tabBarLabel: route.name,
            tabBarIcon: ({focused})=> (
              TabBarIcon(focused, route.name) // 함수 호출
            )
          })}
        >
          <Tab.Screen
            name="Home" component={TabHomeScreen}
          />
          <Tab.Screen
            name="User" component={TabUserScreen}
          />
          <Tab.Screen
            name="Message" component={TabMessageScreen}
          />
        </Tab.Navigator>
      </NavigationContainer>

...