앱개발 종합반 2주차 내용 [스파르타 코딩] <JavaScript, ReactNative, EXPO>

https://teamsparta.notion.site/2-3e404a42faef4977bede8252891d2ead#d112045731504bf5897b27576a85d94e

[내일배움단] 앱개발 종합반 - 2주차

 

<유용한 공식 문서>

https://reactnative.dev/docs/style#docsNav

Style · React Native

https://reactnative.dev/docs/layout-props

Layout Props · React Native

 

 

<앱 만들 때 가져다 쓸 코드>

import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

export default function App() {
  console.disableYellowBox = true;
  return ()

}

const styles = StyleSheet.create({})

 

<HW>

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

export default function AboutPage() {
    console.disableYellowBox=true;

    return (
        <View style={styles.container}>
            <View style={styles.titleBox}>
            <Text style={styles.title}>HI! 스파르타코딩 앱개발반에 오신것을 환영합니다</Text>
            </View>
            <View style={styles.contentBox}>
                <Image style={styles.contentBoxImage} 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.contentText01}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
                <Text style={styles.contentText02}>꼭 완주하셔서 꼭 여러분 것으로 만들어가시길 바랍니다.</Text>
                <TouchableOpacity style={styles.contentButton}>
                    <Text style={styles.contentButtonText}>여러분의 인스타계정</Text>
                </TouchableOpacity>

            </View>
        
        

        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#252C74',
        flex:1,
        alignItems:"center"
    },
    title: {
        fontSize:30,
        fontWeight:'700',
        marginTop:50,
        marginLeft:20,
        color:"#fff"
    },
    titleBox: {
        height: 200,
        width: 330,
        alignSelf:"center",
        marginTop:50
    },
    contentBox:{
        height: 500,
        width: 330,
        backgroundColor: "#FFFFFF",
        bordercolor:"#000",
        alignItems:"center",
        borderRadius:30
    },
    contentBoxImage:{
        marginTop:60,
        height:200,
        width:200,
        alignItems:"center"
    },
    contentText01:{
        margin: 10,
        fontSize:20,
        fontWeight:"700",
        width:250,
        textAlign:"center"
    },
    contentText02:{
        margin: 10,
        fontSize: 15,
        fontWeight:"700",
        width:280,
        textAlign:"center"

    },
    contentButton:{
        margin:10,
        width:150,
        height:50,
        backgroundColor:"#F3B13D",
        borderRadius:15,
        
    },
    contentButtonText:{
        fontSize:15,
        fontWeight:"700",
        color:"#FFFFFF",
        textAlign:"center",
        padding:15
    }
})

숙제 결과물