React Native [3] – 네비게이션

by

프로젝트 디렉터리 구조

  • 프로젝트명
    • assets
    • node_modules
    • screens
      • HomeScreen.js
      • SecondScreen.js
    • App.js
    • app.json
    • babel.config.js
    • package.json

라이브러리 설치

react native 내부 라이브러리로 네비게이션 기능을 구현하기 어렵기 때문에 외부 라이브러리를 설치한다.

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

Screen 생성

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

export default function HomeScreen() {
    return (
        <View style={styles.container}>
        <Text>MainScreen</Text
        </View>
    );
}
import { StyleSheet, Text, View } from 'react-native';

export default function SecondScreen() {
    return (
        <View style={styles.container}>
        <Text>SecondScreen</Text
        </View>
    );
}

App.js | 네비게이션 기능 구현

import HomeScreen from "./screens/HomeScreen";
import SecondScreen from "./screens/SecondScreen";
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="HomeScreen" component={HomeScreen}   />
        <Tab.Screen name="SecondScreen" component={SecondScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Leave a Comment