Nesting navigator

web의 경우는 네비게이션이 link 주소를 통해 다른 화면으로 보내 각 화면에
새로운 네비게이션이 존재하는 것, 혹은 layout등으로 네비게이션 자체를 재활용 하기도 한다
mobile의 경우는 네비게이션으로 컴포넌트를 전달하고 컴포넌트 내부에 또 네비게이션이 있기 때문에 중첩된 네비게이션이라고 부른다

매우 자주 사용되기 때문에 중요하다

bottom-tabs

이름대로 bottom에 탭이 생긴다

tab 네비게이션 안에 또 다른 네비게이션이 있는 형태

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

const Tab = createBottomTabNavigator();


function App() {
  return (
    
    function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={ListView} />
      <Tab.Screen name="Messages" component={DetailsScreen} initialParams={{ itemId: 42 }} />
    </Tab.Navigator>
  );
}

    
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="ListView" component={ListView} />
        <Stack.Screen name="DetailsScreen" component={DetailsScreen} initialParams={{ itemId: 42 }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}