React Navigation 5 Tutorials

📌 튜토리얼을 따라한 프로젝트입니다!

하단바 생성하기

이곳을 참고했습니다!

라이브러리 설치하기

install하기

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

ExploreScreen & MainTabScreen 생성하기

ExploreScreen.js

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

const ExploreScreen = () => {
    return(
        <View style={styles.container}>
            <Text>ExploreScreen</Text>
            <Button
                title="Click Here"
                onPress={()=>alert("Button Clicked!")} 
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container : {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
})
export default ExploreScreen;

MainTabScreen.js

App.js에 있는 DetailsStackScreen, HomeStackScreen 부분을 복붙해줍시다!

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import Icon from 'react-native-vector-icons/Ionicons';

import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const HomeStack = createStackNavigator();
const DetailsStack = createStackNavigator();

const HomeStackScreen = ({navigation}) => {
    return (
      
    );
};

const DetailsStackScreen = ({navigation}) => {
    return (
        <DetailsStack.Navigator screenOptions={{
            headerStyle:{
                backgroundColor: '#009387',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            }
        }}>
        <DetailsStack.Screen name="Details" component={DetailsScreen} options={{
            title : 'Details',
            headerLeft: () => (
                <Icon.Button name='ios-menu' size={25}
                backgroundColor= '#009387' onPress = {() => {navigation.openDrawer()}}>
                </Icon.Button>
            )
        }}/>
        </DetailsStack.Navigator>
    );};

위의 docs안에 예제 부분을 복붙해줍시다! + Home / Details / Profile / Explore로 변경해줍시다!

전체 코드

import React, {useState, useEffect} from 'react';
import {StyleSheet} from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

import Icon from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
import ExploreScreen from './ExploreScreen';
import ProfileScreen from './ProfileScreen';

const HomeStack = createStackNavigator();
const DetailsStack = createStackNavigator();

const Tab = createMaterialBottomTabNavigator();

const MainTabScreen = () => {

    return (
        <Tab.Navigator
            initialRouteName="Home"
            tabBarOptions={{
                activeTintColor: '#fff',
                tabStyle: {
                    backgroundColor: '#009387',
                }
                
            }}
        >

            <Tab.Screen
                name="Home"
                component={HomeStackScreen}
                options={{
                    tabBarLabel: 'Home',
                    tabBarColor: '#009387',
                    tabBarIcon: ({ color, size }) => (
                    <MaterialCommunityIcons  
                        name="home"  
                        color={color} 
                        size={26} 
                    />
                    ),
                }}
            />

            <Tab.Screen
                name="Details"
                component={DetailsStackScreen}
                options={{
                    tabBarLabel: 'Details',
                    tabBarColor: '#1f65ff',
                    tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons
                            name="bell-outline" 
                            color={color} 
                            size={26} 
                        />
                    ),
                    tabBarBadge: 3,
                }}
            />

            <Tab.Screen
                name="Profile"
                component={ProfileScreen}
                options={{
                    tabBarLabel: 'Profile',
                    tabBarColor: '#694fad',
                    tabBarIcon: ({ color, size }) => (
                    <MaterialCommunityIcons  
                        name="account"  
                        color={color} 
                        size={26} 
                    />
                    ),
                }}
            />

            <Tab.Screen
                name="Explore"
                component={ExploreScreen}
                options={{
                    tabBarLabel: 'Explore',
                    tabBarColor: '#d02860',
                    tabBarIcon: ({ color, size }) => (
                    <MaterialCommunityIcons  
                        name="google-chrome"  
                        color={color} 
                        size={26} 
                    />
                    ),
                }}
            />
        </Tab.Navigator>
    );
}

const HomeStackScreen = ({navigation}) => {
    return (
        <HomeStack.Navigator screenOptions={{
            headerStyle:{
                backgroundColor: '#009387',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            }       
        }}>
        <HomeStack.Screen name="Home" component={HomeScreen} options={{
            title : 'Home',
            headerLeft: () => (
                <Icon.Button name='ios-menu' size={25}
                backgroundColor= '#009387' onPress = {() => {navigation.openDrawer()}} />
            )
        }}/>
        </HomeStack.Navigator>
    );
};

const DetailsStackScreen = ({navigation}) => {
    return (
        <DetailsStack.Navigator screenOptions={{
            headerStyle:{
                backgroundColor: '#1f65ff',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            }
        }}>
        <DetailsStack.Screen name="Details" component={DetailsScreen} options={{
            title : 'Details',
            headerLeft: () => (
                <Icon.Button 
                    name='ios-menu' 
                    size={25}
                    backgroundColor= '#1f65ff' 
                    onPress = {() => {navigation.openDrawer()}} 
                />
            )
        }}/>
        </DetailsStack.Navigator>
    );
};

export default MainTabScreen;

결과확인