Box

一个用于堆叠子元素的 Jetpack Compose Box 组件。

Android

GitHub

npm

更新日志

Bundled version:

~55.0.0-beta.0

Expo UI Box 与官方 Jetpack Compose Box API 保持一致，并通过可配置的内容对齐方式将子元素堆叠在一起。

安装

Terminal

- npx expo install @expo/ui

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

用法

Box 会将子元素堆叠在一起。使用 contentAlignment 可将它们定位在盒子内。

BoxExample.tsx

import { Host, Box, Text } from '@expo/ui/jetpack-compose';
import { size, background } from '@expo/ui/jetpack-compose/modifiers';

export default function BoxExample() {
  return (
    <Host matchContents>
      <Box contentAlignment="center" modifiers={[size(200, 200), background('#E0E0E0')]}>
        <Text>居中于 Box 中</Text>
      </Box>
    </Host>
  );
}

API

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

Component

`Box`

Android

Type: React.Element<BoxProps>

BoxProps

`children`

Android

Optional • Type: React.ReactNode

`contentAlignment`

Android

Optional • Type: ContentAlignment

Alignment of children within the box.

`floatingToolbarExitAlwaysScrollBehavior`

Android

Optional • Type: FloatingToolbarExitAlwaysScrollBehavior

Scroll behavior for the floating toolbar exit.

Inherited Props

PrimitiveBaseProps