[React Native] ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜์—ฌ ํ˜„์žฌ ํ™”๋ฉด์„ ์บก์ฒ˜ํ•ด๋ณด์žโ—
ยท
Frontend/React Native
Install $ yarn add react-native-view-shot Import import ViewShot from 'react-native-view-shot'; Code import ViewShot from 'react-native-view-shot'; function App() { const ref = useRef(); const captureScreen = () => { ref.current.capture().then((uri) => { console.log('capture complete...', uri); }); }; return ( // ํ™”๋ฉด ์บก์ฒ˜๋  ๋ถ€๋ถ„์„ ViewShot ์ปดํฌ๋„ŒํŠธ๋กœ ๊ฐ์‹ธ์ค€๋‹คโ—โ— ํ™”๋ฉด ์บก์ฒ˜ ); } ๐Ÿ’ก useRef useRef๋Š” ํŠน์ • ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ ํƒํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ho..
[React Native] ํ‚ค๋ณด๋“œ๊ฐ€ TextInput์ฐฝ์„ ์•ˆ ๊ฐ€๋ฆฌ๋„๋ก ํ•ด๋ณด์ž! (KeyboardAwareScrollView)
ยท
Frontend/React Native
์ปค๋ฎค๋‹ˆํ‹ฐ ์ƒ์„ธํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ •์—์„œ TextInput์ฐฝ์ด ์Šคํฌ๋ฆฐ์˜ ๋งจ ๋ฐ‘์— ์œ„์น˜ํ•˜๋„๋ก ํ•˜์˜€๋‹ค. ์•ฑ์œผ๋กœ ๊ฐœ๋ฐœ์„ ์ฒ˜์Œํ•ด๋ณด๋‹ˆ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ๋‹ค. ํ‚ค๋ณด๋“œ๋ฅผ ๋„์šฐ๋ฉด TextInput์ฐฝ์„ ๋ฎ์–ด ๋ฌด์—‡์„ ์ž…๋ ฅํ•˜๋Š”์ง€ ๋ณผ ์ˆ˜๊ฐ€ ์—†๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค. ํ‚ค๋ณด๋“œ๊ฐ€ TextInput์ฐฝ์„ ์•ˆ๊ฐ€๋ฆฌ๋„๋ก ํ•˜๊ณ  ํฌ์ปค์‹ฑ์ด ๋˜๋„๋ก ํ•ด๋ณด์žโ—โ— 1๏ธโƒฃ react-native-keyboard-aware-scroll-view ๋ชจ๋“ˆ ์„ค์น˜ npm i react-native-keyboard-aware-scroll-view --save 2๏ธโƒฃ import๋ฌธ import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; 3๏ธโƒฃ ๋ณธ๋ฌธ ๋‚ด์šฉ์„ KeyboardAwareSc..
[React Native] ๊ฐ€๊ฒฉ์— ์ฒœ ๋‹จ์œ„ ์‰ผํ‘œ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•(์ •๊ทœ์‹)
ยท
Frontend/React Native
๋ฌธ์ œ ๊ธฐ์กด์˜ JavaScript์—์„œ๋Š” toLocaleString() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ€๊ฒฉ์— ์ฒœ ๋‹จ์œ„๋งˆ๋‹ค ์‰ผํ‘œ๋ฅผ ์‰ฝ๊ฒŒ ๋„ฃ์„ ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์•ˆ๋“œ๋กœ์ด๋“œ์—์„œ๋Š” JavaScript์˜ ์ตœ์‹  ๋ฒ„์ „์„ ์ง€์›ํ•ด์ฃผ์ง€ ์•Š์œผ๋ฏ€๋กœ ์ง์ ‘ function์„ ๋งŒ๋“ค๊ฑฐ๋‚˜ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ์ž‘์—…์ด ํ•„์š”ํ•˜๋‹ค. ์‚ฌ์šฉ ์ฝ”๋“œ (๋ณ€ํ™˜์„ ์›ํ•˜๋Š” ์ˆซ์ž).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); Object.prototype.toString() ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š” object์˜ ๋Œ€ํ‘œ์ ์ธ ๋ฐฉ๋ฒ• ์ •๊ทœ์‹์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๊ทธ๋ฆฌ๊ณ  ๊ตฌ๋ถ„์ž๊ฐ€ ํฌํ•จ๋œ ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ์–ป๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ 1๏ธโƒฃ ์ •๊ทœ์‹ ์ƒ์„ฑ ๋ฐฉ๋ฒ• 2๊ฐ€์ง€ ์ •๊ทœ์‹ ๋ฆฌํ„ฐ๋Ÿด(/๋กœ ๊ฐ์‹ธ๋Š” ํŒจํ„ด)์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ๐Ÿ“Œ RegExp ๊ฐ์ฒด์˜ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ๋ฒ• 2๏ธโƒฃ ..
[React Native] Expo๋ฅผ ์ด์šฉํ•œ ์•ฑ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋ฐฉ๋ฒ•
ยท
Frontend/React Native
Expo CLI ์„ค์น˜ $ npm install --global expo-cli Expo Go ์•ฑ ์„ค์น˜ Android Play Store https://play.google.com/store/apps/details?id=host.exp.exponent Expo ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ $ expo init ์•ฑ์ด๋ฆ„ ๐Ÿ“Œ Choose a template → blank - a minimal app as clean as an empty canvas ์„ ํƒ Expo ๋กœ๊ทธ์ธ(VS code ํ„ฐ๋ฏธ๋„) expo login Expo ํ”„๋กœ์ ํŠธ ์‹คํ–‰(VS code ํ„ฐ๋ฏธ๋„) expo start --tunnel
_์„ฑํ˜ธ_
'Frontend/React Native' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก