JSX를 직접 다룬것은 처음이지만, HTML CSS JS 기초지식이 있기 때문에 이해하고 제안된 디자인을 구현하는 것은 어렵지 않았다.
더보기
import React from 'react';
import main from '../assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
import data from '../data.json';
export default function MainPage() {
console.disableYellowBox = true;
//return 구문 밖에서는 슬래시 두개 방식으로 주석
let tip = data.tip;
let todayWeather = 10 + 17;
let todayCondition = "흐림"
return (
/*
return 구문 안에서는 {슬래시 + * 방식으로 주석
*/
<ScrollView style={styles.container}>
<Text style={styles.title}>나만의 꿀팁</Text>
<Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </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 */}
{
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",
},
});
일전에 공부하였던 map을 jsx에서 사용해서 card-gui방식으로 리스팅되게 구현하여 보았다. flex디자인이 엄청 유용함을 알 수 있다.
AboutPage는 구글링하여 디자인 image만을 보고 완성하여보았다.
더보기
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
export default function AboutPage() {
//return 구문 밖에서는 슬래시 두개 방식으로 주석
return (
/*
return 구문 안에서는 {슬래시 + * 방식으로 주석
*/
<View style={styles.container}>
<Text style={styles.title} numberOfLines={2}>Hi! 스파르타코딩 앱개발 반에 오신것을 환영합니다.</Text>
<View style={styles.cardContainer}>
<Image
style={styles.cardImage}
source={{
}}
/>
<Text style={styles.cardTitle} numberOfLines={2}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
<Text style={styles.cardText} numberOfLines={2}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
<TouchableOpacity style={styles.cardBttn}><Text style={styles.cardAccount} numberOfLines={2}>emptyinteger@instagram</Text></TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
//앱의 배경 색
backgroundColor: 'blue',
flex:1
},
title: {
//폰트 사이즈
fontSize: 30,
color: "#fff",
//폰트 두께
fontWeight: '700',
//위 공간으로 부터 이격
marginTop:50,
//왼쪽 공간으로 부터 이격
marginLeft:30,
marginRight:10,
marginBottom:10
},
mainImage: {
},
cardContainer: {
marginTop:30,
marginLeft:30,
backgroundColor:"white",
flex:1,
borderColor:"black",
justifyContent:"center",
borderWidth: 1,
marginRight: 28,
marginBottom: 38,
borderRadius: 15,
padding:30
},
card:{
flex:1,
//컨텐츠들을 가로로 나열
//세로로 나열은 column <- 디폴트 값임
flexDirection:"row",
margin:10,
borderBottomWidth:0.5,
borderBottomColor:"#eee",
paddingBottom:10
},
cardImage: {
//컨텐츠의 넓이 값
//컨텐츠의 높이 값
resizeMode:"contain",
width:150,
height:125,
//컨텐츠의 모서리 구부리기
alignSelf:'center',
//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
//각 속성의 값들은 공식문서에 고대로~ 나와 있음
borderRadius:15,
},
cardText: {
fontSize:12.5,
marginLeft:30,
marginRight:30,
marginBottom:10,
textAlign: 'center'
},
cardTitle: {
//폰트 사이즈
fontSize: 18,
color: "#000",
//폰트 두께
fontWeight: '700',
//위 공간으로 부터 이격
marginTop:10,
//왼쪽 공간으로 부터 이격
marginLeft:30,
marginRight:30,
marginBottom:10,
textAlign: 'center'
},
cardAccount: {
backgroundColor:"orange",
borderRadius: 30,
padding:20,
width:'70%',
fontSize:15,
alignSelf: 'center',
textAlign: 'center',
},
cardBttn: {
backgroundColor:"orange",
borderRadius: 15,
width:200,
alignSelf:'center'
},
});
]
아직은 정말 간단하게 GUI만을 구현하여 보았는데, 앞으로 API들을 이용할것이 기대된다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
| Ajax 활용하기 (0) | 2022.03.30 |
|---|---|
| JavaScript의 문법에 익숙해지기 (1) -map함수와 => 표현식 (0) | 2022.03.23 |