卡片

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

Expo UI Card 与官方 Jetpack Compose Card API 保持一致，并在带样式的 surface 容器内显示内容，可选支持阴影高度和轮廓。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 属性（单位为 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)]}>
          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`	-