[React-native] Expo 최신 버전으로 프로젝트 세팅 (JS 버전)

기본 설치

1. 기본 세팅
npm install -g yarn
npm install --global expo-cli

expo login --username "Expo 사이트 가입당시 입력한 name" 입력 후,
     expo 패스워드입력 (단, 이건 cmd에서만 가능. 터미널은 불가)


2. 프로젝트 생성
$ npx create-expo-app 프로젝트이름

* 만약, 프로젝트 템플릿을 선택하고 싶다면 다음 명령어 실행
$ npx create-expo-app --template


3. 프로젝트 생성 후 해당 디렉토리로 이동
$ cd 프로젝트이름


4. 프로젝트 실행
$ npx expo start  또는  yarn expo start

* 만약, 웹브라우저로 사용을 원하는 경우 다음의 명령어 설치 후 위의 명령어로 재시작 후 w클릭
$ npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1H

---

GitHub 연동

1. GitHub Repository 개설

2. 앞서 만든 프로젝트 디렉토리에서 터미널을 연 후, git remote로 연동

단, 개설한 repository 주소를 붙여넣었을 경우, 간혹 맨 뒤에 ~가 붙는 경우가 있다. ~를 지워줘야 정상적으로 push됨

$ git remote add origin 개설한_Repository의_HTTPS주소

* 만약 주소를 잘못 넣어서 remote를 제거하고 싶은 경우
$ git remote rm origin

3. 새로 푸쉬함(현재상태 : 원격은 main브랜치, 로컬은 master브랜치가 있을 것임. master로 push)

단, commit할 내용이 없어서 안된다고 나올 경우, 아무 dependency를 설치 후 진행해보길 권장

$ git add .
$ git commit -m "원하는_메세지"
$ git push origin master

4. GitHub Repository로 가서, 상단에서 Setting으로 진입 후, Default Branch를 master로 변경

---

React-native Navigation 적용을 위한 세팅

* Stack Navigation 및 Bot_Tab 적용을 위한 Dependencies 모음

yarn add expo-status-bar
yarn add react-native-reanimated
yarn add react-native-screens
yarn add react-native-safe-area-context
yarn add react-native-gesture-handler
yarn add react-native-pager-view
yarn add @react-native-community/masked-view
yarn add @react-native-masked-view/masked-view
yarn add @react-navigation/stack
yarn add @react-navigation/drawer
yarn add @react-navigation/bottom-tabs
yarn add @react-navigation/material-top-tabs
npx expo install react-native-pager-view

공식문서 : https://reactnavigation.org/docs/material-top-tab-navigator/

---