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

分隔线

一个用于创建视觉分隔符的 SwiftUI Divider 组件。

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Expo UI Divider 与官方 SwiftUI Divider 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.

用法

基础分隔线

BasicDividerExample.tsx

import { Host, Divider, VStack, Text } from '@expo/ui/swift-ui';

export default function BasicDividerExample() {
  // 分隔线会延伸到指定宽度，因此 `matchContents` 会使其收缩。
  return (
    <Host style={{ flex: 1 }}>
      <VStack>
        <Text>第一部分</Text>
        <Divider />
        <Text>第二部分</Text>
      </VStack>
    </Host>
  );
}

列表中的分隔线

DividerInListExample.tsx

import { Host, Divider, VStack, Text } from '@expo/ui/swift-ui';

export default function DividerInListExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={8}>
        <Text>项目 1</Text>
        <Divider />
        <Text>项目 2</Text>
        <Divider />
        <Text>项目 3</Text>
        <Divider />
        <Text>项目 4</Text>
      </VStack>
    </Host>
  );
}

上下文菜单中的分隔线

分隔线通常用于在上下文菜单中分隔不同的操作组。

DividerInContextMenuExample.tsx

import {
  Host,
  ContextMenu,
  Button,
  Text,
  Divider,
} from '@expo/ui/swift-ui';

export default function DividerInContextMenuExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ContextMenu>
        <ContextMenu.Items>
          <Button
            label="Edit"
            onPress={() => console.log('Edit')}
          />
          <Button
            label="Duplicate"
            onPress={() => console.log('Duplicate')}
          />
          <Divider />
          <Button
            label="Delete"
            role="destructive"
            onPress={() => console.log('Delete')}
          />
        </ContextMenu.Items>
        <ContextMenu.Trigger>
          <Text>长按我</Text>
        </ContextMenu.Trigger>
      </ContextMenu>
    </Host>
  );
}

API

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

Component

`Divider`

iOS

tvOS

Type: React.Element<DividerProps>

Divider component uses the native Divider component. A visual element that can be used to separate other content.

DividerProps

Inherited props

CommonViewModifierProps