主机

一个组件，允许你在 React Native 中放置其他 @expo/ui/swift-ui 组件。它的作用类似于 DOM 的 <svg>，react-native-skia 的 <Canvas>，其底层使用 UIHostingController 在 UIKit 中渲染 SwiftUI 视图。

🌐 A component that allows you to put the other @expo/ui/swift-ui components in React Native. It acts like <svg> for DOM, <Canvas> for react-native-skia, which underlying uses UIHostingController to render the SwiftUI views in UIKit.

由于 Host 组件是一个 React Native View，你可以向它传递 style 属性，或者传递 matchContents 属性，使 Host 组件匹配内容的大小。

🌐 Since the Host component is a React Native View, you can pass the style prop to it or matchContents prop to make the Host component match the contents' size.

安装

🌐 Installation

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

用法

🌐 Usage

匹配内容大小

🌐 Match contents sizing

使用 matchContents 让 Host 自动调整大小以适应其 SwiftUI 内容，而不需要明确的尺寸。

🌐 Use matchContents to let the Host automatically size itself to fit its SwiftUI content, instead of requiring explicit dimensions.

注意: matchContents 仅对具有固有尺寸或明确 frame 的组件正确工作（例如，Button、Toggle、Text）。像 Slider 和线性 ProgressView 这样的可伸缩宽度组件会扩展以填充可用空间，并且没有固有宽度，对它们使用 matchContents 将导致几乎为零的宽度。对于这些组件，要么在组件上应用 frame 修饰符以给它一个明确的宽度，要么在 Host 上使用 style 进行明确大小设置（例如，style={{ flex: 1 }} 或 style={{ width: 300 }}）。

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

export default function MatchContentsExample() {
  return (
    <Host matchContents>
      <Button
        onPress={() => {
          console.log('Pressed');
        }}>
        Click
      </Button>
    </Host>
  );
}

使用样式进行显式设置大小

🌐 Explicit sizing with style

使用 style 来设置 Host 的明确大小，例如使用 flex: 1 填充可用空间。

🌐 Use style to set explicit sizes on the Host, such as filling the available space with flex: 1.

import { Button, Host, VStack, Text } from '@expo/ui/swift-ui';

export default function ExplicitSizingExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={8}>
        <Text>Hello, world!</Text>
        <Button
          onPress={() => {
            console.log('Pressed');
          }}>
          Click
        </Button>
      </VStack>
    </Host>
  );
}

忽略键盘安全区域

🌐 Ignoring keyboard safe area

当 React Native 已经处理键盘避免（例如使用 react-native-keyboard-controller）时，使用 ignoreSafeArea="keyboard"，以防止 SwiftUI 宿主应用自身的键盘内边距。

🌐 Use ignoreSafeArea="keyboard" when React Native is already handling keyboard avoidance (for example, with react-native-keyboard-controller), to prevent the SwiftUI host from applying its own keyboard inset.

import { Host, TextField } from '@expo/ui/swift-ui';
import { KeyboardProvider, KeyboardStickyView } from 'react-native-keyboard-controller';
import { View } from 'react-native';

export default function IgnoreKeyboardExample() {
  return (
    <KeyboardProvider>
      <View style={{ flex: 1, backgroundColor: 'black' }}>
        <KeyboardStickyView
          style={{
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            padding: 16,
            backgroundColor: 'green',
          }}>
          <Host matchContents ignoreSafeArea="keyboard" style={{ backgroundColor: 'red' }}>
            <TextField placeholder="Enter text" multiline />
          </Host>
        </KeyboardStickyView>
      </View>
    </KeyboardProvider>
  );
}

忽略所有安全区域

🌐 Ignoring all safe areas

当你希望 SwiftUI 内容延伸到状态栏后面时，使用 ignoreSafeArea="all"，这对于全屏覆盖或背景非常有用。

🌐 Use ignoreSafeArea="all" when you want SwiftUI content to extend behind the status bar, useful for full-screen overlays or backgrounds.

import { Host, Text, VStack } from '@expo/ui/swift-ui';

export default function IgnoreAllSafeAreasExample() {
  return (
    <Host
      ignoreSafeArea="all"
      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
      <VStack>
        <Text>This content extends behind the status bar and home indicator.</Text>
      </VStack>
    </Host>
  );
}

应用接口

🌐 API

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

Component