[React-Native] Bottom Navigation

설치해야하는 모듈

npm install @react-navigation/native
npm install @react-navigation/bottom-tabs

 

모듈 추가

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';

 

Navigation 사용하기

Bottom Naviagtion을 사용하기 위해 Navigator()를 선언해준다.

const Tab = createBottomTabNavigator();

 

다음으로는 Tab으로 사용할 화면 2개를 만들어두자.

Home.js

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

const Home = () => {
  return (
    <View style={styles.view}>
      <Text>Home</Text>
    </View>
  );
};

const styles=StyleSheet.create({
    view: {
        backgroundColor:'#fff',
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
})

export default Home;

Settings.js

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

const Settings = () => {
  return (
    <View style={styles.view}>
      <Text>Settings</Text>
    </View>
  );
};

const styles=StyleSheet.create({
    view: {
        backgroundColor:'#fff',
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
})

export default Settings;

 

Navigation을 사용할 때는 항상 제일 바깥쪽을 NavigationContainer로 감싸줘야 한다. 

그안에 위에서 선언해두었던 Tab을 사용하여 Tab.Navigator를 넣고

미리 만들어두었던 Home과 Settings를 가져와서 BottomNavigation을 만들 수 있다.

import Home from './Home';
import Settings from './Settings';

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Home">
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Settings" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

initialRouteName은 초기 탭을 정해주는 코드이다.

이게 없으면 자동으로 제일 위에 있는 Tab "Home"을 처음으로 시작한다.

<Tab.Navigator initialRouteName="Home">

 

실행화면

아직 아이콘은 설정해주지 않아 X표시 상태이다.

 

전체 코드

App.js

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import Home from './Home';
import Settings from './Settings';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Home">
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Settings" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;