Box

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.18

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

用法

Box 会将子元素叠放在彼此之上。使用 contentAlignment 可将它们定位在 Box 内部。

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>Centered in Box</Text>
      </Box>
    </Host>
  );
}

API

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

Component

`Box`

Android

Type: React.Element<BoxProps>

BoxProps

`children`

Android

Optional • Type: 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