목록React-Native (9)

꾸매코딩

[React-Native] Dimensions.get() 을 쓰면 안되는 이유

Dimensions 이란? RN에서 Dimensions은 보통 기기의 width(너비) 값, height(높이) 값을 구할 때 사용한다. 덧붙이자면, 다양한 (iOS, AOS) 기기의 자체의 width 와 height 값을 통해 의도한 UI를 구현하기 위해 사용한다. Dimensions.get() 을 쓰면 안되는 이유 가로모드, 세로모드에 따른 변화된 width, height 값을 바로 불러오지 못한다. 처음 가져온 화면 크기에 고정된다. 대안 - useWindowDimensions() 사용 - Dimesions과 useState, useEffect를 활용 내가 생각하는 가장 좋은 대안은 react-native 에서 지원하는 useWindowDimensions() hook을 사용하는 것이다. 두번째 대안..
React-Native 2023. 5. 17. 16:26
[React-Native] Android SDK 30 -> 31로 변경

2022-11-01 이후로 Google play console ( 플레이스토어 )에 앱을 배포할 시 targetSdkVersion이 31 이상이어야 가능함 작성 이유 .aab 파일을 스토어에 올리려고하니 위와 같은 오류가 나오면서 배포를 할 수 없게 되었다. 2시간정도 해매고 해결한 내용을 정리하려고 한다. Android Studio 31에 해당하는 버전의 SDK 설치 ⇒ Android 12.0 (S) 1. 우측 상단에 SDK Manager 클릭 2. 원하는 버전의 SDK 설치 ( API Level ) 3. Show Package Details 에서 필요한 부분만 설치 설치한 노트북이 M1 Mac Book 이라 해당되는 부분만 설치 진행 React-Native에서 해당 SDK 사용하도록 설정 RN 폴더 ..
React-Native 2022. 11. 24. 11:08
[React-Native] ScrollView를 사용한 Native Picker 만들기

결과 Native Time Picker 서론 처음엔 React-Native 피커 중 가장 유명한 react-native-picker 라이브러리를 사용했다. iOS에선 그나마 이쁘게 출력되었는데, Android는 전혀 다른 창으로 보여서 직접 만들기로 했다. 자료가 많지 않아서 애를 먹었다. 나와 같은 사람이 있으리라 생각하고 정리해볼 생각이다. RN을 시작한 지 얼마 되지 않아 미흡하니 코드는 참고만 해주시면 감사하겠습니다🙏 본론 사용 스택 RN StyledComponents TypeScript 필요한 기능 Scroll 시 버튼 값 (ex 오전, 오후)이 칸에 고정되도록 출력되어야 한다. 가운데에 위치한 버튼 값이 어떤 값인지 알아야 한다. 분이 55에서 다음으로 넘어가면 0으로 변경되고 시간이 변해야 ..
React-Native 2022. 3. 9. 21:02
[React-Native] Node.js 빌드 에러 : address already in use :::8081

서론 서버를 실행시키지 않았는데, npx react-native start 명령어 사용 시 이미 사용 중인 포트라고 나오는 오류가 발생하였다. 본론 원인 다른 프로세스에서 사용 중 하지만 가능성은 적으니 생략... 이전에 비 정상적으로 종료된 경우 문제 8081번째 포트를 이미 사용 중이므로 8081번째 포트를 사용하는 프로세스를 찾고 필요하지 않은 경우 종료, 혹은 강제 종료를 해야 한다. 해결 - macOS 및 Linux 아래에 명령어를 사용하여 맥에서 해당 포트를 사용하는 프로세스를 찾는다. sudo lsof -i :8081 lsof : 활성화된 프로세스 리스트 출력 -i : 특정 포트를 사용 중인 프로세스만 출력하도록 도와 줌 node : 프로세스 이름 6055 : 프로세스 PID 값 아래에 명령..
React-Native 2022. 3. 5. 16:12
[React-Native] npm install 설치 시 npm ERR! code ERESOLVE

서론 Window에서 Mac으로 변경하고 이런 저런 설정을 잡는 도중 여러 오류를 발견하였다. 이런 오류에 대해 기록하고 공유하고자 글을 작성합니다. 본론 답은 ERP! 경고문에 나와있다. 1. react 버전을 맞춰라. 2. --legacy-peer-deps 를 이용해라. 해결 npm install --legacy-peer-deps 아래 내용을 통해 비교적 쉽게 해결할 수 있었다. https://stackoverflow.com/questions/64573177/unable-to-resolve-dependency-tree-error-when-installing-npm-packages Unable to resolve dependency tree error when installing npm packages..
React-Native 2022. 1. 14. 22:09
[React-Native] 안드로이드 디바이스 글자 크기 설정 기능 제한 (Text , TextInput)

서론 App을 반응형으로 만들던 중, 안드로이드 디바이스에서 지정한 글자 크기가 애플리케이션에 적용되는 문제를 발견하였다. 이에 대한 처리는 나중에 생각해보기로 하고, 디바이스에서 설정한 폰트가 애플리케이션에 적용 되는 기능을 제한할 예정이다. 디바이스 설정 이 글에서 말하는 디바이스 설정 부분이란 [ 설정 → 디스플레이 → 글자 크기와 스타일 ] 부분에 해당한다. 제한하는 방법 Text 컴포넌트의 allowFontScaling을 false로 강제 지정하면 가능하다. 프로젝트의 최상단인 App.js에 Text의 기본 속성을 정의해 준다. styled-components에도 동일하게 적용된다. import { Text, TextInput } from 'react-native'; // Text 적용 Text..
React-Native 2021. 12. 15. 21:14
이전 Prev 1 2 Next 다음