[React Native] Nesting Navigators

1. Nesting Navigators

1) Stack, Tab Navigator Nesting

Stack Navigator
   ㄴㅡ Tab Navigator
      ㄴㅡ Tab Screen
      ㄴㅡ Tab Screen

   ㄴㅡ Stack Screen
   ㄴㅡ Stack Screen

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 { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './src/home';
import TabHomeScreen from './src/home_tab';
import TabUserScreen from './src/user_tab';
import TabMessageScreen from './src/message_tab';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Ionicons from 'react-native-vector-icons/dist/Ionicons';

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

MainScreen = () => {
  return (
    <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>
  )
}

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

  if(name == 'Home') {
    iconName = 'home-outline'
  } else if (name == 'User') {
    iconName = 'people-outline'
  } else if (name == 'Message') {
    iconName = 'mail-outline'
  }

  iconSize = focused ? 30 : 20
  return (
    <Ionicons
      name={iconName}
      size={iconSize}
    />
  )
}

class App extends Component {
 
  render() {
    return (
      
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Main" component={MainScreen} />
          <Stack.Screen name="Home_Stack" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
      
...

2) Stack, Drawer, Tab Navigator Nesting (1)

단, Stack Navigator 에서만 Drawer가 동작한다.

Stack Navigator
   ㄴㅡ Drawer Navigator
      ㄴㅡ Drawer Screen
      ㄴㅡ Drawer Screen
      ㄴㅡ Tab Navigator
         ㄴㅡ Tab Screen
         ㄴㅡ Tab Screen
   ㄴㅡ Stack Screen
   ㄴㅡ Stack Screen

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 { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import HomeScreen from './src/home';
import UserScreen from './src/user';
import LogoTitle from './src/logo';
import DrawerHomeScreen from './src/home_drawer';
import DrawerUserScreen from './src/user_drawer';
import PictogramHome from './src/assets/pics/homeicon.png'
import SideDrawer from './src/my_drawer';
import TabHomeScreen from './src/home_tab';
import TabUserScreen from './src/user_tab';
import TabMessageScreen from './src/message_tab';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Ionicons from 'react-native-vector-icons/dist/Ionicons';

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

TabComponent = () => {
  return (
    <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>
  )
}

DrawerComponent = () => {
  return (
    <Drawer.Navigator
          initialRouteName="Home"
          drawerType="front"
          drawerPosition="right" 
          drawerStyle={{ // 스타일
            backgroundColor: '#C6CBEF',
            width: 200
          }}
          drawerContentOptions={{ // 버튼 스타일
            activeTintColor: 'red',
            activeBackgroundColor: 'skyblue'
          }}
          drawerContent={props => <SideDrawer {...props}/>} 
        >
          <Drawer.Screen
            name="Route"
            component={TabComponent}
          />
        </Drawer.Navigator>
  )
}

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

  if(name == 'Home') {
    iconName = 'home-outline'
  } else if (name == 'User') {
    iconName = 'people-outline'
  } else if (name == 'Message') {
    iconName = 'mail-outline'
  }

  iconSize = focused ? 30 : 20
  return (
    <Ionicons
      name={iconName}
      size={iconSize}
    />
  )
}

class App extends Component {
 
  render() {
    return (
      
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Main" component={DrawerComponent} />
          <Stack.Screen name="Home_Stack" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>

...

Stack, Drawer, Tab Navigator Nesting

3) Stack, Drawer, Tab Navigator Nesting (2)

...

const HeaderRight = () => {
  const navigation = useNavigation();
  return (
    <View style={{flexDirection: 'row', paddingRight: 15}}>
      <TouchableOpacity 
        onPress={() => {
        navigation.dispatch(DrawerActions.openDrawer())
      }}>
        <Text>Open</Text>
      </TouchableOpacity>
    </View>
  )
}

class App extends Component {
 
  render() {
    return (
      
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Main" component={DrawerComponent} 
            options={{
              headerRight: ({}) => <HeaderRight/>
            }}
          />
          <Stack.Screen name="Home_Stack" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>

...

Stack, Drawer, Tab Navigator Nesting