[todo_app_5] ui 마무리

isEditing?

ToDo앱은 두 개의 states가 있다

1. 수정할 때

2. 수정하지 않을 때

두 개의 state를 만들고 그 사이를 왔다갔다 해야함

state = {

isEditing: false

}

기본값은 false (수정하기를 누르면 true가 되도록)

다시 ui작업...

할일 목록을 담을 컨테이너 스타일

터치 가능한 동그라미

import React, {Component} from 'react';

import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';

const { width, height } = Dimensions.get("window");

export default class ToDo extends Component{ //stateful component, 수정되야하니까

state = {

isEditing: false

}

render(){

return (

<View style={styles.container}>

<TouchableOpacity> {/*터치 가능한 부분*/}

<View style={styles.circle} />

</TouchableOpacity>

<Text style={styles.text}> ToDo </Text>

</View>

)

}

}

const styles = StyleSheet.create({

container: {

width: width - 50,

borderBottomColor: "#bbb",

borderBottomWidth: StyleSheet.hairlineWidth,

alignItems: "center",

flexDirection: "row"

},

circle:{

width: 30,

height: 30,

borderRadius: 15,

borderColor: "red",

borderWidth: 3,

marginRight: 20

},

text: {

fontWeight: "600",

fontSize: 20,

marginVertical: 20

}

})

completed. uncompleted style

할일을 다 하고, 동그라미를 누르면

완료된 할일의 스타일로 변경

state를 하나 만들어준다.

state = {

isEditing: false,

isCompleted: false

};

동그라미를 누르면 작동할 펑션 작성

-완료되지 않은 상태에서 누르면 완료되고, 완료된 상태에서 누르면 완료되지 않은 상태로 돌아감

_toggleComplete = () => {

this.setState(prevState => {

return ({

isCompleted: !prevState.isCompleted {/*전의 bool과 반대로, 토글*/}

})

})

}

isCompleted의 값에 따라서 스타일이 바뀐다.

<TouchableOpacity onPress={this._toggleComplete}>

<View style={[styles.circle, isCompleted ? styles.completedCircle : styles.uncompletedCircle]} />

</TouchableOpacity>

circle:{

width: 30,

height: 30,

borderRadius: 15,

borderWidth: 3,

marginRight: 20

},

completedCircle: {

borderColor: "#bbb",

},

uncompletedCircle: {

borderColor: "#F23657",

}

동그라미는 끝, text에도 completed 여부에 따라서 스타일 변화 주기

<Text style={[styles.text, isCompleted ? styles.completedText : styles.uncompletedText]}> ToDo </Text>

text: {

fontWeight: "600",

fontSize: 20,

marginVertical: 20

},

completedText: {

color: "#bbb",

textDecorationLine: "line-through"

},

uncompletedText: {

color: "#353839"

}