반응형

웹, 앱 개발/RN React-Native 30

[React Native] Slider 스크롤 금지 disabled 속성

React Native Slider 스크롤 금지 disabled 속성 Slider 사용중 스크롤 금지, 사용자 touch event를 금지, thumb가 이동하지 않도록 하는 방법입니다. Slider 태그안에 disabled 속성을 추가하셔서 true를 추가하시면 됩니다. 다음은 예제 코드입니다. import Slider from '@react-native-community/slider'; import React, { useState } from 'react'; import { Text, View } from 'react-native'; const AppSlider = ({ }) => { const [myValue, setMyValue] = useState(0); return ( setMyValue(va..

[React Native] Slider 활용

React Native Slider 활용 Slider란 위에 화면 밝기 조절할 때 좌우로 움직이는 스크롤이라고 할 수 있는데요. 사용자가 스크롤을 함으로 값이 변경되거나, 변경된 값에 따라 스크롤이 움직이는 동작을 합니다. 우선 설치 입니다. npm install @react-native-community/slider --save 다음은 Slider를 Hooks functional component 방식을 사용하여 만든 간단한 예제입니다. import Slider from '@react-native-community/slider'; import React, { useState } from 'react'; import { Text, View } from 'react-native'; const AppSlid..

[React Native] Hooks를 이용한 Timer functional component

React Native Hooks를 이용한 Timer functional component React Native에서 Hooks functional component를 사용한 타이머를 예제입니다. 입력 props로 주어진 sec에서 매초마다 1씩 감소하는 형식입니다. import React, { useState, useEffect, useRef } from 'react'; import { Text, StyleSheet } from 'react-native'; var _interval const Timer = ({ sec, style }) => { const [second, setSecond] = useState(sec); const [delay, setDelay] = useState(1000); cons..

[React Native] MacBook M1 Run Android Emulator 안드로이드 에뮬레이터 구동

React Native M1 Run Android Emulator 안드로이드 에뮬레이터 구동 앞선 글에서도 소개 드렸지만 현재 Macbook M1에서 Android Emulator 안드로이드 에뮬레이터는 React Native에서 구동이 안되는 것 같습니다. 안드로이드 스튜디오가 아닌 별도의 방법을 사용하여 Android Emulator를 설치하여 android studio에서 동작은 가능한 것 같으나, React Native에서 어떻게 동작시켜야 하는지 찾지 못하였습니다. 별도의 설치와 안드로이드 스튜디오에서 실행이라도 원하시는 분은 아래 링크를 참조해주세요. dlee0129.tistory.com/4?category=973753 [React Native] M1 에뮬레이터, 시뮬레이터 구동하기 React..

[React Native] GeoLocation 사용법 / 현재 위치 정보 불러오기

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 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 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 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 / 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 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..

반응형