스파르타코딩클럽 2주차_[숙제]

<어바웃페이지 만들기>

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

export default function AboutPage() { //함수 이름은 파일 이름과 같게!
    return (
        <View style={styles.container}>
            <View style={styles.text_box}>
                <Text style={styles.main_text}>HI! 스파르타코딩 앱개발{"\n"}반에 오신것을 환영합니다</Text> 
            </View> 

            <View style={styles.content_box}>
                <Image style={styles.main_image}
                    source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/sparta-image.
                            appspot.com/o/lecture%2FaboutImage.png?alt
                            =media&token=13e1c4f6-b802-4975-9773-e305fc7475c4' }}
                />
                <View style={styles.inner_box}>
                    <Text style={styles.inner_text1}>많은 내용을 간결하게 담아내려{"\n"}노력했습니다!</Text>
                    <Text style={styles.inner_text2}>꼭 완주하셔셔 꼭 여러분것으로 만들어가시{"\n"}길 바랍니다</Text>
                </View> 
                <TouchableOpacity style={styles.social_button}>
                    <Text style={styles.button_text}>여러분의 인스타계정</Text>
                </TouchableOpacity> 
            </View> 
        </View> // {"\n"} 사용해서 줄바꿈

    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#15106b',
        flex: 1,
    },
    text_box: {
        flex: 1,
        marginTop: 70,
        alignItems:"center",
    },
    main_text: {
        flex: 1,
        color: '#ffffff',
        fontSize:25,
    },
    content_box: {
        backgroundColor:'#ffffff',
        marginLeft:30,
        marginRight:30,
        marginBottom:80,
        borderRadius:25,
        flex: 5,
        alignItems:"center"
    },
    main_image: {
        alignItems:"center",
        borderRadius:35,
        width:"45%",
        height:"30%",
        marginTop:80,
    },
    inner_box: {
        margin:0,
        alignItems:"center",
        justifyContent:"center",
    },
    inner_text1: {
        textAlign:"center", //텍스트 가운데 정렬에 유용!
        fontSize:20,
        fontWeight:"700",
    },
    inner_text2: {
        fontSize:16,
        marginTop:25,
        textAlign:"center",
        fontWeight:"700",
    },
    social_button: {
        fontSize:16,
        backgroundColor:"#edba00",
        paddingTop:20,
        paddingBottom:20,
        paddingLeft:20,
        paddingRight:20,
        marginTop:30,
        borderRadius:15,
    },
    button_text: {
        color:'#ffffff',
    }
})