코드로 대화하기

React Native에서 이미지 경로를 동적으로 제어하는 방법을 알아보겠습니다. React처럼 src안에서 분기처리는 불가능합니다. // 잘못된 방법 방법 1. js 상단에 이미지 경로를 변수에 담은 후 넣는 방법입니다. // app.js const icon = require('./img/icon.png'); const activeIcon = require('./img/activeIcon.png'); ... 방법 2. 이미지 경로를 위한 js파일을 만들어 사용합니다. 확장성이 좋고 나중에 유지보수/추가개발을 할때도 좋아 저는 이 방법을 자주 사용합니다. // iconPath.js export const iconPath = { icon: require("./img/icon.png"), activeIcon..

You specified `onScroll` on a but not `scrollEventThrottle`. You will only receive one event. Using `16` you get all the events but be aware that it may cause frame drops, use a bigger number if you don't need as much precision. IOS에서 RN 개발을 하다보면 ScrollView 사용 시 위와 같은 로그가 계속 뜰때가 있습니다. 에서 onScroll 이벤트를 사용하는데 scrollEventThrottle을 정의하지 않아서 나는 것입니다. scrollEventThrottle란 스크롤하는 동안 스크롤 이벤트가 발생하는 빈도를 제어..

안녕하세요! 오늘은 저번 무한스크롤과 measure()에서 정리한 내용을 토대로 역무한스크롤을 구현해 보겠습니다. 역무한스크롤이란 아래에서 시작하여 위로 향하는 무한 스크롤을 의미합니다. 제가 지은 이름이라 정식 명칭은 다를 수도 있습니다. 이 기능은 주로 채팅에서 사용하였습니다. 이 기능의 핵심은 스크롤이 맨 끝에 갔을 때 콘텐츠의 사이즈가 늘어나도 스크롤 값을 기억하는 것입니다. 시작 // reverseInfinityScroll.js import React, { useRef, useState } from 'react'; import { ScrollView, View } from 'react-native'; const R_InfinityScroll = ({children, onScrollEnd}) =>..

개발을 하다 보면 x, y좌표나 콘텐츠의 사이즈를 구해야 할 때가 있습니다. 그럴 때는 measure, measureInWindow, measureLayout을 사용하시면 됩니다. 각 함수들의 정의부터 살펴본 후 코드와 이미지로 설명 이어가겠습니다. measure(callback) boxRef.current.measure((x, y, width, height, pageX, pageY)=> {}) 콜백 함수는 x, y, width, height, pageX, pageY를 인자로 받습니다. x, y -> 자신의 부모 기준으로 x, y 좌표를 가져옵니다. width, height -> 가로, 세로를 길이를 가져옵니다. pageX, pageY -> 화면상의 x , y 절대 좌표를 가져옵니다. measureInW..

React Native에서 무한스크롤을 구현해보겠습니다. const [isUpdateList, setIsUpdateList] = useState(true); const onScrollList = async (e) => { if(!isUpdateList){return} // 현재 스크롤 값 let updateScroll = e.nativeEvent.contentOffset.y; if(updateScroll == 0){return} // 현재 보여지는 화면 높이 let screenHeight = e.nativeEvent.layoutMeasurement.height; // 전체 문서의 높이 let documentHeight = e.nativeEvent.contentSize.height; // 원하는 로직을 시..

attempt to invoke interface method 'boolean com.swmansion... 안드로이드쪽에서 나는 오류입니다. 해결 android / app / build.gradle project.ext.react = [ enableHermes: true //

React Native로 만든 앱을 실제 핸드폰에 빌드하고싶어 xcode에서 빌드를 하였는데 에러가 났습니다. "signing for requires a development team. Select a development team in the Signing & Capabilities editor." 개발자의 서명이 필요해서 나는 오류입니다. 해결 1. Xcode -> Preferences 접근 2. Accounts - Apple ID 등록 3. Signing & Capabilities 에서 Team 선택 이러면 해결됩니다! 하지만 저는 오류가 하나 더 있었습니다... Failed to register bunle identifier General에 있는 Bundle Identifier를 고유한 문자열로 ..

안녕하세요! React Native Navigation 사용법을 알아보겠습니다. 보통 React에서는 페이지 이동 시 href 혹은 router로 제어하지만 RN에서는 navigation으로 제어합니다. 설치 npm install @react-navigation/stack @react-navigation/bottom-tabs 설치 후 오류가 난다면 아래 주소를 참고해주세요. https://talkwithcode.tistory.com/category/React%20Native%20Error 'React Native Error' 카테고리의 글 목록 talkwithcode.tistory.com 구조 잡기 저는 주로 Stack Navigator와 Bottom Tab Navigator를 혼합하여 사용하고 있습니다..

오늘은 RN에서 이미지를 서버에 보내는 방법을 알아보겠습니다. 먼저 기기 안에서 이미지를 가져오기 위해 라이브러리를 사용합니다. react-native-image-crop-picker Select single or multiple images, with cropping option www.npmjs.com ImagePicker로 가져온 이미지 데이터를 아래 obj 형태로 만들어 그대로 서버에 넘기면 끝입니다. :) import ImagePicker from 'react-native-image-crop-picker'; ImagePicker.openPicker({ multiple: false ,mediaType:'photo', compressImageQuality : 0.6}).then(images => {..

React Native(RN) 기초에 대해 알아보겠습니다. Styling CSS를 설정할 때 object의 namespace를 이용힙니다. 각 스타일의 속성의 구분은 ; 가 아닌 , 로 구분합니다. 스타일 속성 명의 구분은 -이 아닌 대문자로 구분합니다. (font-weight -> fontWeight) 'px', 'em' 등의 단위는 사용하지 않습니다. -> '%', 'rem' 을 사용합니다 bigBlue: { color: 'blue', fontWeight: 'bold', fontSize: 30, } 축약형이 존재하지 않습니다. 대신 상하, 좌우 값을 한 번에 조정할 수 있습니다. item: { marginVertical: "0rem", marginBottom: "4rem", marginLeft: "6..