안드로이드

업로드할 사진 선택 또는 카메라 촬영하기 리액트 네이티브 앱에서 버튼을 클릭했을 때 업로드하라 사진을 갤러리에서 선택할지 아니면 카메라로 새로 촬영할지 사용자가 선택하도록 모달을 띄어보려고 한다. ActionSheetIOS는 이름에서 유추할 수 있듯이 iOS에서만 지원되는 API로, 지금과 같이 사용자에게 선택지를 줄 때 iOS에서 주로 사용하는 UI다. 안드로이드의 경우에는 모달을 통해 선택할 수 있도록 구현하는데, 만약 안드로이드에서도 ActionSheetIOS와 같은 UI로 기능을 구현하고 싶다면 @expo/react-native-action-sheet를 사용하면 된다. 1. 모달 만들기 리액트 네이티브에서 모달을 만들 때는 주로 Modal이라는 컴포넌트를 사용한다. 이 컴포넌트를 사용하지 않아도 ..

React Native에서 Alert API를 통해 알림창을 구현해보겠다. const deleteItem = () => { Alert.alert( '삭제', '정말로 삭제하시겠습니까?', [ {text: '취소', onPress: () => {}, style: 'cancel'}, { text: '삭제', onPress: () => { onDelete(id); }, style: 'destructive', }, ], { cancelable: true, onDismiss: () => {}, }, ); }; ... return( ... deleteItem()} /> ) Alert.alert 함수의 파라미터는 제목, 내용, 버튼 배열, 옵션 객체 순서다. 버튼 배열에 넣는 버튼 객체에는 text 값을 통해 버튼의..

아이콘이나 이미지를 사용할때 라이브러리로 react-native-vector-icons가 유용하다. React-Native-vector-icons GitHub에 활용하는 방법이 소개 되어 있다. 백터 아이콘(Vector Icons)은 폰트 또는 SVG를 사용해 크기가 조정돼도 아이콘이 흐려지거나 깨지지 않는다. 터미널에서 아래 명령어를 사용해 설치가 가능하다. $ yarn add react-native-vector-icons 설치 후 iOS와 안드로이드 프로젝트 둘 다 적용이 필요하다. iOS에 react-native-vector-icons 적용하기 ios 디렉터리로 이동해 pod install 명령어를 사용한다. $ cd ios $ pod install ios 디렉터리를 보면 프로젝트명으로 된 폴더안에..

키보드에서 Enter(return)를 눌렀을 때 onSubmitEditing 속성으로 함수를 호출할 수 있다. TextInput에 returnKeyType 속성은 키보드 완료 부분이 설정한 문자열로 보이게 설정할 수 있다. const onPress = () => { // .. 실행할 함수 } 위 코드에선 done으로 설정했는데 iOS 한국어 키보드를 켜보면 "완료"로 번역되어 나온다. 안드로이드에서는 체크 아이콘으로 설정되어있어서 설정할 필요는 없다. returnKyeType 속성은 상황에 따라 다음과 같은 값들을 지정할 수 있다. 플랫폼 공통 done : 완료 go : 이동 next : 다음 search : 검색 send : 보내기 iOS 전용 default : 기본 emergency-call : 긴급..

디바이스에 최상단, 시간과 남은 배터리가 나타는 공간을 StatusBar라고 한다. 이곳에 색상을 바꿔보려고 한다. import React from 'react'; import {View, Text, StyleSheet, StatusBar} from 'react-native'; function DateHead({date}) { const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); return ( {year}년 {month}월 {day}일 ); } const styles = StyleSheet.create({ container: { padding: 16, backgroundColor: '#..