1. ReactNavigation

▶ Installation

npm install @react-navigation/native

 

▶ Installing dependencies

npx expo install react-native-screens react-native-safe-area-context

 - This will install versions of these libraries that are compatible.

 

▶ ReactNavigation Bottom Tab

npm install @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../screens/HomeScreen';
import SettingsScreen from '../screens/SettingsScreen';
// 해당 경로는 Navigation Tab에서 표시될 Screen들의 위치

const Tab = createBottomTabNavigator();

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

 

▶ ReactNavigation

React Navigation is built by Expo, Software Mansion, and Callstack, with contributions from the community and sponsors.

We can use several navigation option with ReactNavigation.

URL : https://reactnavigation.org/

React Navigation | React Navigation