리엑트 네이티브 원형 진행 표시줄 컴포넌트 사용법

이 컴포넌트는 Kartikey Vaish가 개발한 React Native 라이브러리로, 애플리케이션에 원형 진행 표시줄을 구현할 수 있습니다. 아래는 이 라이브러리를 설정하고 사용하는 방법에 대한 상세 가이드입니다.

1. 프로젝트 구조 및 파일 설명

기본 프로젝트 구조는 다음과 같습니다:

├── assets                # 리소스 폴더
├── App.tsx               # 메인 앱 파일
├── CODE_OF_CONDUCT.md    # 행동 강령
├── CircularProgress.tsx   # 진동 원형 컴포넌트 소스 코드
├── LICENSE               # 라이선스 파일
├── README.md             # 컴포넌트 설명이 포함된 파일
├── app.json              # 앱 설정 파일
├── babel.config.js       # Babel 설정
├── index.js              # 프로젝트 진입점
├── package.json          # 의존성 및 메타데이터
└── tsconfig.json         # TypeScript 설정

App.tsx는 애플리케이션의 주요 진입점입니다.
CircularProgress.tsx에는 커스텀 원형 진행 표시줄 컴포넌트 소스 코드가 저장됩니다.
index.js는 프로젝트 시작 스크립트 또는 앱을 가져오는 데 사용됩니다.
package.json에는 프로젝트 의존성과 스크립트가 포함됩니다.
tsconfig.json은 TypeScript 컴파일 옵션을 설정하는 데 사용됩니다.

2. 메인 앱 파일 설명

App.tsx 파일은 메인 앱 파일로, 애플리케이션의 루트 컴포넌트와 CircularProgress 컴포넌트의 사용 예시를 포함할 수 있습니다. 다음은 파일의 기본 구조 예시입니다:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import CircleProgress from './CircularProgress';

const MainApp = () => {
  return (
    <View style={styles.container}>
      {/* 컴포넌트 사용 예시 */}
      <CircleProgress percentValue={60} />
      {/* 추가 컴포넌트 인스턴스 */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
});

export default MainApp;

위 코드에서 CircleProgress 컴포넌트를 가져와서 사용하는 방법을 볼 수 있습니다.

3. 설정 파일 설명

`app.json`

이 JSON 파일은 React Native 앱의 기본 속성(이름, 아이콘, 버전 등)을 구성하는 데 사용됩니다. Expo 프로젝트에서는 Expo SDK 버전 정보도 포함됩니다.

{
  "name": "YourAppName",
  "displayName": "원형 진행 표시줄 앱",
  "expo": {
    /* ... Expo 설정 정보 ... */
  }
}

`babel.config.js`

이 파일은 Babel 트랜스파일러를 구성하는 데 사용되며, 일반적으로 ES6+ 구문을 JavaScript ES5로 변환하여 이전 버전의 환경에서도 실행할 수 있도록 합니다. React Native 프로젝트에서는 기본 React Native 지원만 포함될 수 있습니다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

`tsconfig.json`

TypeScript 설정 파일로, 컴파일 옵션과 규칙을 지정합니다. 예를 들어, 대상 언어 버전, 소스 맵, 타입 검사 등을 설정할 수 있습니다.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["esnext", "dom"],
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

위 내용은 react-native-circular-progress 라이브러리의 기본 설명과 주요 파일 해설입니다. 이 라이브러리를 사용하려면 프로젝트 의존성을 설치하고 개발 환경을 설정한 후, React Native 앱에서 CircularProgress 컴포넌트를 가져와 사용하면 됩니다.

태그: React Native TypeScript UI Components Progress Bar Mobile Development

6월 13일 01:38에 게시됨

괴물 클럽

리엑트 네이티브 원형 진행 표시줄 컴포넌트 사용법