部分

一个用于在列表和表单中对内容进行分组的 SwiftUI Section 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

Expo UI Section 与官方 SwiftUI Section API 相匹配，用于在 List、Form 或 Picker 组件中对相关内容进行分组。

安装

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.

用法

带标题的基本部分

对于带文本标题的简单部分，请使用 title 属性。

BasicSectionExample.tsx

import { Host, List, Section, Text } from '@expo/ui/swift-ui';

export default function BasicSectionExample() {
  return (
    <Host style={{ flex: 1 }}>
      <List>
        <Section title="设置">
          <Text>常规</Text>
          <Text>隐私</Text>
          <Text>通知</Text>
        </Section>
      </List>
    </Host>
  );
}

带自定义页眉和页脚的 Section

对于自定义视图，请使用 header 和 footer 属性。只有在未提供 title 时才会使用这些属性。

CustomHeaderFooterExample.tsx

import {
  Host,
  List,
  Section,
  Toggle,
  Text,
  HStack,
  Image,
} from '@expo/ui/swift-ui';
import { useState } from 'react';

export default function CustomHeaderFooterExample() {
  const [locationEnabled, setLocationEnabled] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <List>
        <Section
          header={
            <HStack>
              <Image
                systemName="location.fill"
                color="blue"
                size={16}
              />
              <Text>Location Services</Text>
            </HStack>
          }
          footer={
            <Text>
              Enabling location services allows the app to provide
              personalized recommendations.
            </Text>
          }>
          <Toggle
            label="启用位置"
            isOn={locationEnabled}
            onIsOnChange={setLocationEnabled}
          />
        </Section>
      </List>
    </Host>
  );
}

可折叠部分

使用 isExpanded 属性来控制该部分是展开还是折叠。提供该属性后，此部分将变为可折叠。使用 onIsExpandedChange 来处理状态变化。

注意：可折叠部分需要 iOS 17+ 和 tvOS 17+，并且列表必须使用 sidebar 样式。可折叠部分不支持页脚。

CollapsibleSectionExample.tsx

import { useState } from 'react';
import { Host, List, Section, Text } from '@expo/ui/swift-ui';
import { listStyle } from '@expo/ui/swift-ui/modifiers';

export default function CollapsibleSectionExample() {
  const [favoritesExpanded, setFavoritesExpanded] = useState(false);
  const [recentsExpanded, setRecentsExpanded] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <List modifiers={[listStyle('sidebar')]}>
        <Section
          title="收藏"
          isExpanded={favoritesExpanded}
          onIsExpandedChange={setFavoritesExpanded}>
          <Text>主页</Text>
          <Text>工作</Text>
          <Text>健身房</Text>
        </Section>
        <Section
          title="最近"
          isExpanded={recentsExpanded}
          onIsExpandedChange={setRecentsExpanded}>
          <Text>咖啡店</Text>
          <Text>图书馆</Text>
          <Text>公园</Text>
        </Section>
      </List>
    </Host>
  );
}

表单中的多个部分

Section 组件可与 Form 组件配合使用，用于将表单控件组织成逻辑分组。

FormSectionsExample.tsx

import { useState } from 'react';
import {
  Host,
  Form,
  Section,
  Toggle,
  Picker,
  Text,
  Button,
} from '@expo/ui/swift-ui';
import { pickerStyle, tag } from '@expo/ui/swift-ui/modifiers';

export default function FormSectionsExample() {
  const [darkMode, setDarkMode] = useState(false);
  const [notifications, setNotifications] = useState(true);
  const [language, setLanguage] = useState(0);
  const languages = ['英语', '西班牙语', '法语', '德语'];

  return (
    <Host style={{ flex: 1 }}>
      <Form>
        <Section title="Appearance">
          <Toggle
            label="Dark Mode"
            isOn={darkMode}
            onIsOnChange={setDarkMode}
          />
          <Picker
            label="语言"
            selection={language}
            onSelectionChange={setLanguage}
            modifiers={[pickerStyle('menu')]}>
            {languages.map((lang, index) => (
              <Text key={index} modifiers={[tag(index)]}>
                {lang}
              </Text>
            ))}
          </Picker>
        </Section>
        <Section title="Notifications">
          <Toggle
            label="Push Notifications"
            isOn={notifications}
            onIsOnChange={setNotifications}
          />
        </Section>
        <Section title="Account">
          <Button
            label="Sign out"
            role="destructive"
            onPress={() => alert('Signed out')}
          />
        </Section>
      </Form>
    </Host>
  );
}

API

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

Component

`Section`

iOS

tvOS

Type: React.Element<SectionProps>

Section component uses the native Section component.

SectionProps

`children`

iOS

tvOS

Type: ReactNode

The content of the section.

`footer`

iOS

tvOS

Optional • Type: ReactNode

Sets a custom footer for the section.

`header`

iOS

tvOS

Optional • Type: ReactNode

Sets a custom header for the section.

`isExpanded`

iOS 17.0+

tvOS 17.0+

Optional • Type: boolean

Controls whether the section is expanded or collapsed. When provided, the section becomes collapsible.

Note: Available only when the list style is set to sidebar.

`onIsExpandedChange`

iOS 17.0+

tvOS 17.0+

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

Callback triggered when the section's expanded state changes.

`title`

iOS

tvOS

Optional • Type: string

The title of the section.

Inherited props

CommonViewModifierProps