작성한 코드 및 에러 메세지
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
const mainImage01 = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png';
const mainImage02 = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/pizza.png';
export default function App() {
return (
<ScrollView style={styles.container}>
<Text style={styles.title}> 나만의 꿀팁</Text>
<Image style={styles.mainImage} source={{uri: mainImage01}}/>
<ScrollView style={styles.middleContainer} horizontal indicatorStyle='white'>
<TouchableOpacity style={styles.middleButton01}>
<Text style={styles.middleButtonText}> 생활</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.middleButton01}>
<Text style={styles.middleButtonText}> 은주</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.middleButton01}>
<Text style={styles.middleButtonText}> 서연</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.middleButton01}>
<Text style={styles.middleButtonText}> 따봉</Text>
</TouchableOpacity>
</ScrollView>
<View style={styles.cardContainer}>
<View style={styles.card}>
<Image style={styles.cardImage} source = {{uri: mainImage02}}/>
<View style={styles.cardText}>
<Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게</Text>
<Text style={styles.cardDesc} numberOfLines={3}>
먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.
</Text>
</View>
</View>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
},
mainImage: {
width: '90%',
height: 200,
marginTop: 20,
borderRadius: 20,
alignSelf: 'center'
},
middleContainer: {
marginTop: 20,
marginLeft: 10,
marginRight: 10,
height: 60,
alignSelf: 'center'
},
middleButton01: {
width: 100,
height: 50,
padding: 12,
backgroundColor: '#fdc453',
borderColor: 'deeppink',
borderRadius: 15,
},
cardContainer: {
marginTop: 10,
marginLeft: 10,
},
cardText: {
flex: 2,
flexDirection: 'column',
marginLeft:10,
},
cardTitle: {
fontSize: 20,
fontWeight: '700',
},
cardImage: {
flex: 1,
width: 20,
height: 100,
borderRadius: 10,
},
card: {
flex: 1,
flexDirection: 'row',
margin: 10,
borderBottomWidth: 0.5,
borderBottomColor: '#eee',
paddingButtom: 10,
}
})
