This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

信息 有关跨平台使用，请参阅通用 Spacer —— 它会根据平台呈现相应的原生组件。

Expo UI Spacer 与官方 Jetpack Compose Spacer API 匹配，用于在布局中在元素之间添加可变或固定大小的间距。

🌐 Expo UI Spacer matches the official Jetpack Compose Spacer API and is used to add flexible or fixed-size space between elements in a layout.

安装

🌐 Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

🌐 Usage

带重量的间隔片

🌐 Spacer with weight

使用 weight() 修饰符使间隔器在 Row 或 Column 内按比例填充可用空间。

🌐 Use the weight() modifier to make the spacer fill available space proportionally within a Row or Column.

import { Host, Row, Spacer, Text } from '@expo/ui/jetpack-compose';
import { fillMaxWidth, weight } from '@expo/ui/jetpack-compose/modifiers';

export default function SpacerWeightExample() {
  return (
    <Host matchContents>
      <Row modifiers={[fillMaxWidth()]}>
        <Text>Left</Text>
        <Spacer modifiers={[weight(1)]} />
        <Text>Right</Text>
      </Row>
    </Host>
  );
}

固定大小的间隔器

🌐 Spacer with fixed size

使用 height 或 width 修饰符来创建具有固定尺寸的间隔器。

🌐 Use a height or width modifier to create a spacer with a fixed dimension.

import { Host, Column, Spacer, Text } from '@expo/ui/jetpack-compose';
import { height } from '@expo/ui/jetpack-compose/modifiers';

export default function SpacerFixedSizeExample() {
  return (
    <Host matchContents>
      <Column>
        <Text>Above</Text>
        <Spacer modifiers={[height(24)]} />
        <Text>Below (24dp gap)</Text>
      </Column>
    </Host>
  );
}

应用接口

🌐 API

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

Component

<Row>
  <Text>Left</Text>
  <Spacer modifiers={[weight(1)]} />
  <Text>Right</Text>
</Row>