分割线

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

iOS

tvOS

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

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