React Native Navigation , Stack , Tabs 사용하는 방법 React Navigation 라이브러리

JavaScript, React 및 React Native에 이미 익숙하다면, React Navigation을 빠르게 사용할 수 있습니다! 만약 그렇지 않다면, 우리는 당신이 먼저 기본적인 지식을 쌓고, 끝나면 여기로 돌아오는 것을 강력히 추천합니다.

 

최소 요구사항

• react-native >= 0.63.0
• expo >= 41 (if you use Expo)
• typescript >= 4.1.0 (if you use TypeScript)

설치 방법

React Native 프로젝트에 필요한 패키지를 설치합니다.

 

1.react-navigation/native

 

npm install @react-navigation/native

 

2. react-native-screens react-native-safe-area-context

 

엑스포 프로젝트일 경우

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

 

 엑스포가 아닌 기본 React Native 프로젝트 일 경우

npm install react-native-screens react-native-safe-area-context

 

3. (선택사항) Mac, Ios 개발을 하는 사람의 경우

npx pod-install ios

 

 

4. react-navigation/native-stack

 

npm install @react-navigation/native-stack

 

 

사용 방법

 

1. App 파일에 NavigationContainer를 사용하기

 

2. 컴포넌트 밖에서 createNativeStackNavigator()을 선언하기

 

3. 스크린으로 사용할 컴포넌트 만들기

 

4. 다음과 같이 하시면 됩니다. 

 

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

 

다양한 옵션들 ( tab의 색을 변하게 하거나 , header을 숨기거나 등등)

import React from 'react';
import Home from '../screens/Home';
import Write from '../screens/Write';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Tabs = createNativeStackNavigator();

export default function Navigator() {
  return (
    <Tabs.Navigator
      screenOptions={{ headerShown: false, presentation: 'modal' }}
    >
      <Tabs.Screen name="Home" component={Home} />
      <Tabs.Screen name="Write" component={Write} />
    </Tabs.Navigator>
  );
}

 screenOptions 에서와 같이 다양한 옵션들을 줄 수 있습니다.

 

옵션이 다양하기 때문에 필요한 옵션은 여기에서 찾아서 사용하시면 됩니다.

 

React Navigation | React Navigation