TIL_211118

react-native로 아래 화면 만들어보기(Expo활용)

App.js에 불러올 파일 입력

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

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

AboutPage.js 윗부분, react-native에서 태그들 불러오기({View,Text...등})

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>
    )
}

AboutPage.js 화면 꾸며주기

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,
    }
});

img에 resizeMode: 'cover'해도 되고
<Image>태그에 <Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/> 해도 같음.

<Text> 태그에 numberOfLines이란 속성. (말줌임표 효과 ...)
<Image> 태그엔 resizeMode란 속성. (이미지가 영역을 차지하는 방식, cover, repeat)