进度仪表

一个用于通过可视化指示器显示进度的 SwiftUI 进度仪表组件。

iOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

Expo UI Gauge 与官方 SwiftUI Gauge API 保持一致，并支持通过 gaugeStyle 修饰符设置样式。

安装

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.

用法

基本仪表

BasicGaugeExample.tsx

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

export default function BasicGaugeExample() {
  // 线性仪表会延伸至分配给它的宽度，因此需要为宿主指定尺寸。
  return (
    <Host style={{ flex: 1 }}>
      <Gauge value={0.5} />
    </Host>
  );
}

带标签

你可以将自定义组件作为 children 传入，为仪表添加标签。

LabelExample.tsx

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

export default function LabelExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Gauge value={0.7}>
        <Text>进度</Text>
      </Gauge>
    </Host>
  );
}

带数值标签

使用 currentValueLabel、minimumValueLabel 和 maximumValueLabel 属性来显示数值信息。

ValueLabelsExample.tsx

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

export default function ValueLabelsExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Gauge
        value={50}
        min={0}
        max={100}
        currentValueLabel={<Text>50%</Text>}
        minimumValueLabel={<Text>0</Text>}
        maximumValueLabel={<Text>100</Text>}>
        <Text>用量</Text>
      </Gauge>
    </Host>
  );
}

仪表样式

使用 gaugeStyle 修饰符更改仪表的外观。可用样式有：automatic、circular、circularCapacity、linear 和 linearCapacity。

GaugeStylesExample.tsx

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

export default function GaugeStylesExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={16}>
        <Text>圆形</Text>
        <Gauge value={0.5} modifiers={[gaugeStyle('circular')]}>
          <Text>圆形</Text>
        </Gauge>
        <Text>圆形容量</Text>
        <Gauge
          value={0.5}
          modifiers={[gaugeStyle('circularCapacity')]}>
          <Text>Circular Capacity</Text>
        </Gauge>
        <Text>线性</Text>
        <Gauge value={0.5} modifiers={[gaugeStyle('linear')]}>
          <Text>线性</Text>
        </Gauge>
        <Gauge
          value={0.5}
          modifiers={[gaugeStyle('linearCapacity')]}>
          <Text>Linear Capacity</Text>
        </Gauge>
      </VStack>
    </Host>
  );
}

彩色仪表

使用 tint 修饰符更改仪表的颜色。

TintedGaugeExample.tsx

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

export default function TintedGaugeExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={16}>
        <Gauge
          value={0.7}
          modifiers={[gaugeStyle('circular'), tint('green')]}
        />
        <Gauge
          value={0.3}
          modifiers={[gaugeStyle('linear'), tint('red')]}
        />
      </VStack>
    </Host>
  );
}

API

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

Component

`Gauge`

iOS

Type: React.Element<GaugeProps>

Renders a SwiftUI Gauge component.

GaugeProps

`children`

iOS

Optional • Type: ReactNode

A label describing the gauge's purpose.

`currentValueLabel`

iOS

Optional • Type: ReactNode

A label showing the current value. Use Text or Label to display the value.

`max`

iOS

Optional • Type: number • Default: 1

The maximum value of the gauge range.

`maximumValueLabel`

iOS

Optional • Type: ReactNode

A label showing the maximum value. Use Text or Label to display the value.

`min`

iOS

Optional • Type: number • Default: 0

The minimum value of the gauge range.

`minimumValueLabel`

iOS

Optional • Type: ReactNode

A label showing the minimum value. Use Text or Label to display the value.

`value`

iOS

Type: number

The current value of the gauge.

Inherited props

CommonViewModifierProps