메인화면 구축
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, ScrollView, Image, TouchableOpacity } from 'react-native';
react 도구상자 사용
ScrollView : 메인화면 위아래 스크롤 기능
horizontal={true} 추가시 왼쪽 오른쪽 스크롤기능 기본값은 true
TouchableOpacity : 버튼 구현
const pizza : const + 변수 이미지url
주석처리 확인
export default function App() {
return (
<ScrollView style={styles.container}>
<Text style={styles.textStyle}>나만의 꿀팁</Text>
{/*이미지값은 밑에 width와 height를 넣어줘야지 화면에 나타남*/}
<Image style={styles.mainImage} source={{uri:main}}/>
<ScrollView style={styles.mybutton} horizontal={true}>
{/*horizontal 기본값이 true 옆으로 스크롤 기능*/}
<TouchableOpacity style={styles.button01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
<TouchableOpacity style={styles.button02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
<TouchableOpacity style={styles.button03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
<TouchableOpacity style={styles.button04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
</ScrollView>
{/*보통 이미지 텍스트 같이 있는 뭉터기를 card라고 함 */}
<View style={styles.pizzaContainer}>
<View style={styles.pizzacard}>
<Image style={styles.pizzaimage} source={{uri:pizza}}/>
<View style={styles.cardText}>
<Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!</Text>
<Text style={styles.cardDesc} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
{/* numberOfLines={3} 세줄만 표현하고 싶다 나머지는 ... */}
<Text style={styles.cardDate}>2020.09.09</Text>
</View>
{/*전체적으로 감싸는 테그는 무조건 View 사용 */}
</View>
</View>
<StatusBar style="light" />
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
},
textStyle: {
fontSize : 20,
fontWeight : "700",
marginTop : 50,
marginLeft: 20,
},
mainImage: {
width:'90%',
height:200,
borderRadius:10,
marginTop:20,
marginBottom:20,
alignSelf:"center"
},
mybutton: {
margintop:20,
marginLeft:10,
height:60,
},
button01: {
width:100,
height:50,
padding:15,
backgroundColor:"#ffd700",
borderColor:"#fff",
borderRadius:15,
margin:7,
},
button02: {
width:100,
height:50,
padding:15,
backgroundColor:"#FFA07A",
borderColor:"#fff",
borderRadius:15,
margin:7
},
button03: {
width:100,
height:50,
padding:15,
backgroundColor:"#B0E0E6",
borderColor:"#fff",
borderRadius:15,
margin:7
},
button04: {
width:100,
height:50,
padding:15,
backgroundColor:"#FF69B4",
borderColor:"#fff",
borderRadius:15,
margin:7
},
middleButtonText: {
color:"#fff",
alignSelf:"center",//text 가운데정렬
fontWeight: "700",
},
pizzaContainer: {
marginTop:10,
marginLeft:10
},
pizzacard:{
flex:1,
//컨텐츠들을 가로로 나열 row
//세로로 나열은 column <- 디폴트 값임
flexDirection:"row",
margin:10,
borderBottomWidth:0.5,
borderBottomColor:"#eee", //박스 밑에만 줄긋기
paddingBottom:10
},
pizzaimage: {
flex:1, //flex 1/3
width:100, //100, 100 정사각형
height:100,
borderRadius:10,
},
cardText: {
flex:2, //flex 2/3
flexDirection:"column", // 세로로 구현해야되니 column
marginLeft:10,
},
cardTitle: {
fontSize:20,
fontWeight:"700"
},
cardDesc: {
fontSize:15
},
cardDate: {
fontSize:10,
color:"#A6A6A6",
}
});
import React from 'react';
import MainPage from './pages/MainPage';
import AboutPage from './pages/AboutPage';
export default function App() {
//return (<MainPage/>)
return (<AboutPage/>)
}
App.js파일에 이렇게 넣어주면
Mainpage는 주석처리 되고
AboutPage 파일 불러 올수있음
반대로 AboutPage 주석처리하고
Mainpage 주석처리 해제시 Mainpage파일 불러 올수있음
2주차 숙제
AboutPage.js에 똑같이 만들기
import React from 'react'
import {SafeAreaView,View,Text,StyleSheet,Image,TouchableOpacity} from 'react-native'
export default function AboutPage(){
return (
<SafeAreaView style={styles.container}>
<View style={styles.itemcontainer}>
<Text style={styles.title}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</Text>
</View>
<View style={styles.item1}>
<Image style={styles.mainImage} source={{uri:about}}/>
<Text style={styles.card1}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
<Text style={styles.card2}>꼭 완주하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
<TouchableOpacity style={styles.middleButton04}><Text style={styles.ButtonText}>여러분의 인스타계정</Text></TouchableOpacity>
</View>
</SafeAreaView>)
}
const styles = StyleSheet.create({
container: {
//앱의 배경 색
flex : 1,
backgroundColor: '#00008b',
},
itemcontainer:
{
justifyContent:'center',
},
title: {
//폰트 사이즈
fontSize: 31,
//폰트 두께
fontWeight: '500',
//위 공간으로 부터 이격
marginTop:70,
//왼쪽 공간으로 부터 이격
color : '#fff',
textAlign: 'left',
alignSelf: 'center'
},
item1: {
backgroundColor:'#fff',
width:250,
height:440,
alignContent:'center',
margin:50,
marginTop:70,
borderRadius:20,
alignItems:'center'
},
mainImage: {
width:130,
height:130,
alignSelf:'center',
marginTop:60,
borderRadius:20,
},
card1 : {
fontSize:17,
textAlign:'center',
fontWeight: '700',
},
card2 : {
fontSize:12,
textAlign:'center',
marginTop:20,
fontWeight: '600',
},
middleButton04:{
width:160,
height:50,
padding:15,
backgroundColor:"#fdc453",
borderColor:"deeppink",
borderRadius:15,
marginTop : 20,
},
ButtonText : {
color : '#fff',
textAlign: 'center',
alignSelf: 'center'
}
})
'앱 개발' 카테고리의 다른 글
| 2022-08-15~2022-08-21 SpartaCoding Club 앱개발 종합반 1주차 (0) | 2022.08.23 |
|---|