//어제에 이어서 일단 만들어보자. 정답을 보기전에 일단 혼자 해보자
일어나서 다시 생각해보니 처음에 기본적으로 틀을 나눌때 원래 있는거에다 가져다 쓰다보니 깔끔하지 못한거 같다
전체를 위에서부터 8분할로 해서 4등분으로 1:2:1:4비율로 그냥 짜버렸으면 깔끔했을거 같은데
근데 다시 일일이 수정하기엔 너무 귀찮으니 일단 되어있는거에서 flex를 나눠줬다. 문제없을듯
총 4분할이니까 innerThree 하나만들어주고
const styles = StyleSheet.create({
container: {
flex:1
},
containerOne: {
flex:1,
backgroundColor:"#fff",
justifyContent:"flex-end",
padding: 10
},
containerTwo:{
flex:7,
backgroundColor:"yellow"
},
innerOne: {
flex:2,
backgroundColor:"#fff"
},
innerTwo: {
flex:1,
backgroundColor:"orange"
},
innerThree: {
flex:4,
backgroundColor:"red"
},
imageStyle: {
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center",
borderRadius:20
},
textStyle: {
fontSize: 30,
fontWeight: "bold"
}
----------------------------------------------
이렇게 만들고 이제 innerTwo에 가로버튼을 만들면 되겠지
버튼 만드는거 배웠었으니까 한번 넣어보자
<Button
style={styles.buttonStyle1}
title="버튼입니다 "
color="#f194ff"
onPress={function(){
Alert.alert('팝업 알람입니다!!')
}}
/>
<Button
style={styles.buttonStyle2}
title="버튼입니다2 "
color="#FF0000"
onPress={()=>{
Alert.alert('팝업 알람입니다!!')
}}
-------------------------------------------------
맨위에 import에 Button 넣는거 빼먹지 말자
-----------------------------------------
만들어진걸보니 뭔가 잘못되가는게 느껴진다. 내가 원한게 이게 아닌데
innerTwo에 방향을 row로 둬야할거같다
innerTwo: {
flex:1,
flexDirection:"row",
backgroundColor:"orange"
},
------------------------------
그리고 버튼을 누르면 팝업이 떠야하는데 바로 에러 뜨는걸보니 뭔가 잘못됬다
아 맨위에 import에 Alert넣는걸 빼먹었다
--------------------------------------------------
하 이제 뭐해야하지.. 버튼 모양도 바꿔야하고 색깔도 바꿔야한다
아 버튼 색깔부터 바꿔보자.
이런형식 color="#ffffff" 이 형태 되게 익숙하다. 예전에 포토샵할때 본거같기도한데 포토샵은 무거워서 켜지는데 오래걸리니까 그림판으로 따볼까?
돋보기로 해당 색깔을 추출해봤으나 편집에 어떠한 알파벳을 발견할 수가 없었다 실망..분명 어디서 본거같은데
기본 그림판에 왜 안나오지?
------------------------------------
오 윈도우에 깔려있는 그림판3D로 추출해보니 육각형이라는곳에 알파벳이 보인다 이걸 쓰면 될거같다
역시 3D인가? 좀더 쓸만하구만
------------------------------------------
색깔은 해결했는데 버튼 모양을 어떻게 바꾸지?
버튼 모양 바꾸는건 안배운거같은데 imageStyle 했던것처럼 buttonStyle 만들어서 넣으면 되려나?
그리고 버튼 크기는 어떻게 바꾸는거지
이것저것 해봤으나 궁금증만 몇개 해결되고 강아지같이 멸망
일단 버튼 크기는 안에 들어가는 글자 크기에 따라서 줄었다 늘었다 하는거 같다
재태크에 글씨를 늘리니까 버튼도 따라 커진다
버튼스타일 이라는걸 만들어서 이것저것 집어넣어봤자 아무런 효과를 볼수가 없었다.
buttonStyle: {
width:30,
height:30,
alignItems: "center",
padding: 10,
borderRadius:20
}
--> 실패
---------------------------------
점점 이상한걸 만들고 있는거 같은 기분이 든다.
이쯤하고 정답보러 강의나 들어야겠다 ㅋㅋ
----------------------------------------------------
실패한 코드는 흔적으로 남겨둬야겠다
나중에 코딩 잘하게됬을때 보면 실력이 향상된걸 느끼게 되길 바라면서
--------------------------------------------------------
import React from 'react';
import { StyleSheet, Text, View, Image, StatusBar, Button, Alert } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.containerOne}>
<StatusBar />
<Text style={styles.textStyle}>나만의 꿀팁</Text>
</View>
<View style={styles.containerTwo}>
<View style={styles.innerOne}>
<Image
resizeMode={"cover"}
style={styles.imageStyle}
/>
</View>
<View style={styles.innerTwo}>
<Button
style={styles.buttonStyle}
title=" 미용 "
color="#f6cc71"
onPress={function(){
Alert.alert('팝업 알람입니다!!')
}}
/>
<Button
style={styles.buttonStyle}
title="재테크111111"
color="#f19c84"
onPress={()=>{
Alert.alert('팝업 알람입니다!!')
}}
/>
<Button
style={styles.buttonStyle}
title=" 할인 "
color="#b2dfd0"
onPress={()=>{
Alert.alert('팝업 알람입니다!!')
}}
/>
</View>
<View style={styles.innerThree}>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1
},
containerOne: {
flex:1,
backgroundColor:"#fff",
justifyContent:"flex-end",
padding: 10
},
containerTwo:{
flex:7,
backgroundColor:"yellow"
},
innerOne: {
flex:2,
backgroundColor:"#fff"
},
innerTwo: {
flex:1,
flexDirection:"row",
backgroundColor:"orange"
},
innerThree: {
flex:4,
backgroundColor:"red"
},
imageStyle: {
width:"100%",
height:"100%",
alignItems:"center",
justifyContent:"center",
borderRadius:20
},
textStyle: {
fontSize: 30,
fontWeight: "bold"
},
buttonStyle: {
width:30,
height:30,
alignItems: "center",
padding: 10,
borderRadius:20
}
});
---------------------------------
