App 기본_spartacoding 5 (페이지 초기화면 디자인)

react를 사용하여 간단하게 앱 페이지 디자인을 해보았다.

코딩을 진행하면서 중간중간 점검은 expo를 통하여 핸드폰으로 직접 눈으로 확인해가며 디자인했다.

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


export default function AboutPage(){
    const aboutImage = "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4"
    return(
        <View style={styles.container}>
            <Text style={styles.title}>
                HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다
            </Text>

            <View style={styles.center}>
                <Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/>
                <Text style={styles.centerText}>
                    많은 내용을 간결하게 담아내려 노력했습니다!
                </Text>
                <Text style={styles.centerTextSub}>
                    꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다.
                </Text>
                <TouchableOpacity style={styles.btn}>
                    <Text style={styles.btnText}>
                        _kukjin_h
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#1F266A',
        alignItems:'center'
    },
    title: {
        color : '#fff',
        fontSize: 40,
        fontWeight: '200',
        marginTop: 50,
        marginLeft: 40,
        marginRight: 30
        
    },
    center:{
        backgroundColor: '#fff',
        width : 300,
        height: 500,
        marginTop:30,
        borderRadius:20,
        justifyContent:'center',
        alignItems:'center' //내용물 가운데 정렬
    },
    aboutImage:{
        
        width:150,
        height:150,
        borderRadius:30
    },
    centerText:{
        fontSize: 30,
        fontWeight:'300',
        textAlign:'center'
    },
    centerTextSub:{
        fontSize: 20,
        fontWeight:'300',
        textAlign:'center'
    },
    btn:{
        backgroundColor:'orange',
        padding:20,
        marginTop:30,
        borderRadius:20
    },
    btnText:{
        fontSize:20,
        fontWeight:'300'
    }
})

몰랐던 코드는 flex, justifyContent, alignItems

flex : 화면의 비중을 차지하게 하는 역할이고,

justifyContent : 수평의 정렬을 의미한다. 속성은 alignItems와 flex-start, center, flex-end의 속성은 동일하지만 space-between, space-around라는 속성을 따로 가지고 있다.

alignItems : 수직의 정렬을 의미하며 속성은 5가지로 flex-start, center, flex-end, stretch, baseline가 있다.

expo를 통해 확인한 어플 화면 결과