CircularProgress

Expo UI CircularProgress 与官方 Jetpack Compose Progress Indicator API 相匹配，并以圆形格式显示进度。

🌐 Expo UI CircularProgress matches the official Jetpack Compose Progress Indicator API and displays progress in a circular format.

安装

🌐 Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

🌐 Usage

不确定的进展

🌐 Indeterminate progress

当未提供 progress 时，进度指示器会显示不确定的旋转动画。

🌐 When no progress is provided, the progress indicator displays an indeterminate spinning animation.

import { Host, CircularProgress } from '@expo/ui/jetpack-compose';

export default function IndeterminateCircularExample() {
  return (
    <Host matchContents>
      <CircularProgress />
    </Host>
  );
}

确定的进展

🌐 Determinate progress

提供一个介于 0 和 1 之间的 progress 值以显示确定进度。

🌐 Provide a progress value between 0 and 1 to show determinate progress.

import { Host, CircularProgress } from '@expo/ui/jetpack-compose';

export default function DeterminateCircularExample() {
  return (
    <Host matchContents>
      <CircularProgress progress={0.75} />
    </Host>
  );
}

波浪式进展

🌐 Wavy progress

CircularWavyProgress 渲染一个带有波浪动画风格的圆形进度指示器。

import { Host, CircularWavyProgress } from '@expo/ui/jetpack-compose';

export default function CircularWavyExample() {
  return (
    <Host matchContents>
      <CircularWavyProgress progress={0.6} />
    </Host>
  );
}

应用接口

🌐 API

import { CircularProgress, CircularWavyProgress } from '@expo/ui/jetpack-compose';

Components

Types

Components

Types