ControlGroup
用于分组交互式控件的 SwiftUI ControlGroup 组件。
Expo UI ControlGroup 与官方 SwiftUI ControlGroup API 相匹配。放置在 Menu 内时,子元素会以紧凑的水平按钮行渲染。
🌐 Expo UI ControlGroup matches the official SwiftUI ControlGroup API. When placed inside a Menu, the children are rendered as a compact horizontal row of buttons.
注意: 在 tvOS 上,ControlGroup 需要 tvOS 17.0 或更高版本。
安装
🌐 Installation
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
用法
🌐 Usage
基础对照组
🌐 Basic control group
菜单中的一个控制组,这些显示为一排水平的图标按钮。
🌐 A control group inside a menu, these render as a horizontal row of icon buttons.
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="Add" onPress={() => console.log('Add')} /> <Button systemImage="star" label="Favorite" onPress={() => console.log('Favorite')} /> <Button systemImage="square.and.arrow.up" label="Share" onPress={() => console.log('Share')} /> </ControlGroup> <Button label="Other Action" onPress={() => console.log('Other')} /> </Menu> </Host> ); }
应用接口
🌐 API
import { ControlGroup } from '@expo/ui/swift-ui';
Component
Type: React.Element<ControlGroupProps>
ReactNodeThe control group's content.
Can contain Button, Toggle, Picker, or other interactive controls.
ReactNodeThe 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.
SFSymbols7_0An SF Symbol name to display alongside the label.
Only used when label is a string.