[앱개발] 스파르타 코딩 클럽 2주차

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


export default function AboutPage(){
    const aboutImage = "https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png"
  return (
    <View style={styles.container}>
        <Text style={styles.title}>앱을 만들어 보았습니다. </Text>
       
        
        <View style={styles.textContainer}>
            <Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/>
            <Text style={styles.desc01}>해보니 신기하기도 어렵기도 하네요</Text>
            <Text style={styles.desc02}>제대로 만들 수 있게 되면 좋겠습니다. </Text>
            <TouchableOpacity style={styles.button}>
                <Text style={styles.buttonText}>링크는 어떻게 연결하는 거지요?</Text>
            </TouchableOpacity>
        </View>
    </View>)
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:"#ccc",
        alignItems:"center"
      
    },
    title: {
        fontSize:30,
        fontWeight:"700",
        color:"orange",
        paddingLeft:30,
        paddingTop:100,
        paddingRight:30
    },
    textContainer: {
        width:300,
        height:500,
        backgroundColor:"#fff",
        marginTop:50,
        borderRadius:30,
        justifyContent:"center",
        alignItems:"center"
    },
    aboutImage:{
        width:150,
        height:150,
        borderRadius:30
    },
    desc01: {
        textAlign:"center",
        fontSize:20,
        fontWeight:"700",
        paddingLeft:20,
        paddingRight:20,
        paddingTop:10
    },
    desc02: {
        textAlign:"center",
        fontSize:13,
        fontWeight:"700",
        padding:22
    },
    button:{
        backgroundColor:"red",
        padding:20,
        borderRadius:15
    },
    buttonText: {
        color:"#fff",
        fontSize:15,
        fontWeight:"700"
    }
})

리액트 네이트브로 구현한 앱 메인화면 ^^ 디자인에 좀 더 신경써야겠다.

 

스파르타 코딩클럽 앱개발 강의 2주차 늦은 숙제 제출...

 

감기 너란 놈은 정말 독한 것 같다. 식구들 전부 독한 감기로 콜록 콜록;;;

덕분에 숙제도 공부도 늦어버린;;;

 

리액트 JS를 아주 조금 공부했던 덕택인지 이해가 잘되었다. 

개인적으로는 styledcomponent를 사용하는 것보다 이렇게 고전적으로 사용하는 것이 더 쉬운듯 ^^;;

 

내게 맡는 방법을 사용하면서도, 멋진 개발을 할 때까지 

남은주차도 열심히 해야겠다!

 

(참. 하다 안되는 것이 있어 즉문즉답에 글을 남겼는데 1분만에 진짜 답글 달리는 것보고 정말 깜짝 놀랐음 ㅎㅎ )