Host

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

信息如需跨平台使用，请参阅通用 Host — 它会根据平台渲染相应的原生组件。

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

安装

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.

使用方法

匹配内容尺寸

使用 matchContents 属性让 Host 自适应内容尺寸。你可以传入布尔值或对象，分别控制垂直和水平方向的尺寸。

MatchContents.tsx

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

export default function MatchContents() {
  return (
    <Host matchContents>
      <Button onClick={() => console.log('Pressed')}>
        Sized to content
      </Button>
    </Host>
  );
}

注意：不要在与可滚动子组件（LazyRow、LazyColumn、Carousel 或使用 Modifier.horizontalScroll/verticalScroll 的组件）相同的轴上使用 matchContents。可滚动组件要求其滚动轴具有有限的最大约束，而 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')}>
        Styled host
      </Button>
    </Host>
  );
}

API

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

Component

`Host`

Android

Type: React.Element<HostProps>

HostProps

`children`

Android

Type: ReactNode

`colorScheme`

Android

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`

Android

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`

Android

Optional • Literal type: string

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

Acceptable values are: 'leftToRight' | 'rightToLeft'

`matchContents`

Android

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`

Android

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`

Android

Optional • Literal type: string

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

`seedColor`

Android

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`

Android

Optional • Type: StyleProp<ViewStyle>

`useViewportSizeMeasurement`

Android

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