코드로 대화하기

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..

안녕하세요! 오늘은 저번 무한스크롤과 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; // 원하는 로직을 시..

스크린 간 이동하는 방법과 데이터를 넘기는 방법을 다루겠습니다. 제 내비게이터 구조는 아래와 같습니다. Stack navigator Intro Tab navigator Home List Chat MyPage Intro -> Tab 같은 depths에 있는 intro에서 tab으로 이동하는 방법입니다. // intro.js import { useNavigation } from '@react-navigation/native'; ... const navigation = useNavigation(); // 함수 호출 시 탭으로 이동 const onPressMoveTab = () => { navigation.navigate( "Tab", {userName:"sjh"}, ); } navigate안에 스크린 이름과 ..

안녕하세요! 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 => {..

개념 웹뷰(Webview)란 앱에서 웹 화면을 띄우는 것을 말합니다. 앱 특성 상 웹보다 한계가 많기 때문에 개발을 하다 보면 종종 사용합니다. 또한 웹앱을 만들때로 사용합니다. 설치 npm install react-native-webview 활용 앱은 RN, 웹은 React를 활용하여 보여드리겠습니다. RN 쪽 코드입니다. import 한 WebView 컴포넌트를 return 문안에 사용합니다. onMessage={}를 통하여 웹뷰에서 보내는 데이터를 받습니다. source={}는 웹 경로를 적는 곳입니다. localhost일 경우 자신의 ip를 적습니다. (같은 네트워크를 사용해야 합니다.) ex) http://localhost:3000 -> http://000.00.0.00:3000 import R..

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..