卡片

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

Expo UI Card 与官方 Jetpack Compose Card API 相匹配，可在带样式的表面容器中显示内容，并支持可选的阴影和描边。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)]}>Filled card</Text>
        </Card>
        <ElevatedCard>
          <Text modifiers={[paddingAll(16)]}>Elevated card</Text>
        </ElevatedCard>
        <OutlinedCard>
          <Text modifiers={[paddingAll(16)]}>Outlined card</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`	-