처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋

 

 

 

npm start 결과 화면

환경

Mac OS 13.2 

Xcode 14.2

React Native  v0.70.5 ( v0.71.3 is currently newer)

node 16.0.0

expo ~47.0.12

프로젝트 생성

 

dear-diary 라는 이름의 프로젝트 생성

--use-npm : npm 을 이용하여 의존성설치를 하겠다.

npx create-react-native-app dear-diary --use-npm

Default new app (선택)

cd dear-diary

expo splashscreen 을 기본 템플릿에 포함하기를 원한다면, 

npx create-react-native-app -t with-splash-screen

# 단,  with-splash-screen 템플릿을 선택한다면 ios/android 폴더가 생성되지 않고 cocoapod 을 비롯한 모듈도 설치되지 않더라.
# 또한 시뮬레이터가 expo go 로 실행하는 package.json 파일을 얻는다.

React navigation native 설치 

npm install @react-navigation/native

#의존성 설치 
npx expo install react-native-screens react-native-safe-area-context

If you're on a Mac and developing for iOS,

npx pod-install ios

 

Stack Navigation 설치 

npm install @react-navigation/native-stack

 

styled-components 설치 

# with npm

npm i styled-components
#또는 
npm install --save styled-components

styled-components의 자동완성기능 추가하기 

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

 

실행시 시뮬레이터 지정하기 

npx react-native run-ios --simulator='iPhone SE (3rd generation)'

또는 package.json 을 수정해둔 후 실행한다. 

package.json

  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "react-native run-ios --simulator='iPhone 12 Pro Max'",
    "web": "expo start --web"
  },

이후 npm run ios 로 실행한다.

---

혹시 첫 실행 도중 아래와 같은 에러가 난다면 

❌  (node_modules/expo-modules-core/ios/Swift/DynamicTypes/DynamicEnumType.swift:7:21)

   5 |  */
   6 | internal struct DynamicEnumType: AnyDynamicType {
>  7 |   let innerType: any Enumerable.Type
     |                     ^ consecutive declarations on a line must be separated by ';'
   8 | 
   9 |   func wraps<InnerType>(_ type: InnerType.Type) -> Bool {
  10 |     return innerType == InnerType.self

참고 : https://stackoverflow.com/questions/74992891/expo-npm-run-ios-gets-exited-with-error-code-65-after-expo-prebuild

Expo - npm run ios gets "exited with error code 65" after expo prebuild

나는 위와 같은 문제가 MacOs 13.2 , xcode 13.2에서 발생해서 MocOS 13.2(최신) , xcode 14.2로 업데이트 했다. (결과 ,잘 실행됨)

다음글 

2023.02.13 - [개발로그/ReactNative] - 다이어리 앱을 만들면서 연습해보자. - 모듈설치 /Home / Write Screen

다이어리 앱을 만들면서 연습해보자. - 모듈설치 /Home / Write Screen

끝