Toggle

用于显示原生切换开关的 SwiftUI Toggle 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

如需跨平台使用，请参阅通用的 Switch——它会根据平台渲染适当的原生组件。

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

安装

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.

用法

基本 Toggle

BasicToggleExample.tsx

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';

export default function BasicToggleExample() {
  const [isOn, setIsOn] = useState(false);

  // A toggle row stretches to the width it is given, so give the host a size.
  return (
    <Host style={{ flex: 1 }}>
      <Toggle
        isOn={isOn}
        onIsOnChange={setIsOn}
        label="Enable feature"
      />
    </Host>
  );
}

带系统图像的 Toggle

ToggleWithImageExample.tsx

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';

export default function ToggleWithImageExample() {
  const [airplaneMode, setAirplaneMode] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Toggle
        isOn={airplaneMode}
        onIsOnChange={setAirplaneMode}
        label="Airplane Mode"
        systemImage="airplane"
      />
    </Host>
  );
}

Toggle 样式

使用 toggleStyle 修饰符更改 Toggle 的外观。可用样式包括：automatic、switch 和 button。

注意： tvOS 不支持 button 样式。

ToggleStylesExample.tsx

import { useState } from 'react';
import { Host, Toggle, VStack } from '@expo/ui/swift-ui';
import { toggleStyle } from '@expo/ui/swift-ui/modifiers';

export default function ToggleStylesExample() {
  const [isOn, setIsOn] = useState(true);

  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={8}>
        <Toggle
          isOn={isOn}
          onIsOnChange={setIsOn}
          label="Switch Style"
          modifiers={[toggleStyle('switch')]}
        />
        <Toggle
          isOn={isOn}
          onIsOnChange={setIsOn}
          label="Button Style"
          modifiers={[toggleStyle('button')]}
        />
      </VStack>
    </Host>
  );
}

着色 Toggle

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

TintedToggleExample.tsx

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

export default function TintedToggleExample() {
  const [isOn, setIsOn] = useState(true);

  return (
    <Host matchContents>
      <Toggle
        isOn={isOn}
        onIsOnChange={setIsOn}
        label="Custom Color"
        modifiers={[tint('#FF9500')]}
      />
    </Host>
  );
}

自定义标签内容

你可以将自定义组件作为 children 传入，以创建更复杂的 Toggle 标签。使用多个 Text 视图，其中第一个表示标题，第二个表示副标题。

CustomLabelExample.tsx

import { useState } from 'react';
import { Host, Toggle, Text } from '@expo/ui/swift-ui';

export default function CustomLabelExample() {
  const [vibrateOnRing, setVibrateOnRing] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Toggle isOn={vibrateOnRing} onIsOnChange={setVibrateOnRing}>
        <Text>Vibrate on ring</Text>
        <Text>Enable vibration when the phone rings</Text>
      </Toggle>
    </Host>
  );
}

隐藏标签

使用 labelsHidden 修饰符隐藏标签，同时保留其无障碍功能。

HiddenLabelExample.tsx

import { useState } from 'react';
import { Host, Toggle } from '@expo/ui/swift-ui';
import { labelsHidden } from '@expo/ui/swift-ui/modifiers';

export default function HiddenLabelExample() {
  const [isOn, setIsOn] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Toggle
        isOn={isOn}
        onIsOnChange={setIsOn}
        label="Hidden Label"
        modifiers={[labelsHidden()]}
      />
    </Host>
  );
}

API

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

Component

`Toggle`

iOS

tvOS

Type: React.Element<ToggleProps>

A control that toggles between on and off states.

ToggleProps

`children`

iOS

tvOS

Optional • Type: ReactNode

Custom content for the toggle label. Use multiple Text views where the first represents the title and the second represents the subtitle.

`isOn`

iOS

tvOS

Optional • Type: boolean

A Boolean value that determines the on/off state of the toggle.

`label`

iOS

tvOS

Optional • Type: string

A string that describes the purpose of the toggle.

`onIsOnChange`

iOS

tvOS

Optional • Type: (isOn: boolean) => void

A callback that is called when the toggle's state changes.

isOn: boolean

The new state of the toggle.

`systemImage`

iOS

tvOS

Optional • Type: SFSymbols7_0

The name of the SF Symbol to display alongside the label.

Inherited props

CommonViewModifierProps