import React, { useState } from 'react';
import { StatusBar, Dimensions } from 'react-native';
import styled, {ThemeProvider} from 'styled-components/native';
import {theme} from './theme';
import Input from './components/Input';
import Task from './components/Task';
const Container = styled.SafeAreaView`
flex: 1;
background-color: ${({theme}) => theme.background};
align-items: center;
justify-content: flex-start; /* 타이틀이 상단에 나타나도록 justify-content의 값을 flex-start;로 지정해준다. */
`;
const Title = styled.Text`
font-size: 40px;
font-weight: 600;
color: ${({theme}) => theme.main};
width: 100%;
align-items: flex-end;
padding: 0 20px;
`;
/* styled components를 이용해서 Title이라는 이름에 새로운 컴포넌트를 만드는 작업이다.
font-size와 font-weight 그리고 글자 color를 설정해주는데 글자 color는 theme.js에 정의해놓은 main을 가져와서 사용할것이다.
가로(width)는 전체를 차지하게하고, 글자를 왼쪽(align-items: flex-end;)에서부터 하도록한다.
화면의 끝에 바짝붙지않도록 padding을 주어서 약간 떨어지게 설정을한다. */
const List = styled.ScrollView`
flex: 1;
width: ${({ width }) => width -40}px;
`;
export default function App() {
const width = Dimensions.get('window').width;
const tempData = {
1: { id: '1', text: 'React Native', completed: false },
2: { id: '2', text: 'Expo', completed: true },
3: { id: '3', text: 'JavaScript', completed: false },
};
const [tasks, setTasks] = useState(tempData);
const [newTask, setNewTask] = useState('');
const addTask = () => {
const ID = Data.now().toString();
const newTaskObject ={
[ID] : {id: ID, text: newTask, completed: false },
};
setNewTask('');
setTasks({...tasks, ...newTaskObject});
};
return (
<ThemeProvider theme={theme}>
<Container>
<StatusBar
style="light-content"
backgroundColor={theme.background}
/>
<Title>TODO List</Title>
<Input
placeholder="+ Add a Task"
value={newTask}
onChangeText = {text => setNewTask(text)}
onSubmitEditing={addTask}
/>
<List width = {width}>
{Object.values(tasks)
.reverse()
.map(item => (
<Task key={item. id} text={item.text} />
))}
</List>
</Container>
</ThemeProvider>
);
}
감사합니다:)