탭 네비게이션과 스택 네비게이션 차이

탭은 탭 스택은 스택
인스타 하단 네비게이션이 탭 네비게이션

탭 네비게이션

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; //탭 네비 import
import HomeMain from './HomeMain.js'; //스크린 전환용
import RecordMain from './RecordMain.js'; //스크린 전환용

const Tab = createBottomTabNavigator();

const App = () => {
return (
<NavigationContainer>
       <Tab.Navigator
        initialRouteName="Home" //처음에 어디가 보이게 할지 선택
        activeColor="#3b5998"
        inactiveColor="gray"
        barStyle={{ backgroundColor: '#fff', height : 55}}
        
      >
        <Tab.Screen
          name="home"
          component={HomeMain}
          options={{
            tabBarIcon: ({ color }) => (
              <Icon name="home" color={color} size={26} type="font-awesome" /> 
            ),
           
          }}
          
        />
        <Tab.Screen
          name="record"
          component={RecordTab}
          options={{
            tabBarIcon: ({ color }) => (
              <Icon name="pencil" color={color} size={26} type="font-awesome" /> 
            ),
          
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
   );
   };
   
   export default App;

스택 네비게이션

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

import RecordMain from './RecordMain.js';
import MyPageMain from './MyPageMain.js';

const Stack = createStackNavigator();

const App = () => {
  return (
      <NavigationContainer>
      <Stack.Navigator initialRouteName="RecordMain">
        <Stack.Screen name="RecordMain" component={RecordMain} options={{headerTitle: '메인'}} />
        <Stack.Screen name="Target_select" component={Target_select} options={{title : '기록'}}/>
      </Stack.Navigator>
      </NavigationContainer>
  );
};

export default App;
 

아래는 내비게이션 전환 예시
컴포넌트 선언부에 ({navigation}) 불러왔다는 가정!

<View>
      <SignupButton onPress={() => navigation.navigate('RecordMain')}>
        <OtherButtonText>메인으로 이동</OtherButtonText>
      </SignupButton>
       
</View>

탭 네비게이션과 스택 내비게이션을 섞어서 사용이 가능한데, navigationContainer는 꼭 최상단에 하나만 존재해야 한다.
모든 컴포넌트의 앞글자는 대문자로 작성해야 한다.
참고로 view로 네비게이션 덮으면 아무것도 안보이더라.