This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
RNHostView
一个用于在 @expo/ui 视图中承载 React Native 视图的跨平台组件。
在通用的 @expo/ui 布局中承载一个 React Native 视图子树。在 Android 和 iOS 上，它重新导出平台原生的 适用于 Jetpack Compose 的 RNHostView/适用于 SwiftUI 的 RNHostView，因此 React Native 子组件会桥接到外部的 Compose/SwiftUI 树中。在 web 上，没有可供桥接的原生宿主树，因此它会回退到一个 React Native View，用来包裹这些子组件。
安装
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
用法
基本用法
将一个 React Native 视图子树放置在任意通用的 @expo/ui 布局中。
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' }}>原生 UI 标签</Text> <RNHostView matchContents> <View style={{ alignSelf: 'flex-start', padding: 16, backgroundColor: '#9B59B6', borderRadius: 10, }}> <RNText style={{ color: 'white' }}>普通 React Native 内容</RNText> </View> </RNHostView> </Column> </Host> ); }
填充父级 vs. 匹配子级
默认情况下，RNHostView 会填充其原生父级。设置 matchContents 后，它会缩小以适配其 React Native 子组件。
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' }}>填充父级尺寸</Text> <Text textStyle={{ fontSize: 12, color: '#666666' }}> RNHostView 会填充原生父级的 100×100 框架。 </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' }}>匹配子级尺寸</Text> <Text textStyle={{ fontSize: 12, color: '#666666' }}> RNHostView 会缩小以包裹其 50×50 的子元素。 </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
Type: React.Element<RNHostViewProps>
Hosts React Native views inside Jetpack Compose or SwiftUI views.
Props for the RNHostView component.
booleanWhether the component is disabled. Disabled components do not respond to user interaction.
boolean • Default: falseWhen 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.
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.
() => voidCalled when the component appears on screen.
() => voidCalled when the component is removed from screen.
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.