Til (2023.01.02)

react native

 

styledText에 스타일 컴포넌트로 touchableopacity속성을 주고 클릭시 onPress로 category가 바뀌고 카테고리에따라 styledText박스 style이 바뀌게 설정

        <StyledText
          onPress={() => setCategory("ct")}
          style={{ backgroundColor: category === "ct" ? "blue" : "#ccc" }}
        >

 

그리고 각 category에 따라 각각 다른 내용이 나오게 설정 했다.

        {todos
          .filter((t) => {
            return t.category === category;
          })
          .map((todo) => {
            return (
              <Content key={todo.id}>
                <ContentText
                  style={{
                    textDecorationLine: todo.isDone ? "line-through" : "none",
                  }}
                >
                  {todo.text}
                </ContentText>
                <Icons>
                  <TouchableOpacity onPress={() => setDone(todo.id)}>
                    <AntDesign name="checksquare" size={20} color="black" />
                  </TouchableOpacity>
                  <TouchableOpacity>
                    <Entypo name="new-message" size={20} color="black" />
                  </TouchableOpacity>
                  <TouchableOpacity>
                    <AntDesign name="delete" size={20} color="black" />
                  </TouchableOpacity>
                </Icons>
              </Content>
            );