This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

主机

一个 SwiftUI Host 组件，可在 React Native 中启用 SwiftUI 组件。

iOS

tvOS

GitHub

npm

更新日志

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

由于 Host 组件是一个 React Native 的 View，你可以向它传递 style 属性，或传递 matchContents 属性，使 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 自动调整自身大小以适配其 SwiftUI 内容，而不是要求显式指定尺寸。

注意： matchContents 仅适用于具有固有尺寸或显式 frame 的组件（例如 Button、Toggle、Text）。像 Slider 和线性 ProgressView 这类可伸缩宽度组件会扩展以填充可用空间，并且没有固有宽度，使用 matchContents 会导致其宽度接近于零。对于这些组件，请要么在组件上应用 frame 修饰符以给它显式宽度，要么改为在 Host 上使用 style 进行显式设置尺寸（例如 style={{ flex: 1 }} 或 style={{ width: 300 }}）。

MatchContentsExample.tsx

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

export default function MatchContentsExample() {
  return (
    <Host matchContents>
      <Button
        onPress={() => {
          console.log('已按下');
        }}>
        点击
      </Button>
    </Host>
  );
}

使用 style 显式设置尺寸

使用 style 为 Host 设置显式尺寸，例如使用 flex: 1 让其填充可用空间。

ExplicitSizingExample.tsx

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

export default function ExplicitSizingExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={8}>
        <Text>你好，世界！</Text>
        <Button
          onPress={() => {
            console.log('已按下');
          }}>
          点击
        </Button>
      </VStack>
    </Host>
  );
}

忽略键盘安全区域

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

IgnoreKeyboardExample.tsx

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="输入文本" multiline />
          </Host>
        </KeyboardStickyView>
      </View>
    </KeyboardProvider>
  );
}

忽略所有安全区域

当你希望 SwiftUI 内容延伸到状态栏后面时，请使用 ignoreSafeArea="all"，这对于全屏遮罩层或背景很有用。

IgnoreAllSafeAreasExample.tsx

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>此内容会延伸到状态栏和 Home 指示器后面。</Text>
      </VStack>
    </Host>
  );
}

API

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

Component

`Host`

iOS

tvOS

Type: React.Element<HostProps>

A hosting component for SwiftUI views.

HostProps

`children`

iOS

tvOS

Type: React.ReactNode

`colorScheme`

iOS

tvOS

Optional • Literal type: string

The color scheme of the host view.

Acceptable values are: 'light' | 'dark'

`ignoreSafeArea`

iOS

tvOS

Optional • Literal type: string

Controls which safe area regions the SwiftUI hosting view should ignore. Can only be set once on mount.

'all'- ignores all safe area insets.
'keyboard' - ignores only the keyboard safe area.

Acceptable values are: 'all' | 'keyboard'

`layoutDirection`

iOS

tvOS

Optional • Literal type: string

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

Acceptable values are: 'leftToRight' | 'rightToLeft'

`matchContents`

iOS

tvOS

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 SwiftUI. Can be only set once on mount.

Acceptable values are: boolean | { horizontal: boolean, vertical: boolean }

`onLayoutContent`

iOS

tvOS

Optional • Type:

(event: {
  nativeEvent: {
  height: number, 
  width: number
}
}) => void

Callback function that is triggered when the SwiftUI content completes its layout. Provides the current dimensions of the content, which may change as the content updates.

`style`

iOS

tvOS

Optional • Type: StyleProp<ViewStyle>

`useViewportSizeMeasurement`

iOS

tvOS

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 SwiftUI layout. This is particularly useful for SwiftUI views that need to fill their available space, such as Form.

Inherited Props

CommonViewModifierProps