StackNavigator.js code 추가와 App.js 에 StackNavigator 기능이 포함된 code 복붙후 에러발생
작성한 코드 및 에러 메세지
(에러메세지)
Android Bundling failed 1061ms
node_modules\react-native-reanimated\src\index.ts: C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\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: C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\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 (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\core\lib\transformation\file\file.js:249:12)
at NodePath.buildCodeFrameError (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\path\index.js:145:21)
at assertExportSpecifier (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:112:16)
at C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:202:9
at Array.forEach (<anonymous>)
at C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:201:31
at Array.forEach (<anonymous>)
at getModuleMetadata (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:149:27)
at normalizeModuleAndLoadMetadata (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:58:7)
at rewriteModuleStatementsAndPrepareHeader (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\helper-module-transforms\lib\index.js:93:54)
at PluginPass.exit (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\plugin-transform-modules-commonjs\lib\index.js:160:83)
at newFn (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\visitors.js:181:21)
at NodePath._call (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\path\context.js:53:20)
at NodePath.call (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\path\context.js:109:8)
at TraversalContext.visitQueue (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\context.js:105:16)
at TraversalContext.visitSingle (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\context.js:79:19)
at TraversalContext.visit (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\context.js:133:19)
at traverseNode (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\traverse-node.js:24:17)
at traverse (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\traverse\lib\index.js:62:34)
at transformFile (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\core\lib\transformation\index.js:108:29)
at transformFile.next (<anonymous>)
at run (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\core\lib\transformation\index.js:35:12)
at run.next (<anonymous>)
at C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\core\lib\transform-ast.js:30:41
at Generator.next (<anonymous>)
at evaluateSync (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\gensync\index.js:251:28)
at sync (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\gensync\index.js:89:14)
at stopHiding - secret - don't use this - v1 (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\core\lib\errors\rewrite-stack-trace.js:50:12)
at transformFromAstSync (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\@babel\core\lib\transform-ast.js:57:83)
at Object.transform (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\metro-react-native-babel-transformer\src\index.js:192:20)
at transformJSWithBabel (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\metro-transform-worker\src\index.js:398:45)
at Object.transform (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\metro-transform-worker\src\index.js:571:18)
at Object.transform (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\metro\src\DeltaBundler\Worker.js:38:36)
at execFunction (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\jest-worker\build\workers\processChild.js:137:17)
at execHelper (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\jest-worker\build\workers\processChild.js:116:5)
at execMethod (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\jest-worker\build\workers\processChild.js:120:5)
at process.messageListener (C:\Users\shany\Desktop\sparta-study\sparta-myhoneytip-sean\node_modules\jest-worker\build\workers\processChild.js:38:7)
at process.emit (node:events:527:28)
at emit (node:internal/child_process:938:14)
(App.js code)
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 code)
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;
