ProgressBar(진행 표시줄)는 사용자에게 콘텐츠가 곧 제공될 것임을 시각적으로 알려주는 UI 컴포넌트입니다. 서버에 데이터를 전송한 후 응답을 기다리는 동안 로딩 상태를 표시할 때 특히 유용하게 활용됩니다.
react-native-paper 설치하기
ProgressBar 컴포넌트를 사용하려면 먼저 react-native-paper 모듈을 npm으로 설치해야 합니다. 아래 명령어를 실행하세요.
npm install --save-dev react-native-paper
ProgressBar 기본 문법
프로그레스 바의 기본적인 컴포넌트 구조는 다음과 같습니다.
<ProgressBar progress={progress_number} color="progresscolorbar" />ProgressBar를 사용하려면 react-native-paper에서 다음과 같이 임포트해야 합니다.
import { ProgressBar } from 'react-native-paper';ProgressBar의 주요 Props
ProgressBar에서 자주 사용되는 주요 속성(props)은 다음과 같습니다.
| 번호 | Props 및 설명 |
|---|---|
| 1 | progress 진행률을 나타내는 값으로 0부터 1 사이의 숫자를 입력합니다. 예를 들어 0.5는 50% 진행 상태를 의미합니다. |
| 2 | color 진행 표시줄의 색상을 지정합니다. |
| 3 | visible true/false 값을 가지며, 진행 표시줄을 보이거나 숨길 때 사용합니다. |
| 4 | style 진행 표시줄에 적용할 스타일을 지정합니다. |
예제: ProgressBar 화면에 표시하기
프로그레스 바를 화면에 표시하는 방법은 매우 간단합니다. 먼저 react-native-paper에서 ProgressBar를 임포트합니다.
import { ProgressBar } from 'react-native-paper';다음은 진행 표시줄을 화면에 띄우는 코드입니다.
<ProgressBar style={{ marginTop:200 }} progress={0.5} color="#00BCD4" />위 예제에서 progress 값은 0.5로 설정되어 있으며, 이는 전체 작업의 50%가 진행되었음을 나타냅니다. 값은 0부터 1 사이에서 조절할 수 있습니다.
import * as React from 'react';
import { ProgressBar } from 'react-native-paper';
const MyComponent = () => (
<ProgressBar style={{ marginTop:200 }} progress={0.5} color="#00BCD4" />
);
export default MyComponent;실행 결과
코드를 실행하면 화면 중앙 부근에 청록색(#00BCD4) 진행 표시줄이 나타나며, 50%만큼 채워진 상태로 표시됩니다.
