커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
스택 네비게이터 적용 문의드립니다!
[왕초보] 나만의 수익성 앱, 앱개발 종합반
3주차
북마크
김*지
댓글
3
・
추천
0
・
조회수
10
조회수
10
답변 완료

안녕하세요.

문의드립니다!


설치코드 모두 적용하고

App.js / StackNavigator.js 코드 적용했는데

앱화면이 아래와 같이 표시됩니다 ㅠ.ㅠ



스파르타 즉문즉답


TERMINAL 내용

minjikim@Minjiui-iMac sparta-study % cd sparta-myhoneytip-ji
minjikim@Minjiui-iMac sparta-myhoneytip-ji % expo start --tunnel


This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo start


Starting project at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji
Starting Metro Bundler
Started Metro Bundler
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Using legacy dev server: false
Tunnel connected.
Tunnel ready.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀ █▀▀██▄▄▄ ▄▄▄▄▄██ ▄▄▄▄▄ █
█ █   █ █▀ ▄ ██▄█▄▀▀ █▄▀█ █ █   █ █
█ █▄▄▄█ █▀█ █▄   █ ▄▄   ▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█▄█ ▀▄▀▄█ █ ▀▄█ █▄▄▄▄▄▄▄█
█▄▄   ▀▄   ▄█▄█▄▄▄▄▀ █▀▄▀█▄▀▄█ █▄▀█
█▄▀███▄▄▀█ ▀ ▄█▀ █████ ▀▀▀▄ ▀▀▄▀█▀█
█▀▀▄▄  ▄▀█▄▀▄▀▀▀█▄ █▀ ██▀█▄▀▄▄▀█▀ █
█▀ ▀▄ █▄    █▀ ▄▄██ █▄  ▀▄█ █▀ ▀███
█▀▄▄ ▄▄▄▀▄█▄█▄█▄█▄▄█ ▀█▄  ▄▀▄▄██▀▀█
█▄▄▄█▄▀▄▀▀▄█ ▄█▀ ▀█ █▀  ▀ ▀▄▄ █ ▄██
█▀ █▀ █▄███▀▄▀▀▀▄   ▀ █ ▀█▄▀ ▄▄▀▀ █
█ █▀█▄▀▄▀ ▄▀█▀ ▄▄▄▄▀█▄ ▀▀█▀▀▀▄█▀ ██
█▄███▄▄▄█ ▄██▄█▄▄▀▄▀  █▄▄ ▄▄▄ ▀█▄▀█
█ ▄▄▄▄▄ █▄▄█ ▄█▀  █▀█  █  █▄█ ▄ ▄▀█
█ █   █ █ ▀▀▄▀▀▀▄▀ ▀▀▀█▄█  ▄▄  ▀▀ █
█ █▄▄▄█ █   █▀ ▄▄██▄▀▀▀ ▄█▀ █▀▀▀███
█▄▄▄▄▄▄▄█▄█▄█▄█▄▄▄▄█▄██▄▄▄▄▄██▄█▄██


› Metro waiting on
exp://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct:80
› Scan the QR code above with Expo Go (Android) or the
Camera app (iOS)


› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web


› Press r │ reload app
› Press m │ toggle menu


› Press ? │ show all commands


Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundling complete 7156ms
iOS Running app on iPhone
› Stopped server
minjikim@Minjiui-iMac sparta-myhoneytip-ji % 
minjikim@Minjiui-iMac sparta-myhoneytip-ji % expo install expo-status-bar


This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo install


Installing 1 SDK 46.0.0 compatible native module using Yarn.
> yarn add expo-status-bar@~1.4.0
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 0 new dependencies.
✨  Done in 1.05s.
minjikim@Minjiui-iMac sparta-myhoneytip-ji % 
minjikim@Minjiui-iMac sparta-myhoneytip-ji % expo start --tunnel


This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo start


Starting project at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji
Starting Metro Bundler
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Using legacy dev server: false
Started Metro Bundler
Tunnel connected.
Tunnel ready.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀ █▀▀██▄▄▄ ▄▄▄▄▄██ ▄▄▄▄▄ █
█ █   █ █▀ ▄ ██▄█▄▀▀ █▄▀█ █ █   █ █
█ █▄▄▄█ █▀█ █▄   █ ▄▄   ▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█▄█ ▀▄▀▄█ █ ▀▄█ █▄▄▄▄▄▄▄█
█▄▄   ▀▄   ▄█▄█▄▄▄▄▀ █▀▄▀█▄▀▄█ █▄▀█
█▄▀███▄▄▀█ ▀ ▄█▀ █████ ▀▀▀▄ ▀▀▄▀█▀█
█▀▀▄▄  ▄▀█▄▀▄▀▀▀█▄ █▀ ██▀█▄▀▄▄▀█▀ █
█▀ ▀▄ █▄    █▀ ▄▄██ █▄  ▀▄█ █▀ ▀███
█▀▄▄ ▄▄▄▀▄█▄█▄█▄█▄▄█ ▀█▄  ▄▀▄▄██▀▀█
█▄▄▄█▄▀▄▀▀▄█ ▄█▀ ▀█ █▀  ▀ ▀▄▄ █ ▄██
█▀ █▀ █▄███▀▄▀▀▀▄   ▀ █ ▀█▄▀ ▄▄▀▀ █
█ █▀█▄▀▄▀ ▄▀█▀ ▄▄▄▄▀█▄ ▀▀█▀▀▀▄█▀ ██
█▄███▄▄▄█ ▄██▄█▄▄▀▄▀  █▄▄ ▄▄▄ ▀█▄▀█
█ ▄▄▄▄▄ █▄▄█ ▄█▀  █▀█  █  █▄█ ▄ ▄▀█
█ █   █ █ ▀▀▄▀▀▀▄▀ ▀▀▀█▄█  ▄▄  ▀▀ █
█ █▄▄▄█ █   █▀ ▄▄██▄▀▀▀ ▄█▀ █▀▀▀███
█▄▄▄▄▄▄▄█▄█▄█▄█▄▄▄▄█▄██▄▄▄▄▄██▄█▄██


› Metro waiting on exp://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct:80
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)


› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web


› Press r │ reload app
› Press m │ toggle menu


› Press ? │ show all commands


Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundling complete 723ms
iOS Running app on iPhone


Disconnected from Metro.
at node_modules/metro-runtime/src/modules/vendor/eventemitter3.js:192:15 in emit
at node_modules/metro-runtime/src/modules/HMRClient.js:55:6 in _ws.onclose
at node_modules/react-native/Libraries/WebSocket/WebSocket.js:257:8 in _eventEmitter.addListener$argument_1
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:150:10 in EventEmitter#emit


iOS Bundling complete 55ms
iOS Running app on iPhone


Disconnected from Metro.
at node_modules/metro-runtime/src/modules/vendor/eventemitter3.js:192:15 in emit
at node_modules/metro-runtime/src/modules/HMRClient.js:55:6 in _ws.onclose
at node_modules/react-native/Libraries/WebSocket/WebSocket.js:257:8 in _eventEmitter.addListener$argument_1
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:150:10 in EventEmitter#emit


iOS Bundling complete 1089ms
iOS Running app on iPhone


Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, object,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.


Check the render method of `App`., 
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
at node_modules/react/cjs/react-jsx-runtime.development.js:87:4 in printWarning
at node_modules/react/cjs/react-jsx-runtime.development.js:61:18 in error
at node_modules/react/cjs/react-jsx-runtime.development.js:1239:11 in jsxWithValidation
at App.js:19:4 in App
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:80:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:119:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication


Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.


Check the render method of `App`.


This error is located at:
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:52:4 in showErrorDialog
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:80:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:119:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication


Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.


Check the render method of `App`.


This error is located at:
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
SyntaxError: /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/react-native-reanimated/src/index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
    |        ^^^^^^^^^^^^
  8 |
    at File.buildCodeFrameError (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/core/lib/transformation/file/file.js:249:12)
    at NodePath.buildCodeFrameError (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/traverse/lib/path/index.js:145:21)
    at assertExportSpecifier (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:112:16)
    at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:202:9
    at Array.forEach (<anonymous>)
    at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:201:31
    at Array.forEach (<anonymous>)
    at getModuleMetadata (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:149:27)
    at normalizeModuleAndLoadMetadata (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:58:7)


Cannot connect to Metro.


Try the following to fix the issue:
- Ensure that Metro is running and available on the same network
- Ensure that the Metro URL is correctly set in AppDelegate


URL: h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct:80


Error: The operation couldn’t be completed. Socket is not connected
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:115910:22 in warn
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:35898:18 in setHMRUnavailableReason
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:35832:31 in <unknown>
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:36384:34 in emit
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:36103:18 in <unknown>
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:33555:30 in dispatchEvent
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:34497:30 in <unknown>
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:2744:41 in emit
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:24039:35 in __callFunction
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:23767:30 in <unknown>
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:23993:14 in __guard
at http://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:23766:20 in callFunctionReturnFlushedQueue


iOS Bundling complete 51ms
iOS Bundling complete 28ms
› Stopped server
minjikim@Minjiui-iMac sparta-myhoneytip-ji % expo start --tunnel


This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo start


Starting project at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji
Starting Metro Bundler
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Using legacy dev server: false
Started Metro Bundler
Tunnel connected.
Tunnel ready.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▀ █▀▀██▄▄▄ ▄▄▄▄▄██ ▄▄▄▄▄ █
█ █   █ █▀ ▄ ██▄█▄▀▀ █▄▀█ █ █   █ █
█ █▄▄▄█ █▀█ █▄   █ ▄▄   ▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█▄█ ▀▄▀▄█ █ ▀▄█ █▄▄▄▄▄▄▄█
█▄▄   ▀▄   ▄█▄█▄▄▄▄▀ █▀▄▀█▄▀▄█ █▄▀█
█▄▀███▄▄▀█ ▀ ▄█▀ █████ ▀▀▀▄ ▀▀▄▀█▀█
█▀▀▄▄  ▄▀█▄▀▄▀▀▀█▄ █▀ ██▀█▄▀▄▄▀█▀ █
█▀ ▀▄ █▄    █▀ ▄▄██ █▄  ▀▄█ █▀ ▀███
█▀▄▄ ▄▄▄▀▄█▄█▄█▄█▄▄█ ▀█▄  ▄▀▄▄██▀▀█
█▄▄▄█▄▀▄▀▀▄█ ▄█▀ ▀█ █▀  ▀ ▀▄▄ █ ▄██
█▀ █▀ █▄███▀▄▀▀▀▄   ▀ █ ▀█▄▀ ▄▄▀▀ █
█ █▀█▄▀▄▀ ▄▀█▀ ▄▄▄▄▀█▄ ▀▀█▀▀▀▄█▀ ██
█▄███▄▄▄█ ▄██▄█▄▄▀▄▀  █▄▄ ▄▄▄ ▀█▄▀█
█ ▄▄▄▄▄ █▄▄█ ▄█▀  █▀█  █  █▄█ ▄ ▄▀█
█ █   █ █ ▀▀▄▀▀▀▄▀ ▀▀▀█▄█  ▄▄  ▀▀ █
█ █▄▄▄█ █   █▀ ▄▄██▄▀▀▀ ▄█▀ █▀▀▀███
█▄▄▄▄▄▄▄█▄█▄█▄█▄▄▄▄█▄██▄▄▄▄▄██▄█▄██


› Metro waiting on exp://h2-6ws.minjicolor.sparta-myhoneytip-ji.exp.direct:80
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)


› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web


› Press r │ reload app
› Press m │ toggle menu


› Press ? │ show all commands


Logs for your project will appear below. Press Ctrl+C to exit.
› Stopped server
minjikim@Minjiui-iMac sparta-myhoneytip-ji % yarn add @react-navigation/native
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6".
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ @react-navigation/native@6.0.13
info All dependencies
└─ @react-navigation/native@6.0.13
✨  Done in 1.23s.
minjikim@Minjiui-iMac sparta-myhoneytip-ji % expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view


This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo install


Installing 4 SDK 46.0.0 compatible native modules and 1 other package using Yarn.
> yarn add react-native-gesture-handler@~2.5.0 react-native-reanimated@~2.9.1 react-native-screens@~3.15.0 react-native-safe-area-context@4.3.1 @react-native-community/masked-view
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
warning @react-native-community/masked-view@0.1.11: Repository was moved to @react-native-masked-view/masked-view
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ @react-native-community/masked-view@0.1.11
info All dependencies
└─ @react-native-community/masked-view@0.1.11
✨  Done in 1.88s.
minjikim@Minjiui-iMac sparta-myhoneytip-ji % yarn add @react-navigation/stack
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-native > react-native-codegen > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6".
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ @react-navigation/stack@6.3.1
info All dependencies
└─ @react-navigation/stack@6.3.1
✨  Done in 2.84s.
minjikim@Minjiui-iMac sparta-myhoneytip-ji % expo start


This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421
To use the local CLI instead (recommended in SDK 46 and higher), run:
› npx expo start


Starting project at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █   █▄█▀▄██ ▄▄▄▄▄ █
█ █   █ █ ▀▄ █▀█ ▄█ █   █ █
█ █▄▄▄█ █▀██▀▀ ▀▄██ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄▀▄█ █ █▄█▄▄▄▄▄▄▄█
█▄ ▀█  ▄▀▀▀▀▄▀█▄▀▄██ ▀▄▄ ▄█
█▀▄▀ ▀ ▄ ▀█▀ ▄█▀▄▄▀ █▄  ▀██
█ ▄██▀▄▄▄▄█▄█▄▀▄ █▀▄▀▀▄ ▀██
███ ▄▀▄▄  █▄█▀██ ▀▄▀ ▄ ▀███
█▄▄▄▄██▄█ ▀ ▄▀▀▄▀ ▄▄▄ ▀ ▄▄█
█ ▄▄▄▄▄ █▀▀▀ ▄██▀ █▄█ ▀▀█▀█
█ █   █ █▄▄▄█▄▀▄█ ▄ ▄▄▀   █
█ █▄▄▄█ █▀▀▄█▀██▀█▀▄▀█▀▀ ██
█▄▄▄▄▄▄▄█▄██▄▄▄▄███▄▄▄▄▄▄▄█


› Metro waiting on exp://172.30.1.60:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)


› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web


› Press r │ reload app
› Press m │ toggle menu


› Press ? │ show all commands


Logs for your project will appear below. Press Ctrl+C to exit.
Started Metro Bundler
iOS Bundling failed 1218ms
node_modules/react-native-reanimated/src/index.ts: /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/react-native-reanimated/src/index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
    |        ^^^^^^^^^^^^
  8 |
SyntaxError: /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/react-native-reanimated/src/index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
    |        ^^^^^^^^^^^^
  8 |
    at File.buildCodeFrameError (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/core/lib/transformation/file/file.js:249:12)
    at NodePath.buildCodeFrameError (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/traverse/lib/path/index.js:145:21)
    at assertExportSpecifier (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:112:16)
    at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:202:9
    at Array.forEach (<anonymous>)
    at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:201:31
    at Array.forEach (<anonymous>)
    at getModuleMetadata (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:149:27)
    at normalizeModuleAndLoadMetadata (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:58:7)
iOS Bundling failed 277ms
node_modules/react-native-reanimated/src/index.ts: /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/react-native-reanimated/src/index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
    |        ^^^^^^^^^^^^
  8 |
SyntaxError: /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/react-native-reanimated/src/index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
    |        ^^^^^^^^^^^^
  8 |
    at File.buildCodeFrameError (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/core/lib/transformation/file/file.js:249:12)
    at NodePath.buildCodeFrameError (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/traverse/lib/path/index.js:145:21)
    at assertExportSpecifier (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:112:16)
    at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:202:9
    at Array.forEach (<anonymous>)
    at /Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:201:31
    at Array.forEach (<anonymous>)
    at getModuleMetadata (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:149:27)
    at normalizeModuleAndLoadMetadata (/Users/minjikim/Desktop/sparta-study/sparta-myhoneytip-ji/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:58:7)


App.js

import React from 'react';
//이제 모든 페이지 컴포넌트들이 끼워져있는 책갈피를 메인에 둘예정이므로
//컴포넌트를 더이상 불러오지 않아도 됩니다.
// import MainPage from './pages/MainPage';
// import DetailPage from './pages/DetailPage';
import { StatusBar } from 'expo-status-bar';


//메인에 세팅할 네비게이션 도구들을 가져옵니다.
import {NavigationContainer} from '@react-navigation/native';
import StackNavigator from './navigation/StackNavigator'


export default function App() {


  console.disableYellowBox = true;


  return ( 
  <NavigationContainer>
    <StatusBar style="black" />
    <StackNavigator/>
 </NavigationContainer>);
}


StackNavigator.js 

import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';


//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';


//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();



const StackNavigator = () =>{
    return (


        //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
        //위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
        //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: "black",
                    borderBottomColor: "black",
                    shadowColor: "black",
                    height:100
                },
                headerTintColor: "#FFFFFF",
                headerBackTitleVisible: false
            }}
            
        >


            {/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
            <Stack.Screen name="MainPage" component={MainPage}/>
            <Stack.Screen name="DetailPage" component={DetailPage}/>
        </Stack.Navigator>
    )
}


export default StackNavigator;
취소
 공유
취소
댓글 0
댓글 알림
나의얼굴