커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
MainPage에 App.js을 복붙하고 제대로 수정했는데 에러메세지가 발생합니다.
앱개발 종합반 - 리액트 네이티브
2주차
북마크
김*환
댓글
5
・
추천
0
・
조회수
19
조회수
19
답변 완료


MainPage에 App.js을 복붙하고 제대로 수정했는데 에러 메세지가 발생합니다.



스파르타 즉문즉답




작성한 코드 및 에러 메세지

(에러메세지)


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 RCTView (created by View)

  in View (created by AppContainer)

  in AppContainer

  in main(RootComponent)

at node_modules\expo\build\environment\react-native-logs.fx.js:null in error

at node_modules\react\cjs\react-jsx-runtime.development.js:null in printWarning

at node_modules\react\cjs\react-jsx-runtime.development.js:null in error

at node_modules\react\cjs\react-jsx-runtime.development.js:null in jsxWithValidation

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in renderWithHooks

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in updateFunctionComponent

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in beginWork$1  

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in performUnitOfWork

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in workLoopSync  

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in renderRootSyncat node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in performSyncWorkOnRoot

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in flushSyncCallbacks

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in flushSync   

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in scheduleRefresh

at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:null in mountedRoots.forEach$argument_0  

at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:null in performReactRefresh

at node_modules\react-native\Libraries\Core\setUpReactRefresh.js:null in Refresh.performReactRefresh

at node_modules\metro-runtime\src\polyfills\require.js:null in setTimeout$argument_0

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callTimers

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callFunction

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in callFunctionReturnFlushedQueue    


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 RCTView (created by View)

  in View (created by AppContainer)

  in AppContainer

  in main(RootComponent)

at node_modules\expo\build\environment\react-native-logs.fx.js:null in error

at node_modules\react\cjs\react-jsx-runtime.development.js:null in printWarning

at node_modules\react\cjs\react-jsx-runtime.development.js:null in error

at node_modules\react\cjs\react-jsx-runtime.development.js:null in jsxWithValidation

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in renderWithHooks

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in updateFunctionComponent

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in invokeGuardedCallbackProd

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in invokeGuardedCallback

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in beginWork$1  

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in performUnitOfWork

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in workLoopSync  

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in renderRootSyncat node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in performSyncWorkOnRoot

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in flushSyncCallbacks

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in flushSync   

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in scheduleRefresh

at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:null in mountedRoots.forEach$argument_0  

at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:null in performReactRefresh

at node_modules\react-native\Libraries\Core\setUpReactRefresh.js:null in Refresh.performReactRefresh

at node_modules\metro-runtime\src\polyfills\require.js:null in setTimeout$argument_0

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callTimers

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callFunction

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in callFunctionReturnFlushedQueue    


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 App (created by ExpoRoot)

  in ExpoRoot

  in RCTView (created by View)

  in View (created by AppContainer)

  in RCTView (created by View)

  in View (created by AppContainer)

  in AppContainer

  in main(RootComponent)

at node_modules\expo\build\environment\react-native-logs.fx.js:null in error

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException

at node_modules\react-native\Libraries\Core\ReactFiberErrorDialog.js:null in showErrorDialog

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in logCapturedError

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in update.callback

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in callCallback  

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitUpdateQueue

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitLayoutEffectOnFiber

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitLayoutMountEffects_complete

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitLayoutEffects_begin

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitLayoutEffects

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitRootImplat node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitRoot   

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in performSyncWorkOnRoot

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in flushSyncCallbacks

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in flushSync   

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in scheduleRefresh

at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:null in mountedRoots.forEach$argument_0  

at node_modules\react-refresh\cjs\react-refresh-runtime.development.js:null in performReactRefresh

at node_modules\react-native\Libraries\Core\setUpReactRefresh.js:null in Refresh.performReactRefresh

at node_modules\metro-runtime\src\polyfills\require.js:null in setTimeout$argument_0

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callTimers

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callFunction

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in callFunctionReturnFlushedQueue    


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 App (created by ExpoRoot)

  in ExpoRoot

  in RCTView (created by View)

  in View (created by AppContainer)

  in RCTView (created by View)

  in View (created by AppContainer)

  in AppContainer

  in main(RootComponent)

at node_modules\expo\build\environment\react-native-logs.fx.js:null in error

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException

at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError

at node_modules\expo\build\errors\ExpoErrorManager.js:null in errorHandler

at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous>

at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:null in ErrorUtils.setGlobalHandler$argument_0   

at node_modules\@babel\runtime\helpers\asyncToGenerator.js:null in asyncGeneratorStep

at node_modules\@babel\runtime\helpers\asyncToGenerator.js:null in _next

at node_modules\promise\setimmediate\core.js:null in tryCallOne

at node_modules\promise\setimmediate\core.js:null in setImmediate$argument_0

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _allocateCallback$argument_0

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callTimer

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in _callReactNativeMicrotasksPass

at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:null in callReactNativeMicrotasks

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __callReactNativeMicrotasks

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard$argument_0

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard

at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in flushedQueue



(MainPage.js Code)

import React from 'react';

import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';


const main = 'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c'

import data from '../data.json';


export default function MainPage() {

  let tip = data.tip;

  let todayWeather = 10 + 17;

  let todayCondition = "흐림"

  //return 구문 밖에서는 슬래시 두개 방식으로 주석

  return (

    /*

      return 구문 안에서는 {슬래시 + * 방식으로 주석

    */

    <ScrollView style={styles.container}>

      <Text style={styles.title}>나만의 꿀팁</Text>

      <Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>

      <Image style={styles.mainImage} source={{uri:main}}/>

      <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>

        <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>

        <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>

        <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>

        <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>

      </ScrollView>

      <View style={styles.cardContainer}>

        {/* 하나의 카드 영역을 나타내는 View */}

        {

          tip.map((content,i)=>{

            return (<View style={styles.card} key={i}>

              <Image style={styles.cardImage} source={{uri:content.image}}/>

              <View style={styles.cardText}>

                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>

                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>

                <Text style={styles.cardDate}>{content.date}</Text>

              </View>

            </View>)

          })

         }

       

      </View>

   

    </ScrollView>

  );

}


const styles = StyleSheet.create({

  container: {

    //앱의 배경 색

    backgroundColor: '#fff',

  },

  title: {

    //폰트 사이즈

    fontSize: 20,

    //폰트 두께

    fontWeight: '700',

    //위 공간으로 부터 이격

    marginTop:50,

    //왼쪽 공간으로 부터 이격

    marginLeft:20

  },

  weather:{

    alignSelf:"flex-end",

    paddingRight:20

  },

  mainImage: {

    //컨텐츠의 넓이 값

    width:'90%',

    //컨텐츠의 높이 값

    height:200,

    //컨텐츠의 모서리 구부리기

    borderRadius:10,

    marginTop:20,

    //컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)

    //각 속성의 값들은 공식문서에 고대로~ 나와 있음

    alignSelf:"center"

  },

  middleContainer:{

    marginTop:20,

    marginLeft:10,

    height:60

  },

  middleButton01: {

    width:100,

    height:50,

    padding:15,

    backgroundColor:"#fdc453",

    borderColor:"deeppink",

    borderRadius:15,

    margin:7

  },

  middleButton02: {

    width:100,

    height:50,

    padding:15,

    backgroundColor:"#fe8d6f",

    borderRadius:15,

    margin:7

  },

  middleButton03: {

    width:100,

    height:50,

    padding:15,

    backgroundColor:"#9adbc5",

    borderRadius:15,

    margin:7

  },

  middleButtonText: {

    color:"#fff",

    fontWeight:"700",

    //텍스트의 현재 위치에서의 정렬

    textAlign:"center"

  },

  middleButton04: {

    width:100,

    height:50,

    padding:15,

    backgroundColor:"#f886a8",

    borderRadius:15,

    margin:7

  },

  cardContainer: {

    marginTop:10,

    marginLeft:10

  },

  card:{

    flex:1,

    //컨텐츠들을 가로로 나열

    //세로로 나열은 column <- 디폴트 값임

    flexDirection:"row",

    margin:10,

    borderBottomWidth:0.5,

    borderBottomColor:"#eee",

    paddingBottom:10


  },

  cardImage: {

    flex:1,

    width:100,

    height:100,

    borderRadius:10,

  },

  cardText: {

    flex:2,

    flexDirection:"column",

    marginLeft:10,

  },

  cardTitle: {

    fontSize:20,

    fontWeight:"700"

  },

  cardDesc: {

    fontSize:15

  },

  cardDate: {

    fontSize:10,

    color:"#A6A6A6",

  },



});


(App.js code)

import React from 'react'

import MainPage from './pages/MainPage';


export default function App(){

  return (<MainPage/>)

}


취소
 공유
취소
댓글 0
댓글 알림
나의얼굴