React Native) Component 활용하기 - 1

이제부터는 이것저것 써보면서 익혀나가는 방식으로 학습할 예정

 

 

---

 

날짜 추출 - Date 활용하기

날짜 추출 함수 : Date()
※ 자바스크립트 함수임

[예시]

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const day = today.getDate();

[주의할 점]
month는 0~11까지 범위값이 리턴되어 + 1해서 써야함

---

 

템플릿 리터럴

`(백틱 문자)로 문장을 감싸면 아래와 같이 string을 구성할 수 있음

const formatted = `${year}년 ${month}월 ${day}일`;

위 코드는 아래 코드와 동일함

const formatted = year + '년 ' + month + '월 ' + day + '일';

---

 

StatusBar 색상 바꾸기

[Android 버전]

import React from 'react';
import { StatusBar } from 'react-native';

function DateHead() {
  return (
  	<StatusBar backgroundColor="#26a69a" />
  );
}

StatusBar 컴포넌트를 import 해서 backgroundColor를 지정해주기만 하면 됨

[iOS 버전]
먼저 필요한 서드 파티 라이브러리 설치

yarn add react-native-safe-area-context

cd ios
pod install

[구현 소스 예제]
- App.js

import React from 'react';
import {View} from 'react-native';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';

functioin App() {
	return (
        <SafeAreaProvider>
            <SafeAreaView edges={['bottom']}>
            (...)
            </SafeAreaView>
        </SafeAreaProvider>
    );
}

export default App;

※ 주의점 : SafeAreaProvider 안에 SafeAreaView 내부에 위치해야 함
(다른 화면에서는 SafeAreaView 컴포넌트 하나만 쓰면 됨)

- 다른 컴포넌트.js

(...)
import {useSafeAreaInsets} from 'react-native-safe-area-context';

function DateHead() {
	const {top} = useSafeAreaInsets();
    
    return (
    	<View style={height: top} />
        <StatusBar backgroundColor="#26a69a" barStyle="light-content" />
        (...)

※ useSafeAreaInsets() Hook을 사용해서 top, bottom, left, right 여백을 받아올 수 있음
이를 활용해서 상단 공백 영역을 View로 확보하고 아래 영역부터 사용하면 됨
※ barStyle을 활용해 StatusBar 내 텍스트 색상을 지정함
: dark-content(어두운 내용), light-content(밝은 내용), default(시스템 기본 설정)

StatusBar 이미지