[React Native] React Navigation - 2. React Navigation 설치

---

 

---

 

---

2. React Navigation 설치

 

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

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

 

위 사이트를 들어가면 설치 과정이 상세히 나온다.

 

react-native init <package-name>

위의 명령어로 새로운 패키지를 만들어 준 뒤, 아래의 코드들을 순서대로 터미널에 작성하여 초기 설치를 진행한다.

npm install @react-navigation/native

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

버전이 업데이트되면서 linking 과정이 자동적으로 수행되기 때문에 다른 것들은 할 필요 없이 아래 코드만 실행해 준다.

npx pod-install ios

 

여기의 내용은 버전이 업데이트되면서 강의와 다른 내용으로 진행된다.

 

android/app/src/main/java/<your package name>/MainActivity.java

위의 경로에 있는 MainActivity.java 파일로 들어간 뒤,

import android.os.Bundle;

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

위의 코드들을 복사 붙여넣기 한다.

 

그리고 entry file인 index.js 나 App.js 에 아래와 같이 코드를 작성하면 된다.

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

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

 

 

그리고 강의에서는 stack-navigation 을 사용할 예정으로 아래 코드를 추가로 실행하여 stack-navigation을 위한 설치 작업도 해줬다.

npm install @react-navigation/native-stack

 

설치한 항목들은 package.json에 들어가면 확인 가능하다.

 

{
  "name": "react_navigation_01",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/runtime": "^7.16.7",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-jest": "^27.4.6",
    "eslint": "^8.6.0",
    "jest": "^27.4.7",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

 

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의