스스로 만들어 본 메인화면
import React from 'react';
import { StyleSheet, Text, View, Image, Alert, Button,ScrollView, TouchableOpacity } from 'react-native';
import windmill from "./assets/4.jpg"
export default function App() {
return (
<View style={styles.textContainer}>
<Text style={styles.textStyle}>나만의 꿀팁</Text>
</View>
<View style={styles.imageContainer}>
<Image
source={windmill}
style={styles.imageStyle}
resizeMode="cover"
/>
</View>
<ScrollView style={styles.buttonContainer}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<TouchableOpacity style={styles.buttonStyle}>
<View style={styles.button1}>
<Text style={styles.textFont}>미용</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle}>
<View style={styles.button2}>
<Text style={styles.textFont} >제태크</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle}>
<View style={styles.button3}>
<Text style={styles.textFont}>할인</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle}>
<View style={styles.button4}>
<Text style={styles.textFont}>신청</Text>
</View>
</TouchableOpacity>
</ScrollView>
<View style={styles.contentContainer}>
<View style={styles.contentImage}>
<Image
source={{uri:"https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3"}}
style={styles.contentImageView}
resizeMode="cover"
/>
</View>
<View style={styles.contentText}>
<Text style={styles.contentTitle}>먹다 남은 피자를 촉촉하게!</Text>
{/* <View style={styles.contentView}> */}
<Text
style={styles.contentContent}
ellipsizeMode={"tail"}
numberOfLines={4}
>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
{/* </View> */}
<Text style={styles.contentCalendar}>2020.09.09</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1
},
textContainer: {
flex:1,
margin:10,
marginTop:20
},
imageContainer:{
flex:6,
borderRadius:20,
margin:10,
backgroundColor:"red",
overflow:"hidden"
},
buttonContainer:{
width:"100%",
margin:10,
},
contentContainer:{
flex:4,
flexDirection:"row",
},
textStyle: {
flex:1,
fontWeight:"700",
textAlign:"left"
},
imageStyle:{
flex:1,
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center"
},
buttonStyle:{
flex:1,
margin:15,
width:120,
height:75,
overflow:"hidden",
borderRadius:15,
},
button1:{
flex:1,
backgroundColor:"red",
justifyContent:"center",
alignItems:"center"
},
button2:{
flex:1,
backgroundColor:"blue",
justifyContent:"center",
alignItems:"center"
},
button3:{
flex:1,
backgroundColor:"green",
justifyContent:"center",
alignItems:"center"
},
button4:{
flex:1,
backgroundColor:"purple",
justifyContent:"center",
alignItems:"center"
},
textFont:{
fontWeight:"bold",
color:"white"
},
contentImage:{
flex:1,
margin:30
},
contentImageView:{
width:150,
height:150,
borderRadius:15,
justifyContent:"center",
alignItems:"center" },
contentText:{
flex:2,
margin:30,
},
contentTitle:{
fontSize:20,
fontWeight:"bold"
},
contentContent:{
fontSize:15,
},
contentCalendar:{
fontSize:10
},
// contentView:{
// height:20
// }
});
--> 생각보다 어려워서 놀랐다.
앱을 만드는 기본 구조
import React from 'react'; import main from './assets/main.png'; import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
export default function App() { console.disableYellowBox = true; //return 구문 밖에서는 슬래시 두개 방식으로 주석 return () }
const styles = StyleSheet.create({})
1) 라이브러리 임포트
import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';2) 기본함수 골격
export default function App() {
console.disableYellowBox = true;
//return 구문 밖에서는 슬래시 두개 방식으로 주석
return ()
}
const styles = StyleSheet.create({})메인화면 만들기 --> 모범답안
import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
export default function App() {
console.disableYellowBox = true;
//return 구문 밖에서는 슬래시 두개 방식으로 주석
return (
/
return 구문 안에서는 {슬래시 + 방식으로 주석
*/
<ScrollView style={styles.container}>
<Text style={styles.title}>나만의 꿀팁</Text>
<Image style={styles.mainImage} source={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 */}
<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: {
//앱의 배경 색
backgroundColor: '#fff', },
title: {
//폰트 사이즈
fontSize: 20,
//폰트 두께
fontWeight: '700',
//위 공간으로 부터 이격
marginTop:50,
//왼쪽 공간으로 부터 이격'
marginLeft:20 },
mainImage: {
//컨텐츠의 넓이 값 --> 화면 전체의 90% 크기라는 뜻
width:'90%',
//컨텐츠의 높이 값
height:200,
//컨텐츠의 모서리 구부리기
borderRadius:10,
marginTop:20,
//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
//각 속성의 값들은 공식문서에 고대로~ 나와 있음 //화면이 flex로 나눠져 있지 않기 때문에 alignItems,justifyContent로 정렬 할 수 없음
// 따라서 스스로 정렬해주는 style인 alignSelf를 사용해줘야 함
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
},
middleButton04: {
width:100,
height:50,
padding:15,
backgroundColor:"#f886a8",
borderRadius:15,
margin:7
},
middleButtonText: {
color:"#fff",
fontWeight:"700",
//텍스트의 현재 위치에서의 정렬
textAlign:"center"
},
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",
}
});
