卡片

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

Expo UI Card 与官方 Jetpack Compose Card API 保持一致，并在一个带样式的 surface 容器内显示内容，可选支持阴影高度和轮廓。Card 组件渲染的是一个填充卡片，而 ElevatedCard 和 OutlinedCard 分别提供带提升效果和带边框的变体。

安装

Terminal

- npx 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)]}>这是一个带默认样式的基础卡片。</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 属性（单位为 dp）来控制阴影深度。高程在 ElevatedCard 上最有意义，因为它使用阴影高程。填充式 Card 默认使用色调高程，因此变化可能较为细微。

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)]}>具有 8dp 高程的卡片</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)]}>带有自定义紫色边框的卡片</Text>
      </OutlinedCard>
    </Host>
  );
}

API

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

Components

`Card`

Type: React.Element<ComponentType<CardProps>>

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

CardProps

`border`

Optional • Type: CardBorder

Border configuration for the card.

`children`

Optional • Type: ReactNode

The content to display inside the card.

`colors`

Optional • Type: CardColors

Colors for card's core elements.

`elevation`

Optional • Type: number

Default elevation in dp.

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`ElevatedCard`

Type: React.Element<ComponentType<ElevatedCardProps>>

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

ElevatedCardProps

`children`

Optional • Type: ReactNode

The content to display inside the card.

`colors`

Optional • Type: CardColors

Colors for card's core elements.

`elevation`

Optional • Type: number

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

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`OutlinedCard`

Type: React.Element<ComponentType<OutlinedCardProps>>

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

OutlinedCardProps

`border`

Optional • Type: CardBorder

Border configuration for the outlined card.

`children`

Optional • Type: ReactNode

The content to display inside the card.

`colors`

Optional • Type: CardColors

Colors for card's core elements.

`elevation`

Optional • Type: number

Default elevation in dp.

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

Types

`CardBorder`

Border configuration for cards.

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

`CardColors`

Colors for card's core elements.

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