主机

用于桥接 React Native 和 Jetpack Compose 的 Jetpack Compose Host 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~57.0.0

有关跨平台用法，请参阅通用的 Host —— 它会根据平台渲染相应的原生组件。

Host 组件是 React Native 和 Jetpack Compose 之间的桥梁。来自 @expo/ui/jetpack-compose 的每个 Jetpack Compose 组件都必须包裹在 Host 中才能正确渲染。

安装

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.

用法

匹配内容

使用 matchContents 属性让 Host 自动调整自身大小以适配内容。你可以传入布尔值或对象，以便独立控制垂直和水平尺寸。

MatchContents.tsx

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

export default function MatchContents() {
  return (
    <Host matchContents>
      <Button onClick={() => console.log('Pressed')}>按内容定大小</Button>
    </Host>
  );
}

注意：不要在与可滚动子组件相同的轴上使用 matchContents（例如 LazyRow、LazyColumn、Carousel，或任何使用 Modifier.horizontalScroll/verticalScroll 的组件）。可滚动组件在其滚动轴上需要有限的最大约束，而 matchContents 会传递一个无限约束。

下面的示例会崩溃：

MatchContentsCrash.tsx

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

export default function MatchContentsCrash() {
  return (
    <Host matchContents>
      <LazyRow>
        {Array.from({ length: 5 }).map((_, i) => (
          <Text key={i}>Item {i}</Text>
        ))}
      </LazyRow>
    </Host>
  );
}

要么去掉滚动轴上的 matchContents，要么通过 style 为该轴上的 Host 提供一个有限大小：

MatchContentsFix.tsx

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

export default function MatchContentsFix() {
  return (
    <Host matchContents={{ vertical: true }} style={{ width: '100%' }}>
      <LazyRow>
        {Array.from({ length: 5 }).map((_, i) => (
          <Text key={i}>Item {i}</Text>
        ))}
      </LazyRow>
    </Host>
  );
}

使用样式

将标准的 React Native 样式应用到 Host 包装器上。

HostWithStyle.tsx

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

export default function HostWithStyle() {
  return (
    <Host style={{ padding: 16, backgroundColor: '#f0f0f0', borderRadius: 8 }}>
      <Button onClick={() => console.log('Pressed')}>带样式的 host</Button>
    </Host>
  );
}

API

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

Component

`Host`

Type: React.Element<HostProps>

HostProps

`children`

Type: ReactNode

`colorScheme`

Optional • Type: ColorSchemeName

The color scheme of the host view. 'light' / 'dark' force a specific appearance; omitted follows the device setting. The palette itself follows the device wallpaper on Android 12+ (Material You) or the static Material 3 baseline otherwise — unless seedColor is set.

`ignoreSafeAreaKeyboardInsets`

Optional • Type: boolean • Default: false

When true, the Compose content will not perform keyboard avoidance behaviour when keyboard is shown. Can be only set once on mount.

`layoutDirection`

Optional • Literal type: string

The layout direction for the content. Defaults to the current locale direction from I18nManager.

Acceptable values are: 'leftToRight' | 'rightToLeft'

`matchContents`

Optional • Literal type: union • Default: false

When true, the host view will update its size in the React Native view tree to match the content's layout from Jetpack Compose. Can be only set once on mount.

Acceptable values are: boolean | { horizontal: boolean, vertical: boolean }

`onLayoutContent`

Optional • Type:

(event: {
  nativeEvent: {
  height: number, 
  width: number
}
}) => void

Callback function that is triggered when the Jetpack Compose content completes its layout. Provides the current dimensions of the content, which may change as the content updates.

`pointerEvents`

Optional • Literal type: string

Acceptable values are: 'box-none' | 'none' | 'box-only' | 'auto'

`seedColor`

Optional • Type: ColorValue

Seed color used to generate a Material 3 palette (SchemeTonalSpot) for this host. Combines with colorScheme ('light' / 'dark' or omitted) to produce a seeded palette that themes Compose children and is available to descendants via useMaterialColors().

`style`

Optional • Type: StyleProp<ViewStyle>

`useViewportSizeMeasurement`

Optional • Type: boolean • Default: false

When true and no explicit size is provided, the host will use the viewport size as the proposed size for Compose layout. This is particularly useful for views that need to fill their available space.

Inherited props

PrimitiveBaseProps