2주 차 숙제

앱 개발 종합반 2주 차 숙제하기!

숙제 화면

sparta-myhoneytip-hyuk폴더 안에 pages 폴더를 만들어주고 그 안에 MainPage.js와 AboutPage.js 파일을 만들어준다.

App.js 파일 코드 모두 복사한 후, MainPage.js에 붙여 넣기 한 다음 함수 이름을 MainPage로 바꿔주기!

그리고 MainPage.js의 코드 줄은 다음과 같이 변경!

import data from './data.json';

에서

import data from '../data.json';

App.js 코드는 다음 코드로 변경!

import React from 'react'
import MainPage from './pages/MainPage';

export default function App(){
  return (<MainPage/>)
}

AboutPage를 return에 담기!

import React from 'react'
import MainPage from './pages/MainPage';
import AboutPage from './pages/AboutPage';

export default function App(){
  // return (<MainPage/>)
  return (<AboutPage/>)
}

저장하고 나면, 에러 화면이 나온다.

왜냐면 현재, AboutPage에는 아무 코드가 없기 때문이고, 다음 코드를 AboutPage.js에 넣어 보자!

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

export default function AboutPage(){
  return (<View>
        <Text>어바웃페이지</Text>
      </View>)
}

어바웃페이지

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}>HI! 스파르타코딩 앱개발 반에 오신것을 환영합니다</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:"#1F266A",
        alignItems:"center"
      
    },
    title: {
        fontSize:30,
        fontWeight:"700",
        color:"#fff",
        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: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"
    }
})