TIL_211118

Expoを使用して「react-ネイティブを使用」画面を作成する

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

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

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.box}>
            <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"}}></Image>
            <Text style={styles.desc}>많은 내용을 간결하게 담아내려 노력했습니다!</Text>
            <Text style={styles.desc1}>꼭 완주하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
            <TouchableOpacity style={styles.middleButton}><Text style={styles.middleButtonText}>여러분의 인스타계정</Text></TouchableOpacity>
         </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      //앱의 배경 색
      backgroundColor: '#1a1286',
      flex: 1,
      alignItems:'center',
    },
    title: {
        fontSize: 30,
        fontWeight: '700',
        color: '#ffffff',
        marginTop: 70,
        marginLeft: 40,
        marginRight: 60,
      },
    box: {
        backgroundColor: '#ffffff',
        width: 300,
        height: 450,
        marginTop: 40,
        marginRight: 30,
        marginLeft: 40,
        borderRadius: 20,
    },
    img: {
        width: 150,
        height: 150,
        resizeMode: "cover",
        marginTop: 50,
        marginLeft: 80,
        marginRight: 50,
        marginBottom: 10,
        borderRadius: 20,
    },
    desc: {
        fontSize: 20,
        fontWeight: '700',
        margin: 5,
        textAlign: 'center',
    },
    desc1: {
        fontSize: 17,
        fontWeight: "600",
        margin: 20,
        textAlign: 'center',
    },
    middleButton: {
        backgroundColor: '#f2ba58',
        width: 170,
        height: 60,
        borderRadius: 20,
        marginTop: 10,
        marginLeft: 70,
    },
    middleButtonText: {
        color: '#ffffff',
        fontWeight: '700',
        fontSize: 17,
        margin: 17,
    }
});