앱화면 순서대로 작성하기

기본골격 작성하기

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.return쪽에 쓴다.
scrollview를 만든후에
옷을 입힌다
입힐때 맨위에 있는 애는 container로 한다

const style쪽에 쓴다
container:{}

2.이미지는 저장후 asset폴더안에 넣는다.

3.전체스크롤뷰안에 텍스트가 들어가야 하니 scrollview안에 text넣음
text /text 사이에 들어갈 글자 나만의 꿀팁 넣음
styles로 옷 입히기

const style쪽에 쓴다
앞에 썼던 내용 },로 닫고
새로운 title:{}로 연다
title의 폰트크기나 마진을 넣는다

4.이미지를 넣는다
return쪽에 image source={main}
styles로 옷 입히기

const style쪽에 쓴다
mainImage:{}

5. 버튼4개 좌우로 만들려면
return쪽에 scrollview만들기
<TouchableOpacity /TouchableOpacity> 쓰기
<text /text> 쓰기
이걸 4개 복사해서 버튼 만든다
버튼에 들어갈 글자를 <text /text> 안에 쓴다
styles로 옷 입히기

const style쪽에 쓴다
styles에서 정했던 이름으로 middlecontainer:쓴다

return쪽에 TouchableOpacity에 styles로 옷 입히기
4개 TouchableOpacity에 옷입힌거 똑같으니 복사하기
middlebutton에 번호 매기기

return쪽에 text에 styles로 옷 입히기
text는 똑같이 디자인적용되니 그대로 4개 복사

const style쪽에 쓴다
styles에서 정했던 이름으로 middlecontainer:쓴다
흰색이라 영역을 볼수 없으니 먼저 검정선으로 영역을 만들기위해
borderwidth:1로 정한후 나중에 삭제해준다.
marginTop과 marginLeft, height으로 영역정함

const style쪽에 쓴다
styles에서 정했던 이름으로 middleButton:쓴다
width와 height를 러프하게 쓴후 추후 세밀하게 크기 변경한다
pedding은 버튼안에 글자가 떨어지게 함
backgroundColor와 borderRadius를 정한다
영역에 너무 붙지않게 margin쓴다
middleButton만든걸 4개 복사해서 버튼숫자만 변경

const style쪽에 쓴다
styles에서 정했던 이름으로 middleButtonText:쓴다
color,fontWeight(폰트두께), textAlign을(폰트정렬) 쓴다

middleContainer의 border가장자리선 지운다,

return쪽에 쓴다
버튼 스크롤뷰가 좌우로 움직이게 공식문서에 horizontal을 찾아 쓴다. horizontal={true}

return쪽에 쓴다
카드리스트를 달기위해 쓴다
styles로 옷 입히기 cardContainer로 정함

return쪽에 쓴다
첫번째 카드영역을 만들기 위해 쓴다.
<Image soruce={{}}를 쓴후
{{}}안에 uri:" "로 주소 쓴다.
알아서 혼자닫는 태그니까 />로 닫아줌

카드 텍스트를 만듬
그안에 제목 내용 날짜 들어가니 그안에 를 또 만듬
styles로 옷 입히기. cardText 정함
styles로 옷 입히기. cardTitle, cardDesc, cardDate 정함
이미지도 styles로 옷 입히기. cardImage로 정함
안에 글자 넣기

const style쪽에 쓴다
앞쪽 }에 ,를 넣어 문장을 마친다.
styles에서 정했던 이름으로 cardContainer: 쓴다
borderWidth:1, //영역을 보기위해
marginTop,marginLeft를 써서 영역지정

const style쪽에 쓴다
앞쪽 }에 ,를 넣어 문장을 마친다.
styles에서 정했던 이름으로 card: 쓴다
flex사용:안의 텍스트와 이미지가 자기만의 영역을 가지고 있으니
flex:1,영역 하나를 다 잡아먹음
flexDirection:"row" 컨텐츠를 가로로 나열하기 위해
margin씀

const style쪽에 쓴다
cardImage와 cardText의 flex를 1:2으로 정함
그래서 cardImage: flex:1과
cardText:flex:2로 씀

이미지는 고유한영역을 가질때 보이게 됨(width와 height으로 영역을 지정하거나 flex로 영역을 할때)
cardImage:{
flex:1,
cardText:{
flex:2,
cardImage에서 이미지를 정사각형이니까 width와 height를 100으로정함
borderRadius로 둥글게

cardText는 flex2.
flexDirection:"column",//상하로 위치되게끔. 기본값이라 안써도 됨
marginLeft 사용

cardTitle:{},
cardDesc:{},
cardDate:{}, 을 쓴후

cardTitle의 fontsize,fontWeight(두껍게) 쓴다
cardDesc의 fontsize
cardDate의 fontsize

return쪽에 cardDesc쪽에 쓴다
numberofLines={3}말줄임표3줄까지만 보이게

최종상태

  
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없어도 가운데정렬
    //각 속성의 값들은 공식문서에 고대로~ 나와 있음
    alignSelf:"center"
  },
  middleContainer:{
    //borderWidth:1, //흰색바탕이라 영역을 알수 없으니 영역을 먼저 검정선 표시후 나중에 다 만들고 삭제예정
  	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: {
    //borderWidth:1, //영역을 보기위해 나중에 삭제예정
  	marginTop:10,
    marginLeft:10
  },
  card:{
    flex:1, //카드안에 이미지와 텍스트가 자기만의 고유영역 있으니 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",
  }


});
                        
                        
                        
                        ```