This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

信息 有关跨平台使用，请参阅通用 Host —— 它会根据平台呈现相应的原生组件。

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

🌐 The Host component is the bridge between React Native and Jetpack Compose. Every Jetpack Compose component from @expo/ui/jetpack-compose must be wrapped in a Host to render correctly.

安装

🌐 Installation

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

用法

🌐 Usage

匹配内容

🌐 Match contents

使用 matchContents 属性使 Host 根据内容调整大小。你可以传入布尔值或对象来独立控制垂直和水平的大小。

🌐 Use the matchContents prop to make the Host size itself to fit the content. You can pass a boolean or an object to control vertical and horizontal sizing independently.

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 会传播一个无限的约束。

以下示例会崩溃：

🌐 The following example crashes:

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 在该轴上一个有限大小：

🌐 Either drop matchContents on the scroll axis or give the Host a finite size on that axis via style:

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

有风格

🌐 With style

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

🌐 Apply standard React Native styles to the Host wrapper.

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