스파르타_2주차(View,Text,ScrollView,Button,Image,Styles,Flex)

화면을 구성하는 기본 문법들을 하나씩 정리해보기

 

 

View

 

페이지 안에 필요한 영역을 구현하는 포스트잇 같은 역할

<View>로 시작을 하면 문이 열리면서 장면 한개씩 생성되는걸로 이해된다

한 장면이 끝났다면 끝에는 항상 </View> 로 문을 닫아준다 

 

Text

 

글자를 입력하려면 <Text>로 시작한다

한 문장이 끝났다면 끝에는 마찬가지 </Text>로 끝낸다

 

ex) 연습해보기

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

 

화면 구성은 항상 꾸미기가 필요하기때문에

입력할땐 <View style={styles.container}> 라고 시작해준다

'이제 container라는 장면을 만들겠다' 정도의 의미

그리고 </View>로 닫기전에 필요한 기능들을 넣으면 된다

 

<View style={styles.container}>

     <Text> 하고픈말 블라블라~~ </Text>

</View>

이런식으로

 

---

ScrollView

 

고정된 한 화면만 표현할땐 View를 쓰면 되지만, 

화면이 길어서 스크롤바로 내려야하는 화면을 표현할때 쓴다

마찬가지 </ScrollView>로 닫는다

 

Button

 

말그대로 클릭했을 때, 다른 어떤 화면을 구현시킬 때 쓰는 버튼기능

★ 앱개발에 쓸때는 Button 보단 TouchableOpacity 를 주로 쓴다고 한다 

 

ex) 연습해보기

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

export default function App() {
  const customAlert = () => {
    Alert.alert("TouchableOpacity에도 onPress 속성이 있습니다")
  }
  return (
    <ScrollView style={styles.container}>

      <Button

           style={styles.buttonStyle}

           title="버튼입니다 "

           color="#FF0000"

           onPress={() => {customAlert()}}

       />
      <TouchableOpacity style={styles.textContainer} onPress={customAlert}>
        <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

ScrollView로 장면을 연 다음

Button 기능을 넣고

아래에는 버튼의 스타일 꾸미기, 버튼 글씨. 색깔. 클릭기능 삽입 등

혹은 TouchableOpacity 기능을 사용한다

앞으론 TouchableOpacity만 사용하기로.

 

※참고. <Button 기능을 마무리할 땐 /> 로 끝내고

<TouchableOpacity>은 끝에 </TouchableOpacity> 로 마무리

 

Image

 

화면에 이미지를 구현시킬 때 크게 두가지 방법이 있다

1. 개발폴더 안에 이미지를 저장하여 그 파일을 불러오기

 - import 를 사용하여 assets에 있는 이미지를 불러온다

 

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
      <Image 
        source={favicon}
        resizeMode={"repeat"}
        style={styles.imageStyle}
      />
    </View>
  );
}

 

상단 import 명령어를 통해 assets 폴더에 있는 favicon이란 이미지를 불러와놓고

 

View 장면안에 <Image source={favicon}/> 방식으로 favicon 이미지를 사용한다 

resizeMode나 style은 이미지를 꾸미는 명령어

<Image 태그 사용설명서>

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

Image · React Native

 

2. 외부 이미지 링크를 넣어 불러오기

 - uri 명령어를 통해 주소를 링크하여 이미지를 불러온다

 

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

export default function App() {
  return (
    <View style={styles.container}>
      <Image 
        source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
        resizeMode={"cover"}
        style={styles.imageStyle}
      />
    </View>
  );
}

<Image source={{uri : '링크할 주소'}} 방식으로 불러온다

 

---

styles

 

<View style={styles.~~~}>    </View> 를 통해 한 장면을 구현했다면

각 기능들을 꾸며주어야 하는데 그러기 위해선 먼저 꼭!

 

상단에서 import {StyleSheet, Text, View, ScrollView, TouchableOpacity} from 'react-native';

내가 사용할 기능들을 넣어주어야 꾸미기가 적용된다

 

꾸미기는 </View> 로 닫은다음

아래

const styles = StyleSheet.create({

로 시작하고

내가 사용한 장면들의 이름들을 불러와서 각기 꾸며주면된다

 

 

Flex

 

화면을 분등하는 역할

View로 여러장면을 열었다면 flex를 통해 장면들의 범위를 정해준다

 

1장면, 2장면 생성 시

1장면 = flex 1   2장면 = flex 2

라고 했다면 전체 3에서 1장면은 1/3, 2장면 2/3를 차지하게 된다

 

 

 

ex) 연습해보기

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

export default function App() {
  return (
   <View style={styles.container}>

       <View style={styles.containerOne}>

       <View style={styles.containerTwo}>

       <Text style={styles.textStyle}> 어우더워 </Text>

   </View>

   <View style={styles.Image}>

   </View>

라고 썼다면 아래에

 

const styles = StyleSheet.create({
   container: {
      flex:1
   },
   containerOne: {
      flex:1,
      backgroundColor:"red"
   },
   containerTwo:{
      flex:2,
      backgroundColor:"yellow"
   }

   textStyle: { 

      color:"red", 

      fontSize:20, 

      fontWeight:"700", 

      textAlign:"center"

   }
   });

 

 

글씨영역 설정하기 추가연습해보기

 

textContainer: {

 

margin:10,  → //영역의 바깥 공간 이격을 뜻한다

 

padding: 10,  → //영역 안의 컨텐츠 이격 공간을 뜻합니다

 

borderRadius:10,  → //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?

 

borderWidth:2,  → //테두리의 두께를 결정합니다

 

borderColor:"#000",  → //테두리 색을 결정합니다

 

borderStyle:"dotted",  → //테구리 스타일을 결정합니다. 실선은 solid 입니다

 

flex 확장기능 연습

 

 - flexDirection = 영역의 방향

 - justifyContent = flexDirection과 동일한 방향으로 정렬하는 속성

 

flexDirection: 'column'에서 justifyContent는 상하 정렬,

flexDirection: 'row'에서 justifyContent는 좌우 정렬을 뜻한다

flex-start, center, flex-end, space-between, space-around 속성을 가진다

 

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    flexDirection:"row",
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    justifyContent:"flex-start",
    backgroundColor:"orange"
  }
});

 

---

기본적인 기능들과 문법들을 익혀봤으니

다음엔 직접 메인화면 꾸며보는 실습을 해보자!