bottomTabNavigation + stackNavigation (두개 같이 사용하기)

들어가기
bottomTabNavigation에서 bottomTab에 있는 page들이 모두 공유해야 되는
stack으로 쌓일 수 있는, 쌓여야 하는 page들이 있을 것이다.
예를들어, userprofile화면이나, photo화면등은 어디에서 클릭을 해도 그 page로
이동 가능해야 할 것이다.
이번 장에서는 bottomTab의 page들이 stack으로 여러page를 공유하는 방법을 알아보자.

1. navigator/LoggedInNav.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import React from 'react'
import { Ionicons } from '@expo/vector-icons'
import { View } from 'react-native'
import SharedStackNav from './SharedStackNav'

const Tabs = createBottomTabNavigator()

export default function LoggedInNav() {
  return (
    <Tabs.Navigator                     ///bottomTab에 적용되는 option들.
    									///stack에서도 설정가능하니 참고!!
      screenOptions={{
        headerShown: false,
        tabBarShowLabel: false,
        tabBarStyle: {
          backgroundColor: 'black',
          borderTopColor: 'rgba(255,255,255,0.5)',
        },
        tabBarActiveTintColor: 'white',
      }}
    >
      <Tabs.Screen          ///name이랑 밑의 함수의 screenName이랑 같으면 안됨.
                            ///options에 tabBarIcon 설정하는거 기억할 것!!
                            ///Ionicons import하는것 기억 할 것.
        name="tabFeed"
        options={{
          tabBarIcon: ({ focused, color, size }) => (
            <Ionicons name="home" color={color} size={focused ? 24 : 20} />
          ),
        }}
      >
          ///bottomTab이랑 stack이랑 연결시켜주는 부분.
          ///이 부분 집중해서 볼것!!, bottomTab이랑 stack연결 시, component는 stack에서 설정함,!!
          
        {() => <SharedStackNav screenName="Feed" />}
      </Tabs.Screen>
      <Tabs.Screen
        name="tabSearch"
        options={{
          tabBarIcon: ({ focused, color, size }) => (
            <Ionicons name="search" color={color} size={focused ? 24 : 20} />
          ),
        }}
      >
        {() => <SharedStackNav screenName="Search" />}
      </Tabs.Screen>
      <Tabs.Screen
        name="tabCamera"
        component={View}
        options={{
          tabBarIcon: ({ focused, color, size }) => (
            <Ionicons name="camera" color={color} size={focused ? 24 : 20} />
          ),
        }}
      />
      <Tabs.Screen
        name="tabMe"
        options={{
          tabBarIcon: ({ focused, color, size }) => (
            <Ionicons name="person" color={color} size={focused ? 24 : 20} />
          ),
        }}
      >
        {() => <SharedStackNav screenName="Me" />}
      </Tabs.Screen>
      <Tabs.Screen
        name="tabNotification"
        options={{
          tabBarIcon: ({ focused, color, size }) => (
            <Ionicons name="heart" color={color} size={focused ? 24 : 20} />
          ),
        }}
      >
        {() => <SharedStackNav screenName="Notification" />}
      </Tabs.Screen>
    </Tabs.Navigator>
  )
}

bottomTab에서는 총 5개의 page가 있다( feed, search, me, camera, notification)
이 4개의 page가(camera screen은 제외) profile, photo, comments, likes 5개의
page를 stack으로 공유하게 만든다.

2. navigator/SharedStakNav.js

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import Feed from '../screens/Feed'
import Search from '../screens/Search'
import Notification from '../screens/Notification'
import Me from '../screens/Me'
import Profile from '../screens/Profile'
import Photo from '../screens/Photo'
import { Image } from 'react-native'
import Comments from '../screens/Comments'
import Likes from '../screens/Likes'

const Stack = createStackNavigator()

///screenName prop으로 bottomTab에서 rendering할 screen을 prop으로 받는다.

export default function SharedStackNav({ screenName }) {
  return (
    <Stack.Navigator
    					///SharedStack에서 screenOptions 설정함.
      screenOptions={{
        headerBackTitleVisible: false,
        headerTintColor: 'white',
        headerStyle: {
          shadowColor: 'rgba(255,255,255,0.3)',
          backgroundColor: 'black',
        },
        tabBarShowLabel: false,
        tabBarStyle: {
          backgroundColor: 'black',
          borderTopColor: 'rgba(255,255,255,0.5)',
        },
        tabBarActiveTintColor: 'white',
      }}
    >
    ***********************************screenName이 feed일때 ************
      {screenName === 'Feed' ? (
        <Stack.Screen
          name="Feed"
          component={Feed}
          options={{
            headerTitle: () => (
              <Image
                style={{ width: 120, height: 40, marginLeft: 120 }}
                resizeMode="cover"
                source={require('../assets/logo.png')}
              />
            ),
          }}
        />
      ) : null}
      **************************************************************
      
      {screenName === 'Search' ? (
        <Stack.Screen name="Search" component={Search} />
      ) : null}
      {screenName === 'Notification' ? (
        <Stack.Screen name="Notification" component={Notification} />
      ) : null}
      {screenName === 'Me' ? <Stack.Screen name="Me" component={Me} /> : null}
      
      ///밑의 4개의 screen은 공통적으로 적용될, 사용될 screen들.!!!!!!!
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Photo" component={Photo} />
      <Stack.Screen name="Comments" component={Comments} />
      <Stack.Screen name="Likes" component={Likes} />
    </Stack.Navigator>
  )
}

오늘도 힘내자!!!!!!!!!