► React Native
-
[React Native] 이미지 비율 유지하면서, 사이즈 조절하는 방법► React Native/개발일기 2025. 6. 2. 21:39
이슈사항웹 react와 다르게 react-native에서는 알아서 이미지 비율에 맞게 화면에 구현이되지 않는다.따라서 이미지크기를 알아내고, 약간의 산술을 통해 비율을 구하여, 이미지사이즈를 조절해주어야한다. 해결방법 1. 이미지의 크기를 알아낸다. Image.getSize() 메소드를 활용하면 된다.import { Image } from 'react-native';Image.getSize(이미지경로, (w, h) => {//w, h => w는 이미지의 width / h는 이미지의 height를 알아낸다 ... }); 2. 화면너비와 이미지너비의 비율을 산술하여, 화면사이즈에 맞게 조정하면된다. Dimensions.get('window') 메소드를 활용하면 된다import { Dimensions } ..
-
[React Native_에러해결]Error: npm install exited with non-zero code: 1► React Native/개발일기 2024. 7. 15. 18:40
react native 공식사이트에서 제공하는 명령어를 따라쓰고 새로운 expo CLI 프로젝트를 시작하려고 한다. rn 공식링크: https://reactnative.dev/docs/environment-setup Get Started with React Native · React NativeReact Native allows developers who know React to create native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.reactnative.dev 공식문서에서는 아래의 명령어로 ..
-
[React Native] useRef_ 화면 재입장시 스크롤 최상단으로 이동하는 기능► React Native 2024. 6. 26. 20:59
1. 에러발생상태 홈화면에서 A화면으로 이동하면, A화면에 스크롤뷰로 엄청난 양의 리스트가 나타난다.스크롤로 주르륵- 내려가다 A화면을 나왔다 다시들어갔는데, 스크롤이 내려가 있는 상태로 유지되어 다시 올라오기가 번거로웠다. 2. useRef 활용하여 해결useRef를 활용하여, A화면으로 재입장시 스크롤이 최상단에 유지되게 하고싶다 ▼ 코드import { useRef } from 'react';const AScreen = ({ navigation }) => { const scrollToTop = useRef(); useEffect(() => { if (navigateA) { scrollToTop.current.scrollTo({ x: 0, y: 0, animated: true });..
-
[React Native]'안드로이드 앨법접근' 에러해결► React Native/개발일기 2024. 3. 1. 07:02
1. 에러발생상태 안드로이드 api33 업데이트후 (모든 적절한 퍼미션은 적용함), 카메라접근은 되는데 앨범접근이 안된다!!! 앨범 버튼을 터치하면, 화면상에서는 아무 반응이 없어서, 버튼이 안 눌리는듯한 느낌이 들고 콘솔창에는 아래와 같은 에러가 난다. ▼ 에러문구 Possible Unhandled Promise Rejection (id: 3): Error: User cancelled image selection 2. 해결방법 회사에서 여러개의 앱을 운영하고있는데, 그 중에 앨범작동이 멀쩡하게 잘되는 앱이있어서 해당 앨범기능 라이브러리 버전을 확인해 보았다. 정상작동하는 앨범라이브러리 버전: 0.31.1v 작동안하는 앨범라이브러리버전: ^0.38.0v 그래서 버전을 맞춰줘봤다. ▼ 특정버전 라이브러리 ..
-
[React Native]'Xcode 시뮬레이터' 에러해결► React Native/개발일기 2024. 2. 19. 23:54
에러발생상태 맥북 M1 air를 사용중인데, 용량이 딸려서 Xcode를 지우고 재설치했더니 에러가나면서 시뮬레이터를 작동할 수가 없게되었다. ▼ 에러문구 The file "XCBBuildService" doesn't exist. ▼ 에러이미지 해결방법 간단하다. 1. 꽉찬 맥북 저장용량을 줄여준다. 그리고 콜드재부팅(맥북 껏켜) ( 용량확인하는법: 맥북상단탭> 시스템설정> 일반> 저장 공간 ) 2. 상단 우측에 Get을 클릭해서 시뮬레이터 디바이스를 다운받는다 (오래걸림) 해결완료 그러타. 노트북에 저장용량이 부족해서 Xcode는 용케 다운받았지만, 시뮬레이터 디바이스는 다운받지 못한것이여땁 ㅜㅜㅜ 용량 만드느라 두세시간걸림.... 파일들을 계속 걸러서 삭제했는데 용량이 이상하게 안줄어서 껏켜했더니 훅 ..
-
[React Native]'yarn android' 에러해결► React Native/개발일기 2024. 2. 18. 22:21
에러발생상태 아래의 세가지 라이브러리를 설치후 에러가 발생하였다. 1. @react-navigation/drawer 2. react-native-gesture-handler 3. react-native-reanimated ▼에러문구 ..... ERROR Error: [Reanimated] Failed to create a worklet. ..... ERROR Error: Requiring module "node_modules/react-native-reanimated/src/reanimated2/core.ts", which threw an exception: Error: [Reanimated] Failed to create a worklet. ..... ERROR TypeError: Cannot read..
-
[React Native]'yarn android' 에러해결► React Native/개발일기 2024. 2. 16. 21:26
에러발생상태 멀쩡히 공부하다가 갑자기 yarn android 명령어가 에러난다.. ios시뮬레이터는 멀쩡히되는데, 안드로이드 에뮬레이터가 말썽이다 가만보자.. 내가 최근에 무얼했더라? AsyncStorage와 네비게이션을 공부중이였다. 3가지 라이브러리를 설치하였다. 그래서 그런가 ..?; 1. AsyncStorage 2. @react-navigation/native 3. react-native-screens react-native-safe-area-context ▼ 에러문구 error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/env..
-
[React Native]'npx react-native run-android' 에러해결► React Native/개발일기 2024. 2. 14. 20:02
에러발생상태 안드로이드 에뮬레이터를 실행하려고 명령어 % npx react-native run-android를 실행하였더니, 아래의 에러문구가 발생하였다. ▼ 에러문구 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: INSTALL_FAILED_INVALID_APK: Package couldn't be installed in /data/app/com.daramapp-VOctw-F0HAhfuLMoeYyNxA==:..