나아가는중

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 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 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 Modal Functional Component Hooks Modal은 특정 이벤트가 실행되었을 때, 화면 상단에 표시되는 창으로, 화면 전체를 다 가리지 않고 일부만 가리는 것이라고 생각하시면 됩니다. 사용자의 응답(reponse)를 요구하며 확인, 예/아니오 등의 응답을 요구합니다. 응답이 있기 전까지 화면에서 사라지지 않으며 응답을 받으면 사라지는 동작입니다. Modal은 React Native에 기본으로 포함되어 있는 기능이기도 합니다만, 별도로 react-native-modal을 설치해서도 사용을 합니다. 저는 React Native에 기본으로 내장되어 있는 modal을 가지고 보여드리겠습니다. 두 파일로 분활하여 구현하였습니다. AppModalContainer.js im..