'Frontend/React Native' 카테고리의 글 목록

[React Native] 버튼을 클릭하여 현재 화면을 캡처해보자❗

2022.08.31

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

Frontend/React Native

[React Native] 키보드가 TextInput창을 안 가리도록 해보자! (KeyboardAwareScrollView)

2022.08.25

커뮤니티 상세페이지를 만드는 과정에서 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..

Frontend/React Native

[React Native] 가격에 천 단위 쉼표 넣는 방법(정규식)

2022.08.19

문제 기존의 JavaScript에서는 toLocaleString() 메서드를 사용하면 가격에 천 단위마다 쉼표를 쉽게 넣을 수 있다. 하지만 안드로이드에서는 JavaScript의 최신 버전을 지원해주지 않으므로 직접 function을 만들거나 변환해주는 작업이 필요하다. 사용 코드 (변환을 원하는 숫자).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); Object.prototype.toString() 문자열을 반환하는 object의 대표적인 방법 정규식을 사용하기 위해 그리고 구분자가 포함된 새로운 문자열을 얻기 위해 사용 1️⃣ 정규식 생성 방법 2가지 정규식 리터럴(/로 감싸는 패턴)을 사용하는 방법 📌 RegExp 객체의 생성자 함수를 호출하는 방법 2️⃣ ..

Frontend/React Native

[React Native] Expo를 이용한 앱 프로젝트 생성 방법

2022.08.08

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

[React Native] 버튼을 클릭하여 현재 화면을 캡처해보자❗

[React Native] 키보드가 TextInput창을 안 가리도록 해보자! (KeyboardAwareScrollView)

[React Native] 가격에 천 단위 쉼표 넣는 방법(정규식)

[React Native] Expo를 이용한 앱 프로젝트 생성 방법

티스토리툴바