React Navigation 5 Tutorials

📌 튜토리얼을 따라한 프로젝트입니다!

React-Native 화면전환 라이브러리 설치 및 적용

• react-navigation
• native-navigation
• react-native-navigation
• react-native-router-flux

react-navigation을 많이 쓰는 듯 하다!

1. Project 생성하기

react-native init RNV5

2. React-Navigation 라이브러리 설치하기

2-1. ReactNavigation 사이트 들어가기

여기 클릭하기

2-2. Docs로 들어가기

여기 클릭하기

2-3. 설치 명령어 입력하기

1. react-navigation 설치하기

npm install @react-navigation/native

2. dependencies 설치하기

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. 만약 Mac에서 ios용으로 개발 중인 경우에는 cocoapods를 통하여 포트를 설치해야 연결 작업을 완료할 수 있습니다. (android는 안해도 될 듯)

npx pod-install ios

4. android/app/build.gradle

영상에는 이렇게 되어 있는데

지금의 docs에는 없는거 보아 하니 그냥 넘긴다.

5. index.js안에 코드 넣기

import 'react-native-gesture-handler';

3. NavigationContainer import 하기

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

4. App.js 정리하기

4-1. Stack.Navigator을 위한 라이브러리 추가하기

여기 클릭하기

1. react-navigation/stack 설치하기

npm install @react-navigation/stack

5. App.js에 코드 추가하기

// 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 { createStackNavigator } from '@react-navigation/stack';

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

const Stack = createStackNavigator();

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

export default App;

6. 결과보기