形状

用于绘制几何形状的 Jetpack Compose 形状组件。

Android

Included in Expo Go

Recommended version:

~57.0.22

Expo UI Shape 与官方 Jetpack Compose Shapes API 相匹配，并提供了一组用于绘制几何形状的子组件，例如星形、圆形、矩形、胶囊形和多边形。

🌐 Expo UI Shape matches the official Jetpack Compose Shapes API and provides a set of sub-components for drawing geometric shapes such as stars, circles, rectangles, pills, and polygons.

Four geometric shapes: hexagon, circle, rounded rectangle, and pill

安装

🌐 Installation

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.

用法

🌐 Usage

基本形状

🌐 Basic shapes

使用 Shape 子组件渲染常见形状。

🌐 Render common shapes using the Shape sub-components.

BasicShapesExample.tsx

import { Host, Shape, Row } from '@expo/ui/jetpack-compose';
import { size } from '@expo/ui/jetpack-compose/modifiers';

export default function BasicShapesExample() {
  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <Row
        horizontalArrangement={{ spacedBy: 16 }}
        verticalAlignment="center">
        <Shape.Star
          radius={1}
          innerRadius={0.5}
          color="#FFD700"
          modifiers={[size(80, 80)]}
        />
        <Shape.Circle
          radius={1}
          color="#4285F4"
          modifiers={[size(80, 80)]}
        />
        <Shape.Rectangle
          color="#34A853"
          modifiers={[size(80, 80)]}
        />
        <Shape.Pill color="#EA4335" modifiers={[size(100, 50)]} />
      </Row>
    </Host>
  );
}

圆角形状

🌐 Shapes with rounded corners

使用 cornerRounding 和 smoothing 来自定义形状的外观。

🌐 Use cornerRounding and smoothing to customize the appearance of shapes.

RoundedShapesExample.tsx

import { Host, Shape, Row } from '@expo/ui/jetpack-compose';
import { size } from '@expo/ui/jetpack-compose/modifiers';

export default function RoundedShapesExample() {
  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <Row
        horizontalArrangement={{ spacedBy: 16 }}
        verticalAlignment="center">
        <Shape.Rectangle
          cornerRounding={0.2}
          smoothing={0.5}
          color="#9C27B0"
          modifiers={[size(100, 80)]}
        />
        <Shape.RoundedCorner
          cornerRadii={{
            topStart: 20,
            topEnd: 20,
            bottomStart: 0,
            bottomEnd: 0,
          }}
          color="#FF5722"
          modifiers={[size(100, 80)]}
        />
      </Row>
    </Host>
  );
}

多边形和星形变体

🌐 Polygon and star variants

使用 verticesCount 和 innerRadius 来控制形状几何。

🌐 Use verticesCount and innerRadius to control the shape geometry.

PolygonShapesExample.tsx

import { Host, Shape, Row } from '@expo/ui/jetpack-compose';
import { size } from '@expo/ui/jetpack-compose/modifiers';

export default function PolygonShapesExample() {
  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <Row
        horizontalArrangement={{ spacedBy: 16 }}
        verticalAlignment="center">
        <Shape.Polygon
          verticesCount={6}
          cornerRounding={0.05}
          color="#00BCD4"
          modifiers={[size(80, 80)]}
        />
        <Shape.Star
          verticesCount={8}
          radius={1}
          innerRadius={0.4}
          cornerRounding={0.025}
          color="#FF9800"
          modifiers={[size(80, 80)]}
        />
        <Shape.PillStar
          verticesCount={6}
          innerRadius={0.5}
          color="#E91E63"
          modifiers={[size(80, 80)]}
        />
      </Row>
    </Host>
  );
}

应用接口

🌐 API

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

Constants

`Shape.Shape`

Android

Type: { Circle: (props: Pick<ShapeProps, 'radius' | 'verticesCount' | 'color' | 'modifiers'>) => ShapeJSXElement, Pill: (props: Pick<ShapeProps, 'smoothing' | 'color' | 'modifiers'>) => ShapeJSXElement, PillStar: (props: ShapeProps) => ShapeJSXElement, Polygon: (props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'verticesCount' | 'color' | 'modifiers'>) => ShapeJSXElement, Rectangle: (props: Pick<ShapeProps, 'smoothing' | 'cornerRounding' | 'color' | 'modifiers'>) => ShapeJSXElement, RoundedCorner: (props: Pick<ShapeProps, 'cornerRadii' | 'color' | 'modifiers'>) => ShapeJSXElement, Star: (props: ShapeProps) => ShapeJSXElement }

Props

`color`

Android

Optional • Type: ColorValue

Color of the shape

`cornerRadii`

Android

Optional • Type: CornerRadii

Corner radii for RoundedCorner shape. Values are in dp.

`cornerRounding`

Android

Optional • Type: number • Default: 0.0

Corner rounding percentage. Multiplied by the shorter dimension of the view to produce pixel values.

`innerRadius`

Android

Optional • Type: number • Default: 1.0

Inner radius of star-related shapes ('STAR' and 'PILL_STAR'). Multiplied by the shorter dimension of the view to produce pixel values.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`radius`

Android

Optional • Type: number • Default: 1.0

Radius of the circular shape. Multiplied by the shorter dimension of the view to produce pixel values.

`smoothing`

Android

Optional • Type: number • Default: 0.0

Number between 0.0 and 1.0 that determines how much each line between vertices is "smoothed".

`verticesCount`

Android

Optional • Type: number • Default: 6.0

Number of vertices. For 'POLYGON' it must be at least 3.0. For 'STAR' and 'PILL_STAR' it is a number of vertices for each of two radii (A 5-pointed star has 10 vertices.)

Methods

`Shape.parseJSXShape(shape)`

Android

Overload #1

Parameter	Type
shape	`ShapeJSXElement`

Returns:

ShapeRecordProps

`Shape.parseJSXShape(shape)`

Android

Overload #2

Parameter	Type
shape(optional)	`ShapeJSXElement`

Returns:

ShapeRecordProps | undefined

Types

`CornerRadii`

Android

Corner radii for RoundedCorner shape.

Property	Type	Description
bottomEnd(optional)	`number`	Bottom-end corner radius in dp.
bottomStart(optional)	`number`	Bottom-start corner radius in dp.
topEnd(optional)	`number`	Top-end corner radius in dp.
topStart(optional)	`number`	Top-start corner radius in dp.

`ShapeJSXElement`

Android

Type: React.ReactElement<NativeShapeProps> extended by:

Property	Type	Description
__expo_shape_jsx_element_marker	`true`	-