React-Native :: 라우팅하기 (react navigation)

리액트네이티브로 앱을 만들면서, 라우팅을 하기 위해 필요한 라이브러리, `react-navigation`

 

 

https://reactnavigation.org/docs/getting-started/

`react navigation` 공식 페이지로 들어가서 하라는대로 설치하고 사용해봤다.

 

 

우선 필요한 라이브러리들을 설치한다.

yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context
yarn add @react-navigation/native-stack

 

ios 개발을 위해서는 cocoapods도 설치해주자.

npx pod-install ios

 

android 개발을 위해서는 `/android/app/src/main/java/{내 패키지 이름}/MainActivity.java` 파일을 켠 후,
`MainActivity` Class 안에 다음과 같이 적어준다.
(클래스 안에는 기본적으로 @Override 된 설정들이 있는데 그 밑에다 적어주면 된다.)

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

파일 위쪽엔 다음과같이 import 해주면 된다.

import android.os.Bundle;

 

짜란. 이제 사용할 준비가 끝났다.

 

 

// 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';

import HomeScreen from './HomeScreen.js';

const Stack = createNativeStackNavigator();

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

export default App;

공식문서에서 가져온 예시.

리액트를 사용해봤다면 알수있듯이, `react-router-dom`이랑 비슷해보이는 구조를 가지고있다.

 

시뮬레이터로 보면 name에 들어가는 이름이 화면에 표시된다. :)