이번 글에서는 Expo와 Gluestack UI를 활용하여 효율적으로 UI를 설계하는 방법을 소개합니다.
기본적인 프로젝트 설정부터 Gluestack UI 컴포넌트를 활용한 실질적인 코드 작성까지 단계별로 설명합니다.
1. Expo 프로젝트 생성하기
먼저 Expo 프로젝트를 생성합니다. Expo CLI를 설치한 후 아래 명령어를 실행하세요:
npx create-expo-app my-project
이 명령어는 기본적인 Expo 프로젝트를 생성합니다. 프로젝트 생성 및 기본적인 설정 방법은 이전 글을 참고하세요.
2. Gluestack UI 설정하기
Gluestack UI 초기화
Gluestack UI는 다양한 React Native 컴포넌트를 제공하는 라이브러리입니다. 초기화를 위해 아래 명령어를 실행하세요:
npx gluestack-ui init
이 명령어는 Gluestack UI를 프로젝트에 추가하고, 기본적인 설정 파일을 생성합니다.
3. Gluestack UI 컴포넌트 다운로드
Gluestack UI는 다양한 UI 컴포넌트를 제공합니다. 모든 컴포넌트를 다운로드하려면 아래 명령어를 실행하세요:
npx gluestack-ui add --all
이 명령어는 Box, Button, Textarea 등 모든 Gluestack UI 컴포넌트를 프로젝트에 추가합니다.
4. 코드 예제로 배우기
이제 Gluestack UI의 주요 컴포넌트를 사용하여 간단한 화면을 만들어봅시다.
아래 코드는 박스(Box), 텍스트 입력(Textarea), 그리고 **버튼(Button)**을 사용하는 예제입니다.
import { Image, StyleSheet, Platform, Text } from 'react-native';
import ParallaxScrollView from '@/components/ParallaxScrollView'; // Parallax 효과를 위한 컴포넌트
import { Box } from "@/components/ui/box"; // 박스 레이아웃
import { Textarea, TextareaInput } from "@/components/ui/textarea"; // 텍스트 입력 컴포넌트
import { Button, ButtonText } from "@/components/ui/button"; // 버튼 컴포넌트
export default function HomeScreen() {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerImage={
<Image
source={require('@/assets/images/partial-react-logo.png')}
style={styles.reactLogo}
/>
}
>
{/* 1. Box 컴포넌트 */}
<Box className="bg-gray-200 p-4 rounded-lg mt-4 h-96 flex justify-center items-center">
<Text className="text-typography-900 text-center">
This is a styled Box component!
</Text>
</Box>
{/* 2. Textarea 컴포넌트 */}
<Textarea
size="xl"
isReadOnly={false}
isInvalid={false}
isDisabled={false}
className="w-128"
>
<TextareaInput placeholder="Your text goes here..." />
</Textarea>
{/* 3. Button 컴포넌트 */}
<Button size="md" variant="outline" action="primary">
<ButtonText>Hello World!</ButtonText>
</Button>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
});
1) Box 컴포넌트
Box는 레이아웃을 구성하는 기본 요소로, Tailwind CSS 스타일을 지원합니다.
<Box className="bg-gray-200 p-4 rounded-lg mt-4 h-96 flex justify-center items-center">
<Text className="text-typography-900 text-center">
This is a styled Box component!
</Text>
</Box>
주요 클래스
bg-gray-200: 연한 회색 배경.
p-4: 16px 내부 패딩.
rounded-lg: 모서리를 둥글게 처리.
h-96: 384px 높이.
flex justify-center items-center: 중앙 정렬.
2) Textarea 컴포넌트
Textarea는 다중 줄 텍스트 입력을 위한 컴포넌트입니다.
<Textarea size="xl" isReadOnly={false} isInvalid={false} isDisabled={false} className="w-128" >
<TextareaInput placeholder="Your text goes here..." /> </Textarea>
size="xl": 입력 필드 크기.
isReadOnly: 읽기 전용 여부.
isInvalid: 유효하지 않은 상태 표시.
isDisabled: 비활성화 여부.
className="w-128": 너비를 32rem(512px)로 설정
.
3) Button 컴포넌트
Button은 클릭 가능한 버튼을 생성합니다.
<Button size="md" variant="outline" action="primary"> <ButtonText>Hello World!</ButtonText> </Button>
size="md": 중간 크기 버튼.
variant="outline": 아웃라인 스타일.
action="primary": 주요 액션 버튼.
5. 정리
<'RN Template' 카테고리의 다른 글
| Tabs.Navigator와 Tabs.Screen 차이 (0) | 2025.01.09 |
|---|---|
| Expo Router에서 탭 네비게이션 설정하기 (0) | 2025.01.03 |
| Expo로 React Native 앱 시작하기: 간단 가이드 (0) | 2025.01.03 |