import React from 'react';
// import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
export default function App() {
return (
<ScrollView style={styles.container}>
<Text style={styles.textStyle}>나만의 꿀팁</Text>
<Image style={styles.imageStyle} source={{uri:main}}/>
<ScrollView style={styles.middleContainer} horizontal>
<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 */}
<View style={styles.card}>
<Image style={styles.cardImage} source={{uri:"https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3"}}/>
<View style={styles.cardText}>
<Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!</Text>
<Text style={styles.cardDesc} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
<Text style={styles.cardDate}>2020.09.09</Text>
</View>
</View>
</view>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
//영역을 잡는 속성입니다. 따로 자세히 다룹니다.
//flex: 1은 전체 화면을 가져간다는 뜻입니다
//영역의 배경 색을 결정합니다
backgroundColor: '#fff',
//아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다.
// justifyContent:"center",
// alignContent:"center"
margin:20
},
textStyle: {
//글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
// color:"red",
//글자의 크기를 결정합니다
fontSize:20,
//글자의 두께를 결정합니다
fontWeight:"700",
//가로기준으로 글자의 위치를 결정합니다
// textAlign:"center"
marginTop:50,
marginBottom:20
},
imageStyle: {
width:"100%",
height:200,
alignSelf:"center",
// justifyContent:"center",
borderRadius:20
},
middleContainer: {
marginVertical:20,
height:60
},
middleButton01: {
width:130,
height:60,
borderRadius:20,
backgroundColor:"#fdc453",
// alignItems:"center",
marginRight:10,
},
middleButton02: {
width:130,
height:60,
borderRadius:20,
backgroundColor:"#fe8d6f",
marginRight:10
},
middleButton03: {
width:130,
height:60,
borderRadius:20,
backgroundColor:"#9adbc5",
// alignItems:"center",
marginRight:10
},
middleButton04: {
width:130,
height:60,
borderRadius:20,
backgroundColor:"#f886a8",
// alignItems:"center",
marginRight:10
},
middleButtonText: {
color:"#fff",
fontWeight:"700",
textAlign:"center"
},
cardContainer: {
marginTop:10,
marginLeft:10
},
card:{
flex:1,
flexDirection:"row",
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",
}
});
계속 에러나는데 원인을 알 수 있을까요?
