카테고리 없음

밤양갱 js(app)배움일지(3)

밤양갱단 2022. 8. 19. 21:42
import React from 'react'
import {View,Text,StyleSheet,Image, TouchableOpacity} from 'react-native'

export default function AboutPage(){
  return(
    <View style={styles.container}> //컨테이너 블럭
      <Text style={styles.title}>HI! 스파르타 코딩 앱개발반에 오신것을 환영합니다.</Text> /*타이틀 제목*/
      /*외부상자*/

      <View style={styles.textContainer}> //텍스트 컨테이너
        <Image style={styles.aboutImage} source={{uri:aboutImage}}resizeMode={"cover"}/>
        /*위에 const aboutImage에서 이미지불러옴*/
        <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,     /*flex-start, center, flex-end*/
        /*flex는 영역을 차지하는 속성*/
        backgroundColor:"#1F266A", /*배경색*/
        alignItems:"center" /*항목정렬 중앙*/
      },
      title:{
        fontSize:30,
        fontWeight:"700", /*폰트굵기*/
        color:"#fff",
        paddingLeft:30, /*여백*/
        paddingTop:100, /*여백*/
        paddingRight:30}, /*여백*/
        /*margin-> border-> padding-> content 여백 순서*/

      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:22,
        paddingRight:22},

      desc02:{
        textAlign:"center",
        fontSize:15,
        fontWeight:"700",
        padding:22},

      button:{
        backgroundColor:"orange",
        /*배경색 주황색, 직접적으로 색코드를 입력해도 되지만 색자체를
        입력함으로써 표준색 가능 */
        padding:20,
        borderRadius:15},

      buttonText:{
        color:"#fff",
        fontSize:15,
        fontWeight:"700"}
      })

숙제로 앱 메인화면을 만들어야 했는데 정말 막막했다 배운걸 되돌아보며 하나하나 해봤을때도 에러가 계속 떴고

결국 나는 답안을 보며 하나하나 이해하는것 부터 시작하자고 생각해서 코드 하나하나 검색과 수업영상을 보며 

다시 공부했다 코드를 보면 조금은 이해할수있는 정도 까지 된거같다!

아직 링크다는법은 모르겠지만 현재 진행형으로 공부중이다