[React Native] WebView 사용 방법
2024. 6. 3. 17:20
프로그래밍/React Native
React Native에서 기본 웹 브라우저를 통해 URL 여는 방법React Native 모듈에서 제공하는 Linking을 사용하면 간단하게 구현 가능함https://carpet-part1.tistory.com/942 라는 사이트를 웹뷰로 열고 싶다면, Linking.openURL 사용해서 링크를 열어주면 됨 코드 예시import React from 'react';import { Button, Linking } from 'react-native';const Component = () => { const openWebView = () => { Linking.openURL('https://carpet-part1.tistory.com/942'); }; return ( );};export ..
[React Native Error] CocoaPods could not find compatible versions for pod "hermes-engine" 해결 방법
2024. 5. 28. 15:28
프로그래밍/React Native
오류Pod install 시 아래의 에러 발생CocoaPods could not find compatible versions for pod "hermes-engine" 원인CocoaPods에서 hermes-engine과 호환되는 버전을 찾지 못해서 발생 해결 방법ios 폴더에서 아래의 명령어 실행pod update hermes-engine --no-repo-update 명령어 실행 시 로컬에서 변경한 내용 적용됨
[React Native] Local Storage 대신 Async Storage 사용하기
2024. 5. 24. 22:24
프로그래밍/React Native
AsyncStorage란?React Native에서 LocalStorage 대신 사용하는 저장소비동기로 key-value 저장하여 사용함설치npm install @react-native-async-storage/async-storageORyarn add @react-native-async-storage/async-storage 사용 방법1. AsyncStorage를 호출하여 Key-Value를 저장 - AsyncStorage.setItem(key, value);2. AsyncStorage를 Key값으로 호출하여 Value 불러오기 - AsyncStorage.getItem(key);사용 시에는 항상 비동기 식으로 호출해야 함 예시 코드import AsyncStorage from '@react-native..
[React Native Error] Build failed. Entry name 'META-INF/androidx.legacy_legacy-support-v4.version' collided 오류 해결
2024. 5. 23. 14:45
프로그래밍/React Native
Error LogFAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:packageDebug'.> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade > Entry name 'META-INF/androidx.legacy_legacy-support-v4.version' collided 에러 발생 원인Android Studio에서 Genrate APK를 하는 경우 해당 에러가 발생함.해당 에러는 두 개 이상의 라이브러리가 동일한 파일을 포함하고 있어 충돌이 발생하는 상황임. 해결 ..
[React Native Error] Your Ruby version is 2.6.10, but your Gemfile specified 2.7.6
2023. 9. 18. 20:26
프로그래밍/React Native
Your Ruby version is 2.6.10, but your Gemfile specified 2.7.6 원인 맥에 기본적으로 루비가 깔려있는데, 그 버젼과 react-native에서 요구하는 루비 버젼이 다를 경우 에러 발생 해결 방법 아래 명령어 순서대로 입력 # brew 업데이트 brew update # ruby-build 설치 brew install ruby-build # rbenv 설치 brew install rbenv # rbenv 2.7.6 버전 설치 rbenv install 2.7.6 # 전역 설정 rbenv global 2.7.6 # 환경 변수 설정 echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc echo 'eval "$(rbenv..
[React Native Error] PLEASE REPORT: Excessive number of pending callbacks: 501
2023. 3. 21. 20:35
프로그래밍/React Native
PLEASE REPORT: Excessive number of pending callbacks: 501 나의 경우 Touchable 컴포넌트를 사용하면서 이러한 warning이 발생하였음 warning이기에 큰 문제가 아니라고 생각될 수 있으나 이러한 콜백이 계속 쌓이면 응용 프로그램의 성능이 저하되거나 동작이 중단될 수 있음 발생 원인 이 warning은 불필요한 콜백이 계속해서 호출되어 생성되는 에러임 해결 방법 해결법은 여러가지가 있고 나는 Touchable 대신 Pressable을 사용하여 문제를 해결함 그렇지만 아래와 같이 다양한 방법이 있음 1. 콜백 함수 내에서 setState()를 호출하지 말고, useRef()를 사용하여 변수를 업데이트 하기 2. 콜백 함수 내에서 비동기 작업이 발생하는..
[React Native] Pressable vs Touchable
2023. 3. 20. 20:34
프로그래밍/React Native
Pressable과 Touchable 공통점과 차이점 버튼과 같은 UI 요소를 만들 때 사용하는 컴포넌트 두 컴포넌트는 모두 터치 이벤트를 처리하며, 사용자의 버튼 클릭을 감지하는데 사용 공통점 모바일 앱에서 버튼과 같은 UI 요소를 만들 때 사용 터치 이벤트 처리 onPress나 onPressIn 등의 콜백 함수를 등록하여 터치 이벤트에 대한 동작을 처리할 수 있음 차이점 Pressable Touchable Pressable 컴포넌트 내부에서 발생하는 터치 이벤트에만 반응 여러 종류의 터치 이벤트를 처리 스타일 변경 가능 스타일 변경 불가 애니메이션 지원 애니메이션 지원 안함 결론적으로, Pressable은 스타일과 애니메이션을 지원하는 더 유연한 버튼 컴포넌트임 Touchable은 여러 종류의 터치 ..
[React Native] SafeAreaView 적용
2023. 3. 14. 21:22
프로그래밍/React Native
react-native-iphone-x-helper SafeAreaView를 위해 react-native-iphone-x-helper 설치하여 위 아래 영역 잡아주기 🚫 더이상 지원이 없을 예정이여서 react-native-safe-area-context로 대체 npm i react-native-iphone-x-helper --save # or yarn add react-native-iphone-x-helper --save react-native-safe-area-context 대체 라이브러리인 react-native-safe-area-context 설치 npm install react-native-safe-area-context # or yarn add react-native-safe-area-cont..