#1, #2 Weather App
2021 동계 모각코 1월 17일 결과와 2021 동계 모각코 1월 19일 결과 를 이어서 정리한다.
* ScrollView
내부에 컴포넌트와 뷰들을 자식으로 담을 수 있는, 화면의 스크롤을 사용할 때 쓰는 컴포넌트
- 스크롤 방향은 horizontal을 통해 가로 또는 세로로 변경
- contentContainerStyle={{styles.변수}}
- pagingEnabled 속성으로 페이지처럼 만들 수 있음
- showsHorizontalScrollIndicator={false} 로 스크롤 바를 없앨 수 있음.
- indicatorStyle="white"으로 스크롤바의 색상을 변경할 수 있음(ios에서만 작용)
- 참고 사이트 : https://reactnative.dev/docs/scrollview
* Dimension
화면 크기를 얻는 API
* Location
- expo install expo-location 입력
- Location.requestForegroundPermissionAsync()으로 유저에게 위치 접근 권한 동의 알림창 보여줌
- Location.getCurrrentPositionAsync()으로 user의 위도와 경도를 알아냄.
- Location.reverseGeocodeAsync()으로 위도와 경도를 이용해 주소를 가져옴.
- openweatherorg의 api를 이용해 날씨를 가져옴
* toFixed()
ex) (12.12).toFixed(1) -> 12.1
* expo/vector-icons
- icons.expo.fyi 사이트에 가면 아이콘 확인 가능
※ 코드는 https://github.com/leecr1215/Nomad_Weather에서 확인할 수 있습니다
#3, #4 Todo App (Work Hard Travel Hard App)
* react native에만 있는 속성
- paddingVertical
- paddingHorizontal
* button 관련 컴포넌트
① TouchableOpacity
- 누르는 이벤트를 들을 준비가 된 View
- 터치하면 래핑된 View의 opacity가 감소하여 흐리게 표시됨
- View가 터치에 적절하게 반응하도록 하는 래퍼
② TouchableHighlight
- 클릭한 요소의 배경색이 바뀌도록 함
- underlayColor
원하는 배경색을 설정할 수 있는 속성
- onPress
유저가 Touchable을 눌렀을 때 실행되는 이벤트
onPress={이벤트명}
- onLongPress
유저가 Touchable을 길게 눌렀을 때 실행되는 이벤트
③ TouchableWithoutFeedback
- Touchable 컴포넌트이고 화면의 가장 위에서 일어나는 탭 이벤트를 듣는 컴포넌트
- UI 변화를 보여주지 않음
④ Pressable
- disable 속성 있음
- hitSlope 속성 : 요소 바깥 어디까지 탭을 누르는 것을 감지할 것인지 정할 수 있음
* text input 관련 속성
- placeholder
- onFocus
화면을 터치하면 쓸 준비가 된 상태
- onChangeText : 입력한 Text를 받을 수 있음
- keyboardType 종류 : number-pad, email-address 등
- returnKeyType 종류 : send, next, done, go 등
-> 키보드의 return 버튼 상태를 변경할 수 있음
- returnKeyLabel(안드로이드만) : return 버튼에 쓸 text를 마음대로 정할 수 있음
- secureTextEntry : 글씨가 안보이고 ●으로 보임
- multiline : 한 줄 이상 쓰는 경우에 사용
- autoCapitalize: 대문자를 지정
- sentences: 첫 글자가 대문자로 입력됨
- words: 다 대문자로 입력됨
- onSubmitEditing : 완료 버튼 눌렀을 때 발생하는 이벤트(함수)
* object assign
: object를 가져다가 다른 object와 합쳐주고 새로운 object를 리턴
* Object로 map 쓰는 법
- Object.keys(object 이름) => key들을 array로 반환
- 즉 Object.keys(object 이름).map()으로 사용
* AsyncStorage
- 다운expo install @react-native-async-storage/async-storage
- 사용await AsyncStorage.setItem(key, value)
이때 value는 string 형태
- 참고 사이트 : https://docs.expo.dev/versions/v44.0.0/sdk/async-storage/
* Alert.alert()
- 확인 알림창
- 사용자에게 물어볼 때 사용
- text 및 버튼 넣는 것 가능
- 버튼을 눌렀을 때 실행할 함수 적용 가능
* publish app
- QR코드 스캔으로 앱 확인 가능
* asserts 폴더
- 앱이 로딩될 때 보여주는 아이콘 설정
- 앱을 나타내는 아이콘 설정
* build 하는 법
방법 1. https://docs.expo.dev/classic/building-standalone-apps/
- expo build:android or expo build:ios 입력
-> 엔터 계속 누르기
- 그 후 나오는 링크로 들어가서 build 현황 확인
- expo build:web 으로 웹 빌드
방법 2. React Native for Windows + macOS
React Native로 네이티브 Windows, macOS 앱을 빌드할 수 있다.
https://microsoft.github.io/react-native-windows/
방법 3. viroReact
ViroReact는 React Native를 사용하여 AR/VR 애플리케이션을 빠르게 구축하기 위한 오픈 소스 개발자 플랫폼
AR 및 VR 앱은 single code를 기반으로 함
https://viromedia.com/viroreact
* expo의 문제점
- 앱 설정에 관해서 많은 설정을 할 수 없음
-> 기초적인 파일들에 접근이 불가능함
- js와 json이 아닌 다른 파일에 접근해야할 때 불편함
- npm run eject를 하면 expo에서 꺼내짐
* 앱 아이콘
ppt로 직접 그렸습니다. 필요하신분은 사용하셔도 됩니다.
※ 코드는 https://github.com/leecr1215/WorkHardTravelHardApp에서 확인할 수 있습니다