[React Native] Tab navigation 사용하기 (2022년 기준)

React 목록

react-native navigation 설치

$ npm install @react-navigation/native --save
$ npm install react-native-screens react-native-safe-area-context --save
$ npm install @react-navigation/native-stack --save
$ npm install @react-navigation/bottom-tabs --save

 

 

파일생성

$ mkdir navigation
$ mkdir navigation/screens
$ touch navigation/MainNavigation.tsx
$ touch navigation/screens/HomeScreen.tsx
$ touch navigation/screens/DetailsScreen.tsx
$ touch navigation/screens/SettingsScreen.tsx

 

 

App.tsx

import React from 'react';
import MainContainer from './navigation/MainNavigation';

const App = () => {
  return <MainContainer />;
};

export default App;

 

 

 

MainNavigation.tsx

import React from 'react';

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

// screen
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
import SettingsScreen from './screens/SettingsScreen';

// screen name
const homeScreen = 'Home';
const detailsScreen = 'Details';
const settingsScreen = 'Settings';

const Tab = createBottomTabNavigator();

const MainContainer = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName={homeScreen}>
        <Tab.Screen name={homeScreen} component={HomeScreen} />
        <Tab.Screen name={detailsScreen} component={DetailsScreen} />
        <Tab.Screen name={settingsScreen} component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default MainContainer;

 

 

 

HomeScreen.tsx

import React from 'react';
import {View, Text, StyleSheet, Alert} from 'react-native';

const HomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text onPress={() => Alert.alert('Home Screen')}>Home Screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default HomeScreen;

 

 

 

DetailsScreen.tsx

import React from 'react';
import {View, Text, StyleSheet, Alert} from 'react-native';

const DetailScreen = () => {
  return (
    <View style={styles.container}>
      <Text onPress={() => Alert.alert('Detail Screen')}>Detail Screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default DetailScreen;

 

 

 

SettingsScreen.tsx

import React from 'react';
import {View, Text, StyleSheet, Alert} from 'react-native';

const SettingsScreen = () => {
  return (
    <View style={styles.container}>
      <Text onPress={() => Alert.alert('Settings Screen')}>
        Settings Screen
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default SettingsScreen;

 

 

 

React 목록