主机

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 onPress={() => console.log('Pressed')}>Sized to content</Button>
    </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 onPress={() => console.log('Pressed')}>Styled host</Button>
    </Host>
  );
}

应用接口

🌐 API

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

Component