exportdefaultfunctionApp() {
return (
<Viewstyle={styles.container}><Text>Open up App.js to start working on your app!</Text><StatusBarstyle="auto" /></View>
);
}
View 태그
<View> : 화면의 영역을 잡아주는 엘리먼트
Text 태그
<Text> : 앱에 글을 작성하기 위해 사용하는 엘리먼트
문자는 반드시 Text 태그 안에 써야함!
ScrollView 태그
import React from'react';
import { StyleSheet, Text, View, ScrollView } from'react-native';
exportdefaultfunctionApp() {
return (
<ScrollViewstyle={styles.container}><Viewstyle={styles.textContainer}><Textstyle={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text></View><Viewstyle={styles.textContainer}><Textstyle={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text></View><Viewstyle={styles.textContainer}><Textstyle={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text></View><Viewstyle={styles.textContainer}><Textstyle={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text></View><Viewstyle={styles.textContainer}><Textstyle={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text></View><Viewstyle={styles.textContainer}><Textstyle={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text></View><Viewstyle={styles.textContainer}><Textstyle={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text></View><Viewstyle={styles.textContainer}><Textstyle={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text></View></ScrollView>
);
}
<TouchableOpacity> : 버튼과 비슷한 역할을 함, 대신 화면에 영향을 주지 않음
임의의 영역과 디자인에 버튼 기능을 추가할 때 주로 사용할 태그
Image 태그
import React from'react';
import { StyleSheet, Text, View, Image } from'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다import favicon from"./assets/favicon.png"exportdefaultfunctionApp() {
return (
<Viewstyle={styles.container}><Imagesource={favicon}
// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
resizeMode={"repeat"}
style={styles.imageStyle}
/></View>
);
}
<Image> : 이미지를 넣는 태그
import를 통해 assets 폴더의 이미지 파일을 가져온 다음 사용
source : import한 이미지
resizeMode : 이미지를 보여주는 방식-repeat : 이미지가 반복-그 외 contain, stretch, center
-cover : 이미지가 화면 전체에 꽉 차게 보여줌
import React from'react';
import { StyleSheet, Text, View, Image } from'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다import favicon from"./assets/favicon.png"exportdefaultfunctionApp() {
return (
<Viewstyle={styles.container}>
{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
<Imagesource={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
resizeMode={"cover"}
style={styles.imageStyle}
/></View>
);
}
flex-start, flex-end, center를 가장 자주 씀, 그 외 space-around, space-between, space-evenly
alignItems : flexDirection 방향과 반대로 정렬 (flex 영역 내에서 사용 가능)
alignSelf : flex 없어도 가능
numberOfLines={3} : 텍스트 잘리는 부분 ... 으로 대체
앱&자바스크립트 모듈, 반복문
App.js : 모듈 시스템에 의해서 내보내짐
앞으로 여러 파일들을 만들 때 export default function을 이용해서 내보낼 것
exportdefaultfunctionApp() {...}
data.json 파일 : 딕셔너리 + 리스트 구조
App.js에 data.json 파일 import
import data from'./data.json'
data.tip으로 json 파일의 tip 가져오기
let tip = data.tip;
let todayWeather = 10 + 17;
let todayCondition = "흐림"
App.js JSX 문법 안에서 map을 이용한 반복문
반복문을 돌릴 때 가장 최상위 태그에는 key값이 주어져야 한다. (key는 유니크함)
<View style={styles.cardContainer}>
{/* 하나의 카드 영역을 나타내는 View */}
{
tip.map((content,i)=>{
return (<Viewstyle={styles.card}key={i}><Imagestyle={styles.cardImage}source={{uri:content.image}}/><Viewstyle={styles.cardText}><Textstyle={styles.cardTitle}numberOfLines={1}>{content.title}</Text><Textstyle={styles.cardDesc}numberOfLines={3}>{content.desc}</Text><Textstyle={styles.cardDate}>{content.date}</Text></View></View>)
})
}
</View>
Could not find setVariantDir after 4.3.6 · Issue #176 · google/play-services-plugins
Describe the bug A problem occurred configuring project ':mobile'. > Failed to notify project evaluation listener. > com.android.build.gradle.internal.crash.ExternalApiUsageException:...
github.com
4.3.6 버전에서 삭제된 메소드를 여전히 호출하는 메소드가 있었던 것..
해당 이슈가 발생한지 얼마 안된 시점이었는데
다행히도(?) 며칠 만에 버그 픽스가 된 4.3.8 버전이 나왔고 Firebase DB와 연동을 마쳤다.
5월 중순 : 개발 시작 (레이아웃 구성)
Figma 툴을 이용해서 작성한 앱 화면 프로토타입을 바탕으로
팀원들이 각자 맡은 역할대로 안드로이드 스튜디오 안에서 레이아웃을 구현했다.
현재는 디자인 고려 안하고 화면 해상도에 맞게 레이아웃, 버튼 배치만 한 상태이다. (위의 이미지는 메인 화면)
디자인보단 기능 구현이 우선이라고 생각해서 색 조합이나 이미지뷰는 나중에 고려할 듯 하다.
나는 앱의 주요 기능들 중 일기장 부분 레이아웃을 맡아 일기 내용/작성/수정 페이지 레이아웃을 구현했다.
5월 말 : 일기장 기능 구현 중
우리 팀이 구현할 기능들 중 가장 먼저 일기장 기능을 다뤄보기로 했다.
Firebase DB 사용법을 찾아보며 간단히 일기를 등록하고, 삭제하는 것까지 구현했다.
그런데 문제점이 있었으니..
1. MaterialCalendarView
커스텀 캘린더뷰를 구현하기 위해 MaterialCalendar을 활용하려고 하는데
생각보다 MaterialCalendarView와 관련된 자료들이 많이 없으며
특정 부분에서 NullPointerException 에러가 발생하는데 해당 오류의 원인을 찾지 못했다.
2. ViewModel
우리는 MVVM(Model-View-ViewModel) 패턴을 이용하여 개발을 진행하고자 한다.
그런데 안드로이드 스튜디오의 ViewModel과 관련된 자료들을 찾아보았을 때
Kotlin 언어를 이용한 자료들이 대부분.. Java를 사용하여 설명을 작성한 경우가 거의 없었다ㅠㅠ
