开关

用于切换控件的 Jetpack Compose 开关组件。

Android

Bundled version:

~55.0.2

Expo UI 开关与官方 Jetpack Compose 的 Switch 和 Checkbox API 相匹配，并支持开关、复选框和按钮变体。

🌐 Expo UI Switch matches the official Jetpack Compose Switch and Checkbox APIs and supports switch, checkbox, and button variants.

安装

🌐 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

切换开关

🌐 Toggle switch

使用 variant="switch" 属性来显示标准切换开关。

🌐 Use the variant="switch" prop to display a standard toggle switch.

ToggleSwitchExample.tsx

import { useState } from 'react';
import { Host, Switch } from '@expo/ui/jetpack-compose';

export default function ToggleSwitchExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Switch
        value={checked}
        onValueChange={setChecked}
        label="Play music"
        variant="switch"
        color="#6200EE"
      />
    </Host>
  );
}

复选框

🌐 Checkbox

使用 variant="checkbox" 属性来显示一个复选框控件。

🌐 Use the variant="checkbox" prop to display a checkbox control.

CheckboxExample.tsx

import { useState } from 'react';
import { Host, Switch } from '@expo/ui/jetpack-compose';

export default function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Switch
        value={checked}
        onValueChange={setChecked}
        label="Accept terms"
        variant="checkbox"
        color="#6200EE"
      />
    </Host>
  );
}

按钮变体

🌐 Button variant

使用 variant="button" 属性来显示一个切换按钮。

🌐 Use the variant="button" prop to display a toggle button.

ButtonVariantExample.tsx

import { useState } from 'react';
import { Host, Switch } from '@expo/ui/jetpack-compose';

export default function ButtonVariantExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Switch
        value={checked}
        onValueChange={setChecked}
        label="Notifications"
        variant="button"
        color="#6200EE"
      />
    </Host>
  );
}

应用接口

🌐 API

import { Switch } from '@expo/ui/jetpack-compose';

Components

`Switch`

Android

Type: React.Element<SwitchProps>

SwitchProps

`children`

Android

Optional • Type: React.ReactNode

Children containing ThumbContent slot.

`color`

Android

Optional • Type: ColorValue

Picker color.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the switch is enabled.

`label`

Android

Optional • Type: string

Label for the switch.

On Android, the label has an effect only when the Switch is used inside a ContextMenu.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onValueChange`

Android

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

Callback function that is called when the checked state changes.

`value`

Android

Type: boolean

Indicates whether the switch is checked.

`variant`

Android

Optional • Literal type: string • Default: 'switch'

Type of the switch component. Can be 'checkbox', 'switch', or 'button'.

Acceptable values are: 'checkbox' | 'switch' | 'button'

`SwitchThumbContent`

Android

Type: React.Element<ThumbContentProps>

Custom content to be displayed inside the switch thumb.