앱개발 2주차 과제

어바웃 화면 만들기

 

기존에 만들었던 나만의 꿀팁 페이지는 MainPage.js 로 따로 빼서 Pages 폴더에 각 페이지들을 분리해서 렌더링할 수 있도록 준비한다. 그러면 App.js 에서 렌더링 하고자 하는 페이지를 pages 에서 골라서 import 해와서 렌더링 할 수 있다.

 

구현

import React from "react";
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    SafeAreaView,
} from "react-native";

export default function AboutPage() {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.title}>
                HI! 스파르타코딩 앱개발 반에 오신 것을 환영합니다
            </Text>
            <View style={styles.card}>
                <Image
                    style={styles.img}
                    source={{
                        uri: "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2FaboutImage.png?alt=media&token=13e1c4f6-b802-4975-9773-e305fc7475c4",
                    }}
                />
                <Text style={styles.desc1}>
                    많은 내용을 간결하게 담아내려 노력했습니다!
                </Text>
                <Text style={styles.desc2}>
                    꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다
                </Text>
                <TouchableOpacity style={styles.button}>
                    <Text style={styles.textStyle}>여러분의 인스타계정</Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "rgb(38, 44, 116)",
    },
    title: {
        color: "#fff",
        fontSize: 37,
        fontWeight: "bold",
        margin: 50,
    },
    card: {
        alignSelf: "center",
        width: "80%",
        backgroundColor: "#fff",
        borderRadius: 20,
        justifyContent: "center",
        alignItems: "center",
        paddingVertical: 100,
        paddingHorizontal: 30,
    },
    img: {
        width: 150,
        height: 150,
        borderRadius: 20,
        marginBottom: 10,
    },
    desc1: {
        fontSize: 25,
        fontWeight: "bold",
        textAlign: "center",
        marginBottom: 20,
    },
    desc2: {
        fontSize: 19,
        fontWeight: "bold",
        textAlign: "center",
        marginBottom: 20,
    },
    button: {
        width: 170,
        height: 60,
        backgroundColor: "rgb(243, 177, 62)",
        borderRadius: 8,
        justifyContent: "center",
        alignItems: "center",
    },
    textStyle: {
        color: "#fff",
    },
});