ios

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

React Native 프로젝트에서 연동하고 사용하는 예제를 정리해보겠다. Firebase 프로젝트 생성 먼저 구글 로그인 후 Firebase에 접속해보면 시작하기 버튼이 보일 것이다. 이 버튼을 클릭하고 프로젝트를 추가해준다. 프로젝트 이름을 입력하고 계속 버튼을 클릭한다. 구글 애널리틱스를 사용하려면 Google 애널리틱스 사용 설정을 체크하고 계속 버튼을 누르고 애널리틱스 계정을 선택하거나 만들고 프로젝트 만들기 버튼을 클릭하면 프로젝트가 생성된다. 그럼 이제 안드로이드와 iOS에 Firebase를 설정하고 연동해보자. 안드로이드에 Firebase 설정하기 1. 앱 등록 프로젝트를 생성 후에 이동하는 페이지에 '앱에 Firebase를 추가하여 시작하기'라는 문구와 함께 안드로이드 아이콘이 보일 것이..

TextInput에 내용이 많아졌을때 기본적으로 보여줄 수 있는 줄 수를 초과할 경우, 안드로이드에서는 별 문제없이 스크롤할 수 있지만, iOS에서는 하단 내요이 잘리게 된다. 따라서 KeyboardAvoidingView로 컴포넌트 내부의 내용을 감싸줘야 작성한 내용이 엄청 길어져 줄이 많아졌을 때도 문제없이 글을 작성할 수 있다. KeyboardAvoidingView를 적용하지 않고 많은 내용을 작성했을때 iOS의 화면을 확인해보겠다. 키보드가 작성한 내용을 가리는 것을 확인할 수 있다. 이번엔 KeyboardAvoidingView를 적용해보자. import React from "react"; import { KeyboardAvoidingView, Platform, StyleSheet } from "r..

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 : 긴급..

사용자 입력값 받기 리액트 네이티브에서 사용자의 키보드 입력을 받아낼때는 TextInput 컴포넌트를 사용한다. import React from 'react'; import {View, StyleSheet, TextInput} from 'react-native'; function AddTodo() { return ( ); } const styles = StyleSheet.create({ container: { height: 64, paddingHorizontal: 16, // 좌우측 패딩 borderColor: '#bdbdbd', borderTopWidth: 1, borderBottomWidth: 1, justifyContent: 'center', }, input: { fontSize: 16, paddi..

디바이스에 최상단, 시간과 남은 배터리가 나타는 공간을 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: '#..

이번엔 컴포넌트를 만들어보겠다. 파일을 만든 다음 가장 먼저 해야 할 일은 상단에 React를 불러오는 것이다. 다음으로 사용할 컴포넌트를 불러온다. import React from 'react'; import {Text, View} from 'react-native'; 그 다음 컴포넌트를 선언할 것인데, 선언하는 방법은 함수로 선언하는 방법과 클래스로 컴포넌트를 선언하는 방법 2가지가 있다. 클래스는 예전에 주로 사용하던 방법이고 주로 함수로 선언한다. import React from 'react'; import {Text, View} from 'react-native'; function hello() { return ( Hello World ); } export default hello; 함수로 선언..

사이드 프로젝트 진행 중에 React Native 하이브리드 앱을 개발하려고 하는데 같이 진행할 프론트 개발자를 구하지 못해 내가 허접하지만 진행이라도 해보려고 한다... 만약 사이드 프로젝트를 같이 진행하실 React Native 가능하신 프론트 개발자가 있으시다면 당장 댓글을...ㅎㅎ 한 2년정도 전에 조금 공부하기만 하고 프로젝트를 진행해본적은 없는데 이번 기회에 조금 개념이라도 알고 있으면 좋을 것 같아 하나하나 진행하며 정리하려고 한다. 1. Node.js 설치 노드 js 홈페이지에 접속해 Node.js를 다운받는다. 물론 homebrew를 이용해 설치도 가능하다. 설치 후 터미널에서 node -v 명령어를 실행하면 설치된 노드 버전이 출력된다. 2. React Native Cli 설치 $ np..