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

卡片

一个用于在样式化容器中显示内容的 Jetpack Compose 卡片组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Expo UI Card 与官方 Jetpack Compose Card API 一致，它会在带样式的表面容器中显示内容，并可选择是否带有 elevation 和轮廓。Card 组件会渲染一个 filled card，而 ElevatedCard 和 OutlinedCard 分别提供带阴影提升和带边框的变体。

安装

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.

用法

基础卡片

BasicCardExample.tsx

import { Host, Card, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function BasicCardExample() {
  return (
    <Host matchContents>
      <Card>
        <Text modifiers={[paddingAll(16)]}>
          This is a basic card with default styling.
        </Text>
      </Card>
    </Host>
  );
}

卡片类型

使用 Card（填充式）、ElevatedCard 或 OutlinedCard 来获得不同样式。

CardTypesExample.tsx

import {
  Host,
  Card,
  ElevatedCard,
  OutlinedCard,
  Text,
  Column,
} from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function CardTypesExample() {
  return (
    <Host matchContents>
      <Column verticalArrangement={{ spacedBy: 12 }}>
        <Card>
          <Text modifiers={[paddingAll(16)]}>填充卡片</Text>
        </Card>
        <ElevatedCard>
          <Text modifiers={[paddingAll(16)]}>带阴影提升的卡片</Text>
        </ElevatedCard>
        <OutlinedCard>
          <Text modifiers={[paddingAll(16)]}>带轮廓的卡片</Text>
        </OutlinedCard>
      </Column>
    </Host>
  );
}

自定义 elevation

使用 elevation 属性（单位为 dp）来控制阴影深度。elevation 在 ElevatedCard 上最有意义，因为它使用阴影 elevation。填充式 Card 默认使用色调 elevation，因此变化可能比较细微。

ElevatedCardExample.tsx

import { Host, ElevatedCard, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function ElevatedCardExample() {
  return (
    <Host matchContents>
      <ElevatedCard elevation={8}>
        <Text modifiers={[paddingAll(16)]}>
          Card with 8dp elevation
        </Text>
      </ElevatedCard>
    </Host>
  );
}

自定义边框

Card 和 OutlinedCard 接受 border 属性，用于自定义描边宽度和颜色。

OutlinedCardExample.tsx

import { Host, OutlinedCard, Text } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function OutlinedCardExample() {
  return (
    <Host matchContents>
      <OutlinedCard border={{ width: 2, color: '#6200EE' }}>
        <Text modifiers={[paddingAll(16)]}>
          Card with custom purple border
        </Text>
      </OutlinedCard>
    </Host>
  );
}

API

import {
  Card,
  ElevatedCard,
  OutlinedCard,
} from '@expo/ui/jetpack-compose';

Components

`Card`

Android

Type: React.Element<ComponentType<CardProps>>

A card component that renders a filled card surface for content.

CardProps

`border`

Android

Optional • Type: CardBorder

Border configuration for the card.

`children`

Android

Optional • Type: ReactNode

The content to display inside the card.

`colors`

Android

Optional • Type: CardColors

Colors for card's core elements.

`elevation`

Android

Optional • Type: number

Default elevation in dp.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`ElevatedCard`

Android

Type: React.Element<ComponentType<ElevatedCardProps>>

An elevated card component that provides a raised surface for content.

ElevatedCardProps

`children`

Android

Optional • Type: ReactNode

The content to display inside the card.

`colors`

Android

Optional • Type: CardColors

Colors for card's core elements.

`elevation`

Android

Optional • Type: number

Default elevation in dp. Material 3 default is 1dp.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`OutlinedCard`

Android

Type: React.Element<ComponentType<OutlinedCardProps>>

An outlined card component that provides a bordered surface for content.

OutlinedCardProps

`border`

Android

Optional • Type: CardBorder

Border configuration for the outlined card.

`children`

Android

Optional • Type: ReactNode

The content to display inside the card.

`colors`

Android

Optional • Type: CardColors

Colors for card's core elements.

`elevation`

Android

Optional • Type: number

Default elevation in dp.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

Types

`CardBorder`

Android

Border configuration for cards.

Property	Type	Description
color(optional)	`ColorValue`	Border color.
width(optional)	`number`	Border width in dp. Default:`1`

`CardColors`

Android

Colors for card's core elements.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
contentColor(optional)	`ColorValue`	-