2022.01.07

3주차 강의 시작하기 전에 복습 차원으로 상세페이지 화면 만드는 퀴즈를 받았다.

예시 이미지

내가 만든 것

문서 프로그램처럼 텍스트 양쪽 정렬하는 방법을 못 찾아서 그 부분만 남겨뒀다.

검색을 잘 못하나 봐....어제도 파이썬 문자열 자르는 방법을 스스로 못 찾아서 해설 강의 보고 배웠는데ㅠ.ㅠ

 

여하튼 코드는 붙여놓자.

import React from 'react'

import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native'

export default function DetailPage() {

    const tip = {

        "idx":9,

        "category":"재테크",

        "title":"렌탈 서비스 금액 비교해보기",

        "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",

        "desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",

        "date":"2020.09.09"

}

   

    return(<View style={styles.container}>

        <Image style={styles.detail_image} source={{uri:"https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png"}}/>

        <Text style={styles.title}>렌탈 서비스 금액 비교해보기</Text>

        <Text style={styles.desc}>요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다.</Text>

        <TouchableOpacity style={styles.button_container}>

            <Text style={styles.button_text}>팁 찜하기</Text>

        </TouchableOpacity>

    </View>)

}

const styles = StyleSheet.create({

    container: {

        flex: 1,

        backgroundColor: "#000",

        alignItems: 'center'

    },

    detail_image: {

        width: 360,

        height: 360,

        marginTop: 30,

        borderRadius: 20

    },

    title: {

        color: "#fff",

        fontSize: 20,

        fontWeight: '700',

        marginTop: 20,

        marginBottom: 10,

        textAlign: 'center'

    },

    desc: {

        color: '#fff',

        fontSize: 14,

        textAlign: 'center',

        paddingHorizontal: 20        

    },

    button_container: {

        borderColor: '#ff007f',

        borderWidth: 2,

        borderRadius: 10,

        width: 120,

        height: 50,

        marginTop: 20,

        alignItems: 'center',

        justifyContent: 'center'

    },

    button_text: {

        color: '#fff'

    }

})

tip의 딕셔너리 값을 복사할 필요 없이

{tip.image} {tip.title} 이렇게 입력하면 내용이 들어가는 거였다.

<Image style={styles.detail_image} source={{uri:tip.image}}/>

        <Text style={styles.title}>{tip.title}</Text>

        <Text style={styles.desc}>{tip.desc}</Text>

 

이렇게...

검색해보니 iOS는 단어 단위로 줄바꿈이 안 돼서 별도로 설정을 해줘야하는 모양이다.

나는 안드로이드여서 자동으로 된 듯.

반대로는 어떻게 설정하는 건지 모르겠다 하하.

 

기본적으로 View 태그, Text 태그들은 고유한 영역을 가지고 있으므로

영역을 나눠야할 때가 아니면 굳이 flex를 입력하지 않아도 된다.