[리액트] TodoList UI만 따라하기!!!

 

 

import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  Text,
  View,
  Button,
  TextInput,
  SafeAreaView,
  ScrollView,
} from "react-native";
import styled from "styled-components";
import { AntDesign } from "@expo/vector-icons";
import { FontAwesome } from "@expo/vector-icons";
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="auto" />
      <View
        style={{
          margin: 10,
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        <TobButton style={{ backgroundColor: "lightblue" }}>
          <Text>JavaScript</Text>
        </TobButton>
        <TobButton>
          <Text>React</Text>
        </TobButton>
        <TobButton>
          <Text>Coding Test</Text>
        </TobButton>
      </View>

      <View style={Hr.View} />

      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <InputText placeholder="Enter your task" />
      </View>
      <View style={Hr.View} />

      <ScrollView>
        <TodoBox>
          <View style={{ flexDirection: "row" }}>
            <Text>신나는 실행컨텍스트 공부</Text>
            <View
              style={{
                flex: "1",
                alignItems: "flex-end",
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-around",
                  width: 90,
                }}
              >
                <AntDesign name="checksquare" size={24} color="black" />
                <FontAwesome name="pencil-square-o" size={24} color="black" />
                <FontAwesome name="trash-o" size={24} color="black" />
              </View>
            </View>
          </View>
        </TodoBox>
        <TodoBox>
          <View style={{ flexDirection: "row" }}>
            <Text>너무 좋은 ES6 최신문법 공부</Text>
            <View
              style={{
                flex: "1",
                alignItems: "flex-end",
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-around",
                  width: 90,
                }}
              >
                <AntDesign name="checksquare" size={24} color="black" />
                <FontAwesome name="pencil-square-o" size={24} color="black" />
                <FontAwesome name="trash-o" size={24} color="black" />
              </View>
            </View>
          </View>
        </TodoBox>
      </ScrollView>
    </SafeAreaView>
  );
}

const TobButton = styled.View`
  background-color: gray;
  border: 1px solid black;
  width: 100;
  height: 50;
  justify-content: center;
  align-items: center;
`;

const InputText = styled.TextInput`
  width: 350;
  height: 40;
  border: 2px solid black;
  margin: 10px;
`;

const TodoBox = styled.View`
  border: 1px solid black;
  background-color: lightgray;
  justify-content: space-evenly;
  margin: 10px;
  padding: 10px;
`;

const Hr = StyleSheet.create({
  View: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "black",
  },
});

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff"
  },
});

 

완성한 모습~~~