[리액트 네이티브를 다루는 기술 #3] 3장 할일 목록 만들기1 (p.109 ~ 132)

@ List

* 3.1 프로젝트 기반 다지기
** 3.1.1 프로젝트 생성하기
** 3.1.2 오늘 날짜를 알려주는 DateHead 컴포넌트 만들기
** 3.1.3 StatusBar 색상 바꾸기
** 3.1.4 레이아웃 준비하기

 

@ Result

ios / android

 

# App.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import DateHead from "./components/DateHead";

// for IOS StatusBar
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

import AddTodo from "./components/AddTodo";
import Empty from "./components/Empty";

function App() {
  const today = new Date();
  return (
    <SafeAreaProvider>
      <SafeAreaView edges={["bottom"]} style={styles.block}>
        <DateHead date={today} />
        <Empty />
        <AddTodo />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  block: { flex: 1 },
});

export default App;

# components > DataHead.js

import React from "react";
import { View, Text, StyleSheet, StatusBar } from "react-native";

// for IOS StatusBar
import { useSafeAreaInsets } from "react-native-safe-area-context";

function DateHead() {
  const d = new Date();
  const year = d.getFullYear();
  const month = d.getMonth() + 1; // getMonth 범위 : 0 ~ 11 까지
  const day = d.getDate();

  const formatted = `${year}년 ${month}월 ${day}일`;
  const { top } = useSafeAreaInsets();

  return (
    <>
      <View style={[styles.statusBarPlaceholder, { height: top }]} />
      <StatusBar backgroundColor="#26a69a" barStyle="light-content" />
      <View style={styles.block}>
        {/* <Text style={styles.dateText}>{formatted}</Text> */}
        <Text style={styles.dateText}>
          {year}년 {month}월 {day}일
        </Text>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  statusBarPlaceholder: {
    backgroundColor: "#26a69a",
  },
  block: {
    padding: 16,
    backgroundColor: "#26a69a",
  },
  dateText: {
    fontSize: 24,
    color: "white",
  },
});

export default DateHead;

# components > AddTodo.js

import React from "react";
import { View, StyleSheet } from "react-native";

function AddTodo() {
  return <View style={styles.block} />;
}

const styles = StyleSheet.create({
  block: {
    height: 64,
    backgroundColor: "red",
  },
});

export default AddTodo;

# components > Empty.js

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

function Empty() {
  return (
    <View style={styles.block}>
      <Text style={styles.description}>할일이 없습니다.</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  block: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  description: {
    fontSize: 24,
    color: "#9e9e9e",
  },
});
export default Empty;