나아가는중

React Native GeoLocation 사용법 / 현재 위치 정보 불러오기 현재 위치 정보를 알 수 있는 쉽고 편하며 무료인 GeoLocation API 소개와 사용법입니다. 이 API를 사용하여 현재 위치의 위도와 경도를 알 수 있습니다. 도시의 이름 등 city와 관련된 정보는 없지만, 위도와 경도만으로도 다른 API와 혼합하여 사용하기 충분하기에 많은 쓰임세가 있는 API라고 할 수 있습니다. 우선 설치입니다. 저는 version 0.59 이상을 기준으로 소개해드릴 것입니다. react native 버전 0.59 이상을 사용하신 분들은 아래 명령어를 사용하시면 됩니다. npm install @react-native-community/geolocation --save 다음은 권한 설정 permi..

React Native react-native-timeline-flatlist API React Native API중 timeline을 손쉽게 만들어주는 API를 소개해드릴려고 합니다. 한국말로는 '연표'라고 하죠. 시간 순서대로 사건을 나열하는 것인데요. 다음의 이미지와 같은 timeline을 만들어 보겠습니다. 우선 API를 설치부터 하겠습니다. npm i react-native-timeline-flatlist --save 그 다음 API를 import해주겠습니다. import Timeline from 'react-native-timeline-flatlist' 사용법은 매우 간단합니다. 다음과 같이 기본 형태의 예제를 제공해주는데요 import Timeline from 'react-native-tim..

React Native ImageBackground borderRadius React Native 앱 개발 중 ImageBackground를 쓰다가 style에 borderRadius를 사용했는데, 기대하던 값이 나오지 않는 경우가 생기게 됩니다, ImageBackground의 경우 style이 아닌 imageStyle에 border와 관련된 값들을 넣어야 원하는 결과를 얻으실 수 있습니다. import React from 'react'; import { View, StyleSheet, ImageBackground } from 'react-native'; const image = { uri: 'https://reactjs.org/logo-og.png' }; const Main = ({ navigation..

React Native Keyboard.dismiss 빈공간 클릭시 키보드 사라지게 React Native에서 textInput을 사용하다 보면 keyboard가 화면에 나타나는데 이 키보드를 사리지게 하는 방법으로 Keyboard.dismiss를 사용하면 됩니다. 이제 이것을 어떻게 사용하냐면은 touchEvent 발생시, 즉 onPress가 생긴 경우 Keyboard.dismiss를 해주시면 됩니다. import React from 'react'; import { View, StyleSheet, Text, Keyboard } from 'react-native'; import { height, width } from '../config/globalStyles'; import { TouchableWith..

React Native shadow / top || bottom / Platform React Native 개발 중 shadow를 지정하는 방법입니다. React Native에서 shadow는 플랫폼(Platform)별로 다르게 설정해줘야 합니다. 먼저 react-native에서 Platform을 import 하시고 ...Platform.select로 안드로이드(Android)와 iOS를 구분해서 지정하도록 하겠습니다. import { Platform } from 'react-native'; ...Platform.select({ }) 다음으로는 shadow를 원하는 방향으로 지정하는 방법입니다. ios에서 height를 지정해줄 때에, "-"를 포함하면 상단(top)으로 포함하지 않으면 하단(bottom..

React Native borderStyle React Native borderStyle은 solid(default), dotted, dashed 이렇게 단 3개만이 존재합니다. 기본으로 스타일을 명시하지 않으면 solid 스타일이 적용이 됩니다. 스타일 속성에 borderWidth를 0이상의 값으로 설정한뒤, borderStyle 에 원하시는 style을 넣으시면 됩니다. const styles = StyleSheet.creat({ button: { width: '100', height: 50, justifyContent: 'center', borderWidth: 2, borderRadius: 5, borderStyle: 'solid' // borderStyle: 'dotted' // borderSty..

React Native react-native-pulse API 사용법 React Native animation 중에서 pulse 효과를 API를 사용하여 쉽고 간편하게 사용하는 방법입니다. 저한테 필요한 기능과 정말 딱 맞는 효과를 가지고 있어서 너무 유용하게 사용하였답니다. 직접 react-native-animatable을 import해서 구현하기에는 어렵고 힘든데, 이 API 덕분에 쉽게 구현하게 되었습니다. Animatable 중에 pulse가 어떤 효과인지 모르시는 분들은 아래 링크를 참조하시면 됩니다. pulse이외에도 여러 animatable 효과들이 있습니다. 다만 저는 npm만 보고는 구현하기가 어렵더라고요... www.npmjs.com/package/react-native-animata..

React Native Stopwatch - Functional Component Hooks 구현 React Native 앱 개발 stopwatch component 구현 예제(example)를 보여드리겠습니다. 별도의 API는 사용하지 않으며 React의 useRef를 사용하여 구현한 방법입니다. Functional Component방법을 사용하여 구현하였습니다. StopWatch.js import React, { useState, useRef } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { TouchableOpacity } from 'react-native-gesture-handler'; const Stop..

React Native react-native-stopwatch-timer API를 사용한 stopwatch 구현 React Native 앱 개발 중 스탑워치를 API를 사용해서 구현하는 것을 알려드립니다. npm에서 제공하는 기본 코드는 class component 형식을 사용하고 있는데요, 요즘 방식인 hooks functional component 방식으로 변경해서 사용하는 방법을 보여드리겠습니다. 우선 아래 코드를 입력해서 react-native-stopwatch-timer를 설치해 줍니다. npm install react-native-stopwatch-timer 이 API는 시간초가 증가하는 stopwatch랑 timer 두 가지를 제공하는데요, 저는 stopwatch만 사용해서 하는 방법을 보..

React Native Header - Functional Component Hooks React Native 앱 개발 중에 본인이 원하는 custom header bar 가 필요한 경우가 있습니다. 그럴 경우에 사용할 custom header bar를 만들어 보겠습니다. React Navigation을 사용하면 자동으로 header bar가 생성되게 됩니다. 우선 기본으로 제공해주는 header bar를 먼저 제거해줍니다. 방법을 모르시는 분은 아래 링크를 참조해주세요. dlee0129.tistory.com/15 [React Native] Navigation Option no Header 헤더 없애기, 제거 React Native Navigation Option no HeaderBar 헤더 없애기, 제..