본문 바로가기
프로그래밍/front end 프론트 엔드

react native로 todo app 만들기

by 어느덧중반 2021. 7. 13.
반응형

1. project 생성

2. git 연결

 

- 상단 바 색상 변경
<StatusBar barStyle="light-content" />

- 가로세로 폭이 휴대폰폭만큼 있고 추가 margin을 줄 경우
import Dimensions 해주고 const { height, width } = Dimensions.get("window");
후에 style에서 width : width - 25 등으로 적용

- 사각형 넣을 때 모서리 둥글게
borderTopLeftRadius: 10,
borderTopRightRadius: 10

- 그림자 넣기
iOS : shadowRadius: 5, shadowColor : "rgb(50, 50, 50)", shadowOpacity: 0.5, shadowOffset: { height: -1, width: 0 }
Android: elevation : 0 (0 ~ 5 중 선택)

- iOS / Android 환경에 맞게 적용시키기
import Platform 해주고
style에 아래내용 추가
...Platform.select({
   iOS: {
        .....(적용할 내용 추가).....
   },
   android: {
        .....(적용할 내용 추가).....
   }
});

- state 관리 (#4 3:00)
const state = { newToDo: "" };
_controlNewToDo = text => {
   this.setState({ newToDo: text });
}

- 키보드의 intro 키를 done 키로 변경해서 보여주기
<TextInput returnKeyType={"done"} />

- scrollview (#4 6:00)
 contentContainerStyle={styles.todos} : card 안에 위치하도록

- state 관리
state = { isEditing: false };

- card 안에 ToDo 리스트가 보이게 되니 ToDo.js 의 컨테이너는 width - 50으로 설정

- marginVertical : 위아래 간격 설정

- New To Do에 작성한 ToDo 가져와서 보여주기
 자식component 에서 props의 text 가져오기

const { text } = this.props;

부모component에서 text 패스해주기

<Todo text= {"Hello I'm a To do"} />

 

- 상태에 따른 글씨 색상 변경 (#6 00:00) 
_toggleComplete = () => { this.setState(prevState => { return { isCompleted: !prevState.isCompleted }; }); };
 (completedText : 완료일 때는 completed, uncompletedText: 미완료일 때)

반응형

댓글