ControlGroup

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

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

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

一个已打开的 Menu，显示一个 ControlGroup 行，包含 Add、Favorite、Share 图标按钮，位于 Rename 和 Delete 条目上方

注意：在 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="选项" 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`

Type: React.Element<ControlGroupProps>

ControlGroupProps

`children`

Only for:

iOS

tvOS 17.0+

Type: ReactNode

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

`label`

Only for:

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`

Only for:

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