3. TabNav_StackNav(1. 설치)

https://reactnavigation.org/docs
항상 공식문서 확인하면서 할 것

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context(expo사용시)
npm install react-native-screens react-native-safe-area-context

npm install @react-navigation/bottom-tabs
npm install @react-navigation/native-stack

bottom과 stack는 필수이니 같이 settiggka.

1.Tab Navigation
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'


const Tab = createBottomTabNavigator();

const Tabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

2. Native Stack

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const Stacks = ()  => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

*Stack과 NavtiveStack은 차이점이 거의 없다고 보면됨.

좋은 웹페이지 즐겨찾기