DisclosureGroup

用于显示可展开内容的 SwiftUI DisclosureGroup 组件。

iOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

Expo UI DisclosureGroup 与官方 SwiftUI DisclosureGroup API 保持一致，并显示一个展开指示器，用于显示或隐藏内容。

安装

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.

用法

基本折叠组

DisclosureGroup 最常用于 Form 中，这样它就会采用带有展开指示箭头的标准 iOS 列表样式。

BasicDisclosureGroupExample.tsx

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

export default function BasicDisclosureGroupExample() {
  const [isExpanded, setIsExpanded] = useState(true);
  return (
    <Host style={{ flex: 1 }}>
      <Form>
        <Section>
          <DisclosureGroup
            label="高级设置"
            isExpanded={isExpanded}
            onIsExpandedChange={setIsExpanded}>
            <Text>自动更新应用</Text>
            <Text>应用下载</Text>
            <Text>卸载未使用的应用</Text>
          </DisclosureGroup>
        </Section>
      </Form>
    </Host>
  );
}

初始展开

将 isExpanded 初始设置为 true，即可默认显示内容。

InitiallyExpandedExample.tsx

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

export default function InitiallyExpandedExample() {
  const [isExpanded, setIsExpanded] = useState(true);

  // A disclosure group fills the width it is given, so `matchContents` collapses it.
  return (
    <Host style={{ flex: 1 }}>
      <DisclosureGroup
        label="Details"
        isExpanded={isExpanded}
        onIsExpandedChange={setIsExpanded}>
        <Text>This content is visible by default.</Text>
      </DisclosureGroup>
    </Host>
  );
}

自定义标签

当标签需要自定义 SwiftUI 内容或修饰符，而不是 label 字符串属性时，请使用 DisclosureGroup.Label。

CustomLabelDisclosureGroupExample.tsx

import { useState } from 'react';
import {
  DisclosureGroup,
  Form,
  Host,
  Section,
  Text,
} from '@expo/ui/swift-ui';
import { font, foregroundStyle } from '@expo/ui/swift-ui/modifiers';

export default function CustomLabelDisclosureGroupExample() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <Form>
        <Section>
          <DisclosureGroup
            isExpanded={isExpanded}
            onIsExpandedChange={setIsExpanded}>
            <DisclosureGroup.Label>
              <Text
                modifiers={[
                  font({ weight: 'semibold' }),
                  foregroundStyle('#0a7ea4'),
                ]}>
                Network options
              </Text>
            </DisclosureGroup.Label>
            <Text>Wi-Fi</Text>
            <Text>蓝牙</Text>
            <Text>蜂窝数据</Text>
          </DisclosureGroup>
        </Section>
      </Form>
    </Host>
  );
}

API

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

Component

`DisclosureGroup`

iOS

Type: React.Element<DisclosureGroupProps>

DisclosureGroupProps

`children`

iOS

Type: ReactNode

`isExpanded`

iOS

Optional • Type: boolean

Controls whether the disclosure group is expanded.

`label`

iOS

Optional • Type: string

Text label for the disclosure group. Use DisclosureGroup.Label for custom label content.

`onIsExpandedChange`

iOS

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

A callback that is called when the expansion state changes.

Inherited props

CommonViewModifierProps