ProgressView

一个用于显示进度指示器的 SwiftUI ProgressView 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

Expo UI ProgressView 与官方 SwiftUI ProgressView API 相匹配，并支持通过 progressViewStyle 修饰符设置样式。

安装

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

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

用法

注意：使用 linear 样式（这是确定进度的默认样式）时，ProgressView 是一个宽度灵活的组件，会扩展以填满可用的水平空间。对 Host 使用 matchContents 时，应对 ProgressView 应用 frame 修饰符，为其指定明确的宽度。或者，使用 style 为 Host 指定明确的尺寸（例如，style={{ width: 300 }} 或 style={{ flex: 1 }}）。circular 样式和不确定进度指示器的尺寸固定，可与 matchContents 搭配使用。

不确定进度

未提供 value 时，进度视图会显示不确定进度指示器（旋转指示器）。

IndeterminateExample.tsx

import { Host, ProgressView } from '@expo/ui/swift-ui';

export default function IndeterminateExample() {
  return (
    <Host matchContents>
      <ProgressView />
    </Host>
  );
}

确定进度

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

DeterminateExample.tsx

import { Host, ProgressView } from '@expo/ui/swift-ui';

export default function DeterminateExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ProgressView value={0.5} />
    </Host>
  );
}

进度视图样式

使用 progressViewStyle 修饰符更改进度视图的外观。可用样式包括：automatic、linear 和 circular。

ProgressViewStylesExample.tsx

import {
  Host,
  ProgressView,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import { progressViewStyle } from '@expo/ui/swift-ui/modifiers';

export default function ProgressViewStylesExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={16}>
        <Text>Linear</Text>
        <ProgressView
          value={0.5}
          modifiers={[progressViewStyle('linear')]}
        />
        <Text>Circular</Text>
        <ProgressView
          value={0.5}
          modifiers={[progressViewStyle('circular')]}
        />
      </VStack>
    </Host>
  );
}

带标签

你可以将自定义组件作为 children 传入，为进度视图提供标签。

LabelExample.tsx

import { Host, ProgressView, Text } from '@expo/ui/swift-ui';

export default function LabelExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ProgressView value={0.25}>
        <Text>Loading...</Text>
      </ProgressView>
    </Host>
  );
}

着色进度视图

使用 tint 修饰符更改进度视图的颜色。

TintedExample.tsx

import { Host, ProgressView } from '@expo/ui/swift-ui';
import { tint } from '@expo/ui/swift-ui/modifiers';

export default function TintedExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ProgressView value={0.7} modifiers={[tint('red')]} />
    </Host>
  );
}

基于计时器的进度

使用 timerInterval 属性创建一个会在指定时间范围内自动播放动画的进度视图。这适用于显示倒计时或定时操作。

注意：基于计时器的进度仅适用于 iOS 16+ 和 tvOS 16+。

TimerExample.tsx

import {
  Host,
  ProgressView,
  Text,
  VStack,
} from '@expo/ui/swift-ui';

export default function TimerExample() {
  const startDate = new Date();
  const endDate = new Date(Date.now() + 10000); // 10 seconds from now

  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={16}>
        <ProgressView
          timerInterval={{ lower: startDate, upper: endDate }}
        />
        <ProgressView
          timerInterval={{ lower: startDate, upper: endDate }}
          countsDown={false}>
          <Text>Counting up</Text>
        </ProgressView>
      </VStack>
    </Host>
  );
}

API

import { ProgressView } from '@expo/ui/swift-ui';

Component

`ProgressView`

iOS

tvOS

Type: React.Element<ProgressViewProps>

Renders a SwiftUI ProgressView component.

ProgressViewProps

`children`

iOS

tvOS

Optional • Type: ReactNode

A label describing the progress view's purpose.

`countsDown`

iOS 16.0+

tvOS 16.0+

Optional • Type: boolean • Default: true

A Boolean value that determines whether the view empties or fills as time passes. If true, which is the default, the view empties.

`timerInterval`

iOS 16.0+

tvOS 16.0+

Optional • Type: ClosedRangeDate

The lower and upper bounds for automatic timer progress.

`value`

iOS

tvOS

Optional • Literal type: union

The current progress value. A value between 0 and 1. When undefined, the progress view displays an indeterminate indicator.

Acceptable values are: number | null

Inherited props

CommonViewModifierProps