TIL) 스파르타 개발일지 23-01-03

리액트 네이티브 공부

 

view box는 기본적으로 div이다.

flex direction은 기본이 컬럼이다. Top > bottom

문자열사용시 Text component 사용 필수

img tag의 경우 require 메소드 사용

<Image source={require("./이미지 경로")}/>

import { StatusBar } from 'expo-status-bar';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  SafeAreaView,
  ScrollView,
  TextInput,
} from "react-native";
import { AntDesign, FontAwesome } from "@expo/vector-icons";
import { useState } from "react";
export default function App() {
  //* Add Todo
  //* Input 창에서 엔터누르면 Todo 추가
  const [todos, setTodos] = useState([]);
  const [category, setCategory] = useState("js"); // js, react, ct
  const [text, setText] = useState("");

  const newTodo = {
    id: Date.now(),
    text,
    iosDone: false,
    isEdit: false,
    category,
  };
  const addTodo = () => {
    setTodos((prev) => [...prev, newTodo]);
  };
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} title="Javascript">
            <Text style={styles.text}>Javascript</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} title="React">
            <Text style={styles.text}>React</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} title="Coding Test">
            <Text style={styles.text}>Coding Test</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.inputContainer}>
          <TextInput style={styles.inputbox} placeholder="Enter your task" />
        </View>
        <View>
          <ScrollView>
            <View style={styles.todoListContainer}>
              <Text style={styles.todoTextBox}> React Native 공부하자! </Text>
              <View style={styles.iconContainer}>
                <AntDesign name="checksquareo" size={24} color="black" />
                <FontAwesome name="pencil-square-o" size={24} color="black" />
                <FontAwesome name="trash-o" size={24} color="black" />
              </View>
            </View>
          </ScrollView>
        </View>
      </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    backgroundColor: "#fff",
    padding: 20,
  },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingBottom: 20,
    borderBottomColor: "black",
    borderBottomWidth: 1,
  },
  button: {
    backgroundColor: "#98EBFF",
    padding: 10,
    height: 50,
    width: 100,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    color: "black",
    fontWeight: "bold",
  },
  inputContainer: {
    borderBottomColor: "black",
    borderBottomWidth: 1,
    marginBottom: 20,
  },
  inputbox: {
    marginVertical: 20,
    padding: 10,
    borderColor: "black",
    borderWidth: 1,
  },
  todoListContainer: {
    flexDirection: "row",
    backgroundColor: "#DADADA",
    padding: 10,
    width: 350,
    marginVertical: 5,
    justifyContent: "space-between",
    alignItems: "center",
  },
  iconContainer: {
    flexDirection: "row",
    width: 100,
    justifyContent: "space-around",
  },
});

todolist