仪表

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

iOS

Included in Expo Go

Recommended version:

~57.0.22

Expo UI Gauge 与官方的 SwiftUI Gauge API 相匹配，并支持通过 gaugeStyle 修饰符进行样式设置。

🌐 Expo UI Gauge matches the official SwiftUI Gauge API and supports styling via the gaugeStyle modifier.

安装

🌐 Installation

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.

用法

🌐 Usage

基本规

🌐 Basic gauge

BasicGaugeExample.tsx

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

export default function BasicGaugeExample() {
  // A linear gauge stretches to the width it is given, so give the host a size.
  return (
    <Host style={{ flex: 1 }}>
      <Gauge value={0.5} />
    </Host>
  );
}

带标签

🌐 With label

你可以将自定义组件作为 children 传递，以为仪表提供标签。

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

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>Progress</Text>
      </Gauge>
    </Host>
  );
}

带有数值标签

🌐 With value labels

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

🌐 Use the currentValueLabel, minimumValueLabel, and maximumValueLabel props to display value information.

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>Usage</Text>
      </Gauge>
    </Host>
  );
}

仪表样式

🌐 Gauge styles

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

🌐 Use the gaugeStyle modifier to change the gauge's appearance. Available styles are: automatic, circular, circularCapacity, linear, and 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>Circular</Text>
        <Gauge value={0.5} modifiers={[gaugeStyle('circular')]}>
          <Text>Circular</Text>
        </Gauge>
        <Text>Circular Capacity</Text>
        <Gauge
          value={0.5}
          modifiers={[gaugeStyle('circularCapacity')]}>
          <Text>Circular Capacity</Text>
        </Gauge>
        <Text>Linear</Text>
        <Gauge value={0.5} modifiers={[gaugeStyle('linear')]}>
          <Text>Linear</Text>
        </Gauge>
        <Gauge
          value={0.5}
          modifiers={[gaugeStyle('linearCapacity')]}>
          <Text>Linear Capacity</Text>
        </Gauge>
      </VStack>
    </Host>
  );
}

有色表盘

🌐 Tinted gauge

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

🌐 Use the tint modifier to change the gauge's color.

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