主机

一个用于连接 React Native 和 Jetpack Compose 的 Jetpack Compose 主机组件。

Android

GitHub

npm

更新日志

Bundled version:

~55.0.0-beta.0

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>
  );
}

使用样式

将标准的 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`

Android

Type: React.Element<HostProps>

HostProps

`children`

Android

Type: React.ReactNode

`colorScheme`

Android

Optional • Type: ColorSchemeName

The color scheme of the host view.

`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.

`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