RN主机视图

一个跨平台组件，用于在 @expo/ui 视图中承载 React Native 视图。

Android

iOS

Web

Included in Expo Go

Recommended version:

~57.0.3

在通用 @expo/ui 布局中托管 React Native 视图子树。在 Android 和 iOS 上，它重新导出平台原生的 RNHostView 用于 Jetpack Compose/RNHostView 用于 SwiftUI，因此 React Native 子组件可以桥接到周围的 Compose/SwiftUI 树中。在 Web 上，没有原生宿主树可供桥接，因此它回退到封装子组件的 React Native View。

🌐 Hosts a React Native view subtree inside a universal @expo/ui layout. On Android and iOS, it re-exports the platform-native RNHostView for Jetpack Compose/RNHostView for SwiftUI, so React Native children bridge into the surrounding Compose/SwiftUI tree. On web, there is no native host tree to bridge into, so it falls back to a React Native View that wraps the children.

安装

🌐 Installation

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.

用法

🌐 Usage

基本用法

🌐 Basic usage

将 React Native 视图子树放置在通用 @expo/ui 布局中的任何位置。

🌐 Place a React Native view subtree anywhere inside a universal @expo/ui layout.

RNHostViewExample.tsx

import { Host, Column, RNHostView, Text } from '@expo/ui';
import { Text as RNText, View } from 'react-native';

export default function RNHostViewExample() {
  return (
    <Host matchContents>
      <Column spacing={12} style={{ padding: 16 }}>
        <Text textStyle={{ fontWeight: 'bold' }}>Native UI label</Text>
        <RNHostView matchContents>
          <View
            style={{
              alignSelf: 'flex-start',
              padding: 16,
              backgroundColor: '#9B59B6',
              borderRadius: 10,
            }}>
            <RNText style={{ color: 'white' }}>Plain React Native content</RNText>
          </View>
        </RNHostView>
      </Column>
    </Host>
  );
}

填充父级 vs. 匹配子级

🌐 Fill parent vs. match child

默认情况下，RNHostView 会填充其原生父级。将 matchContents 设置为让它缩小以适应其 React Native 子组件。

🌐 By default RNHostView fills its native parent. Set matchContents to have it shrink to fit its React Native children instead.

RNHostViewExample.tsx

import { Host, Column, Row, Text, RNHostView } from '@expo/ui';
import { View } from 'react-native';

export default function RNHostViewExample() {
  return (
    <Host matchContents>
      <Column spacing={24} style={{ padding: 16 }}>
        <Column spacing={8}>
          <Text textStyle={{ fontSize: 18, fontWeight: 'bold' }}>Fill parent size</Text>
          <Text textStyle={{ fontSize: 12, color: '#666666' }}>
            The RNHostView fills the native parent's 100×100 frame.
          </Text>
          <Row style={{ width: 100, height: 100 }}>
            <RNHostView>
              <View style={{ flex: 1, backgroundColor: '#9B59B6', borderRadius: 10, margin: 4 }} />
            </RNHostView>
          </Row>
        </Column>

        <Column spacing={8}>
          <Text textStyle={{ fontSize: 18, fontWeight: 'bold' }}>Match child size</Text>
          <Text textStyle={{ fontSize: 12, color: '#666666' }}>
            The RNHostView shrinks to wrap its 50×50 child.
          </Text>
          <Row style={{ padding: 8 }}>
            <RNHostView matchContents>
              <View
                style={{ width: 50, height: 50, backgroundColor: '#9B59B6', borderRadius: 10 }}
              />
            </RNHostView>
          </Row>
        </Column>
      </Column>
    </Host>
  );
}

应用接口

🌐 API

import { RNHostView } from '@expo/ui';

Component

`RNHostView`

Type: React.Element<RNHostViewProps>

Hosts React Native views inside Jetpack Compose or SwiftUI views.

Props for the RNHostView component.

RNHostViewProps

`children`

Type: ReactElement

The React Native view to host.

`disabled`

Only for:

Android

iOS

Web

Optional • Type: boolean

Whether the component is disabled. Disabled components do not respond to user interaction.

`hidden`

Only for:

Android

iOS

Web

Optional • Type: boolean

Whether the component is hidden.

`matchContents`

Only for:

Android

iOS

Optional • Type: boolean • Default: false

When true, the host updates its size in the native view tree to match the children's size. When false, the host uses the size of the parent native view.

Can only be set once on mount; changing it remounts the component.

`modifiers`

Only for:

Android

iOS

Optional • Type: ModifierConfig[]

Platform-specific modifier escape hatch. Pass an array of modifier configs from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers. A modifier supplied here replaces any modifier of the same type that the component derives from style or other props.

`onAppear`

Only for:

Android

iOS

Web

Optional • Type: () => void

Called when the component appears on screen.

`onDisappear`

Only for:

Android

iOS

Web

Optional • Type: () => void

Called when the component is removed from screen.

`onPress`

Only for:

Android

iOS

Web

Optional • Type: () => void

Called when the component is pressed.

`style`

Only for:

Android

iOS

Web

Optional • Type:

Pick<ViewStyle, 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'>

Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android.

`testID`

Only for:

Android

iOS

Web

Optional • Type: string

Identifier used to locate the component in end-to-end tests.