5주차 까지 하고 시간이 남아 다시 새로운 폴더 만들어 복습 하는데 2주차 숙제와
3주차 첫번째 과제 App.js에서 main.js와 about.js, DetailPage.js로 분기하는 프로그램만 넣어주면
아래와 같은 에러가 나옵니다.
작성한 코드 및 에러 메세지
App.js: Cannot find module 'react-native-reanimated/plugin'
Require stack:
- C:\Users\user\Desktop\app-source\lee-soo1\node_modules\@babel\core\lib\config\files\plugins.js
- C:\Users\user\Desktop\app-source\lee-soo1\node_modules\@babel\core\lib\config\files\index.js
- C:\Users\user\Desktop\app-source\lee-soo1\node_modules\@babel\core\lib\index.js
- C:\Users\user\Desktop\app-source\lee-soo1\node_modules\metro-transform-worker\src\index.js
- C:\Users\user\Desktop\app-source\lee-soo1\node_modules\metro\src\DeltaBundler\Worker.js
- C:\Users\user\Desktop\app-source\lee-soo1\node_modules\jest-worker\build\workers\processChild.js
Error: Cannot find module 'react-native-reanimated/plugin'오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
App.js
export default function App() {
// return (<MainPage/>)
// return (<AboutPage/>)
return (<DetailPage/>)
}
DetailPage.js
import React from 'react';
import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert } from 'react-native';
export default function DetailPage() {
const tip = {
"idx":9,
"category":"재테크",
"title":"렌탈 서비스 금액 비교해보기",
"image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",
"desc":`요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다.
사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요.
다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다.
특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다.
직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요.
렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. `,
"date":"2020.09.09"
}
const popup = () => {
Alert.alert("팝업!!")
}
return (
// ScrollView에서의 flex 숫자는 의미가 없습니다. 정확히 보여지는 화면을 몇등분 하지 않고
// 화면에 넣은 컨텐츠를 모두 보여주려 스크롤 기능이 존재하기 때문입니다.
// 여기선 내부의 컨텐츠들 영역을 결정짓기 위해서 height 값과 margin,padding 값을 적절히 잘 이용해야 합니다.
<ScrollView style={styles.container}>
<Image style={styles.image} source={{uri:tip.image}}/>
<View style={styles.textContainer}>
<Text style={styles.title}>{tip.title}</Text>
<Text style={styles.desc}>{tip.desc}</Text>
<TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>
</View>
</ScrollView>
)
}
const styles = StyleSheet.create({
container:{
backgroundColor:"#000"
},
image:{
height:400,
margin:10,
marginTop:40,
borderRadius:20
},
textContainer:{
padding:20,
justifyContent:'center',
alignItems:'center'
},
title: {
fontSize:20,
fontWeight:'700',
color:"#eee"
},
desc:{
marginTop:10,
color:"#eee"
},
button:{
width:100,
marginTop:20,
padding:10,
borderWidth:1,
borderColor:'deeppink',
borderRadius:7
},
buttonText:{
color:'#fff',
textAlign:'center'
}
})
