4.2.5 완료한 항목에 다른 스타일 적용하기

App 컴포넌트에서 선언한 todos 배열의 첫 번째 항목을 보면 done 값을 true로 설정해 해당 할 일이 완료됐다는 정보를 지니도록 했습니다. 완료 항목과 미완료 항목을 구분할 수 있도록 done 값이 true일 때 다른 스타일을 적용해봅시다.

완료 항목은 좌측 원의 배경색을 채우고 체크 아이콘을 보여줄 것입니다. 아이콘은 assets/check_image/check_white.png 이미지 파일을 사용하겠습니다.

TodoItem 컴포넌트를 다음과 같이 수정해보세요.

components/TodoItem.js

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

function TodoItem({id, text, done}) {
  return (
     <View style={styles.item}>
        <View style={[styles.circle, done && styles.filled]}>
          {done && (
            <Image
              source={require('../assets/icons/check_white/check_white.png')}
            />
          )}
        </View>
          <Text style={[styles.text, done && styles.lineThrough]}>{text}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    item: {
      flexDirection: 'row',
      padding: 16,
      borderBottomColor: '#e0e0e0',
      alignItems: 'center',
    },
    circle: {
      width: 24,
      height: 24,
      borderRadius: 12,
      borderColor: '#26a69a',
      borderWidth: 1,
      marginRight: 16,
    },
    filled: {
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#26a69a',
    },
    text: {
        flex: 1,
        fontSize: 16,
        color: '#212121',
    },
    lineThrough: {
      color: '#9e9e9e',
      textDecorationLine: 'line-through',
    },
});

export default TodoItem;