탭탭카드놀이) React Native 프로젝트생성 (CRNA)

2022. 3. 4. 01:23프로그래밍/개인프로젝트

create-react-native-app을 이용해서 모바일 앱을 만드는데

모바일 앱은 처음이라 프로젝트를 다시 시작하는 경우가 많아 다시보기편하게 작성하는 글 입니다


1. terminal을 열어서 원하는 디렉토리로 이동한뒤 npx create-react-native-app ->

→ 앱이름작성하고 default설치 클릭

 

2. 설치완료후 npm start -> metro서버 켜기,  새터미널을 하나 열어서 npm run ios


깃헙 repository 등록하기

- https://github.com/new

- 깃헙 repository 생성, 주소복사

- git remote add origin 복사한주소

- git add .

- git commit -m "커밋내용

- git push origin master

3. expo install expo-app-loading -> 시뮬레이터에서 실행중인 앱 재시작

 

4. expo install expo-font 

 

5. expo install expo-asset

 

6. npm install @react-navigation/native

 

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

 

8. npx pod-install ios

ios로 구동할 때, Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager 오류발생 해결법
react-navigation/native를 깔고나서 콘솔로 프로젝트 폴더의 ios로 들어간다음 pod install 
metro서버 및 시뮬레이터 재실행

 

9. npm install @react-navigation/bottom-tabs

 

10. npm install @react-navigation/native-stack

 

11. npm i styled-components

 

12. npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer

(타입스크립트)

 

13. npm install @types/styled-components @types/styled-components-react-native

(tsx에서 styled component를 사용하려면 설치해야함)

 

-- 개발하면서 추가적으로 작성예정 --