hello! Mingure

가로로 슬라이딩 넘기면서, 각 컨텐츠 위치에서 살짝 멈추게끔(snap), 해당 컨텐츠 위치 불릿으로 나타내기   { const newPage = Math.round(e.nativeEvent.contentOffset.x / 203); setCurrentPage(newPage); }}> {cardList.map(card => ( ... ))}  우선, 가로로 슬라이딩 하면서 위에 효과를 구현하기 위해서는 ScrollView의 특정 옵션을 사용하면 된다.horizontal={true} : 가로로 슬라이딩으로 바꾸기showHorizo..

React Native로 메인 배너에서 상세 이벤트 배너로 이동 할 때 나오는 상세이미지가 깨지는 현상이 발생했다. React Native 의 컴포넌트는 내부에 com.facebook.fresco 라이브러리 의존성을 갖고 있다. Fresco 라이브러리는 Facebook에서 만든 안드로이드 용 이미지 라이브러리다. 이 라이브러리는 너비와 높이가 안드로이드 기기 해상도 보다 현저히 클 경우 이미지에 대해 자동으로 이미지 크기를 조절(다운샘플링) 한다. https://github.com/facebook/fresco/issues/2397 Low image quality using component on RN > = 0.57 (Fresco >= 1.10.0) · Issue #2397 · facebook/fresc..

React에서도 를 이용해서 라디오버튼을 만들 수 있다. 그러나 개발 상황에 따라 굳이 저 input radio를 사용하지 않고 내 마음대로 커스텀해서 사용하고 싶을 때가 있을 터. 그 때 사용하면 좋을 javascript를 소개하겠다. 나는 위에 두 이미지처럼 라디오 버튼 동그라미를 디자인을 커스텀 하거나, 버튼 형식처럼 하나씩 클릭되는 식으로 표현하고 싶었다. React 에서 state 로 option 명으로 하나씩 만든다면 만들 수는 있으나 너무나도 귀찮. import React from 'react'; import { View, Text, SafeAreaView, Pressable } from 'react-native'; import { CheckBox } from '@shared/componen..

공식 문서에서는 useIsFocused를 이렇게 소개하고 있다. https://reactnavigation.org/docs/use-is-focused/ reactnavigation.org 화면의 포커스 상태에 따라 다른 콘텐츠를 랜더링 하고 싶을 때, useIsFocused Hook 을 사용한다. 이 훅을 사용하면, 초점이 변경될 때 화면에 대한 리랜더링을 시키는 트리거가 된다. 공식문서만 봐서는 사실 이게 무슨말인지 정확하게 이해하는데 시간이 좀 걸렸다. 공식문서를 바탕으로 이 내용을 간단하게 생각해보자. 우선, 이 useIsFocused 가 사용된 screen 에서 이 값은 항상 true 이다. import { useIsFocused } from '@react-navigation/native'; fu..

리액트네이티브의 장점, 안드로이드와 IOS 둘 다 동시에 개발이 가능하다는 점! 그러나 안드로이드와 IOS의 큰 차이점이 있으니, 그것은 바로 하단에 뒤로가기 버튼! IOS와 다르게 안드로이드는 하단에 네비게이션바가 있어 자체적으로 뒤로가기 버튼을 누를 수 있다. 그렇다는 것은, 아래 이미지와 같이 우리가 만들려는 RN 앱에서 사용할 헤더 뒤로가기 버튼에 특정 이벤트가 걸려있는 경우에는 헤더 뒤로가기를 누르는게 아닌, 안드로이드 자체 뒤로가기를 누를때 뒤로가는 액션에 대한 특정 이벤트가 적용이 안된다. 예를들어, 헤더 < 뒤로가기를 누르면 '회원가입을 그만두시겠습니까?'와 같은 안내 모달창이 뜬다고 가정해보자. 헤더 < 아이콘 뒤로가기를 누르면 안내 모달창이 뜨겠지만, 안드로이드에서 자체 네비게이션 바 ..

앱 처음 켜질 때 나타나는 랜딩페이지 같은게 splash screen 이다. 안드로이드와 IOS 각각 세팅해야한다. 그리고, 리네가 0.70으로 업데이트 되면서 또 기존 블로그 내용과 달라지는 부분도 있어서 해당 부분은 내 다른 포스팅 참고하면 된다. https://hellomingure.tistory.com/32 [React Native] SplashScreen 에러 : MainActivityDelegate cannot be converted to Activity SplashScreen.show(this); 이번 리네 프로젝트 Splash Screen 작업하다가 발견한 이슈. 이 전 프로젝트에서 쓰던대로 그대로 splash screen 설치해서 작업하는데................ yarn add e..

기본 컴포넌트 Image 네트워크 이미지, 정적 리소스, 임시 로컬 이미지 및 카메라 롤과 같은 로컬 디스크의 이미지를 포함하여 다양한 유형의 이미지를 표시하기 위한 React 구성 요소입니다. android/app/build.gradle 에 아래 코드 추가하면 Gif나 WebP도 이 기본 Image 컴포넌트로 사용 가능합니다. dependencies { // If your app supports Android versions before Ice Cream Sandwich (API level 14) implementation 'com.facebook.fresco:animated-base-support:1.3.0' // For animated GIF support implementation 'com.fac..

이번 리네 프로젝트 Splash Screen 작업하다가 발견한 이슈. 이 전 프로젝트에서 쓰던대로 그대로 splash screen 설치해서 작업하는데................ yarn add eact-native-splash-screen https://github.com/crazycodeboy/react-native-splash-screen GitHub - crazycodeboy/react-native-splash-screen: A splash screen for react-native, hide when application loaded ,it works on iO A splash screen for react-native, hide when application loaded ,it works on..

https://github.com/facebook/react-native/issues/35210 [READ ME] [FIX INSIDE] Android build failures happening since Nov 4th 2022 · Issue #35210 · facebook/react-native Description Hey all, I'd like to share an update on a series of build failures React Native & Expo users have been experiencing when building Android apps starting from November 4th 2022. W... github.com 2022년 11월 4일 기준 React Nati..

Build target FBRectNativeSpec Project Pods | Configuration Debug | Destination deviceName | SDK iOS 15.4 Run custom shell script '[CP-User] Generate Specs' Command PahseScriptExecution failed with a nonzero exit code 참 내 이런 Xcode build failed issue 는 정확한 에러메시지를 뱉어내지를 않는다ㅣ. Command PahseScriptExecution failed with a nonzero exit code 이 에러가 앱이 빌드가 되면서 스크립트 돌다가 어떤 이슈에서 return 되면서 뱉어내는 값이 0이 아닌 값이여서..

하,,,, 개발하다가 뜬금없이 yarn이나 yarn install 다 안먹히고 error An unexpected error occurred: "Invalid number of spaces". 이런 에러가 뜬다...! 면 아마 yarn-error.log 이런 파일이 생겼을 것이다. 그럼 바로 삭제 갈기시오. yarn-error.log package-lock.json yarn.lock 이거 3개 삭제하고 yarn 다시 하면 해결!

지난 시간에는 Expo 를 이용하여 React Native 프로젝트를 만드는 법을 포스팅했다. 이번에는 React-Native-Cli 를 활용하여 RN 프로젝트 만드는 법을 다뤄보려고 한다. React-Naitve-Cli를 install 하기 앞서 먼저 확인해야 할 것들이 있다. 1번만 잘 준비된다면 프로젝트 설치하고 키는것은 아주 간단하귀! 1. React Native Cli 설치 준비하기 해당 하는 것들이 모두 잘 설치되어있는지 확인하기! 없으면 다른 포스팅 참고하여 모두 설치해주세여 brew -v //맥북 유저라면! watchman -v //맥북 유저라면! pod -v //맥북 유저라면! node -v npm -v yarn -v java -v javac -v 2. React Native Cli 설치..