🌞 1/3 내배캠 React 45일차

react native 

 

react-navigation 

stack navigator

react navigation에 기본적으로 여러가지 기능들이 있다.

스크린을 전환할때 어떤 형식으로 전환할지에 대한 navigator들이 여러가지 있다.

stack, Native stack, Drawer, Bottom Tabs등등

상황에 맞게, ui에 맞게 사용해주면 될 것 같다.

 

사용법은 쉽다

사용하고 싶은 navigator가 있다면 

먼저, Navigation Container를 만들어주자

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

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>{/* ... */}</Stack.Navigator>
    </NavigationContainer>
  );
}

이걸 먼저 만들어 준 후 그 아래에 사용하고 싶은 navigator를 넣어주면 된다

Bottom Tabs를 사용하고 싶다면

npm install @react-navigation/bottom-tabs

를 먼저 입력하여 설치하고, 

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

const Tab = createBottomTabNavigator();

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

이 값을 입력하면 끝!