ProgressView

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

iOS

tvOS

Bundled version:

~55.0.2

Expo UI ProgressView 与官方 SwiftUI ProgressView API 一致，并支持通过 progressViewStyle 修饰符进行样式设置。

🌐 Expo UI ProgressView matches the official SwiftUI ProgressView API and supports styling via the progressViewStyle modifier.

安装

🌐 Installation

Terminal

- npx expo install @expo/ui

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

用法

🌐 Usage

注意：当使用 linear 样式（这是确定进度的默认样式）时，ProgressView 是一个可灵活调整宽度的组件，它会扩展以填充可用的水平空间。当在 Host 上使用 matchContents 时，应该在 ProgressView 上应用 frame 修饰符以给它设置一个明确的宽度。或者，使用 style（例如 style={{ width: 300 }} 或 style={{ flex: 1 }}）给 Host 设置一个明确的尺寸。circular 样式和不确定加载器具有固定大小，并且可以与 matchContents 一起使用。

不确定的进展

🌐 Indeterminate progress

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

🌐 When no value is provided, the progress view displays an indeterminate indicator (spinner).

IndeterminateExample.tsx

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

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

确定的进展

🌐 Determinate progress

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

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

DeterminateExample.tsx

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

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

进度视图样式

🌐 Progress view styles

使用 progressViewStyle 修改器来改变进度视图的外观。可用的样式有：automatic、linear 和 circular。

🌐 Use the progressViewStyle modifier to change the progress view's appearance. Available styles are: automatic, linear, and circular.

ProgressViewStylesExample.tsx

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

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

带标签

🌐 With label

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

🌐 You can pass custom components as children to provide a label for the progress view.

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>
  );
}

有色进度视图

🌐 Tinted progress view

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

🌐 Use the tint modifier to change the progress view's color.

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>
  );
}

基于计时器的进度

🌐 Timer-based progress

使用 timerInterval 属性可以创建一个在时间范围内自动动画的进度视图。这对于显示倒计时计时器或定时操作非常有用。

🌐 Use the timerInterval prop to create a progress view that automatically animates over a time range. This is useful for showing countdown timers or timed operations.

注意：基于计时器的进度仅在 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: React.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

Types

`ClosedRangeDate`

iOS

tvOS

Property	Type	Description
lower	`Date`	-
upper	`Date`	-