This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

ControlGroup

一个用于分组交互式控件的 SwiftUI ControlGroup 组件。

iOS

tvOS

GitHub

npm

更新日志

Expo UI ControlGroup 与官方 SwiftUI ControlGroup API 保持一致。当放置在 Menu 内部时，子项会以紧凑的水平按钮行方式渲染。

注意：在 tvOS 上，ControlGroup 需要 tvOS 17.0 或更高版本。

安装

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.

用法

基础控制组

菜单中的一个控制组，会以一排水平图标按钮的形式渲染。

BasicControlGroupExample.tsx

import { Host, Menu, ControlGroup, Button } from '@expo/ui/swift-ui';

export default function BasicControlGroupExample() {
  return (
    <Host matchContents>
      <Menu label="Options" systemImage="ellipsis.circle">
        <ControlGroup>
          <Button systemImage="plus" label="添加" onPress={() => console.log('Add')} />
          <Button systemImage="star" label="收藏" onPress={() => console.log('Favorite')} />
          <Button
            systemImage="square.and.arrow.up"
            label="分享"
            onPress={() => console.log('Share')}
          />
        </ControlGroup>
        <Button label="其他操作" onPress={() => console.log('Other')} />
      </Menu>
    </Host>
  );
}

API

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

Component

`ControlGroup`

iOS

tvOS

Type: React.Element<ControlGroupProps>

ControlGroupProps

`children`

iOS

tvOS 17.0+

Type: ReactNode

The control group's content. Can contain Button, Toggle, Picker, or other interactive controls.

`label`

iOS 16.0+

tvOS 17.0+

Optional • Type: ReactNode

The label for the control group. Can be a string for simple text labels, or a Label component for custom label content. When omitted, the control group has no label.

`systemImage`

iOS 16.0+

tvOS 17.0+

Optional • Type: SFSymbols7_0

An SF Symbol name to display alongside the label. Only used when label is a string.

Inherited Props

CommonViewModifierProps