기술 블로그

React Native 앱을 개발하다 보면 하단 탭 네비게이션을 구현할 일이 많은데요. 이번에는 React Navigation의 Bottom Tab Navigator에서 탭 아이콘이 어떻게 동작하는지 자세히 살펴보려고 합니다.기본 구현 방식Bottom Tab Navigator에서 각 탭의 아이콘은 다음과 같이 구현됩니다: ( ), }}/>여기서 주목할 점은 tabBarIcon이 함수라는 것입니다. 이 함수는 color와 size 두 가지 파라미터를 받아서 아이콘 컴포넌트를 반환합니다.색상 처리 방식탭 아이콘의 색상은 탭의 활성화 상태에 따라 자동으로 변경됩니다. 이는 Navigator 설정에서 정의한 색상값을 기반으로 동작합니다:React Navigation은 내부적으로 현재 선택된 탭..

React Native에서 키보드 어보이딩(Keyboard Avoiding) 최적화하기모바일 환경에서는 텍스트 입력을 받을 때 키보드가 화면을 가리는 문제가 자주 발생한다. 특히 React Native에서는 TextInput을 사용할 때 이 문제를 해결하기 위해 여러 접근 방식을 고려해야 한다. 이번 글에서는 키보드 어보이딩을 효과적으로 적용하는 방법을 정리해 본다.1. KeyboardAvoidingView 사용하기React Native에서 기본적으로 제공하는 KeyboardAvoidingView를 활용하면 키보드가 나타날 때 자동으로 레이아웃을 조정할 수 있다.import React, { useState } from 'react';import { View, TextInput, Button, Keyboa..