Badge

用于显示状态指示器和计数的 Jetpack Compose Badge 组件

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

Expo UI Badge 与官方 Jetpack Compose Badge 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.

用法

指示点

没有子元素的徽章会渲染为一个小型圆点指示器。

BadgeDot.tsx

import { Host, Badge } from '@expo/ui/jetpack-compose';

export default function BadgeDot() {
  return (
    <Host matchContents>
      <Badge />
    </Host>
  );
}

带计数的徽章

传入一个 Text 子元素来显示数字或标签。

BadgeCount.tsx

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

export default function BadgeCount() {
  return (
    <Host matchContents>
      <Badge containerColor="#EF5350" contentColor="#FFFFFF">
        <Text>3</Text>
      </Badge>
    </Host>
  );
}

API

import { Badge } from '@expo/ui/jetpack-compose';

Component

`Badge`

Android

Type: React.Element<BadgeProps>

A badge component matching Compose's Badge. Renders as a small colored indicator dot, or with content (for example, a count).

See: Jetpack Compose Badge

BadgeProps

`children`

Android

Optional • Type: ReactNode

Optional content inside the badge (for example, a Text with a count). When omitted, renders as a small indicator dot.

`containerColor`

Android

Optional • Type: ColorValue • Default: BadgeDefaults.containerColor

Background color of the badge.

`contentColor`

Android

Optional • Type: ColorValue • Default: BadgeDefaults.contentColor

Content color inside the badge (text/icon tint).

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.