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: 미완료일 때)
댓글