This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).
RNHostView
一个组件，可在 SwiftUI 中启用 React Native 视图。
iOS
tvOS
For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.
一个组件，用于在 React Native 视图渲染到 SwiftUI 组件内部时实现正确的布局行为。它通过更新 shadow node 的大小，将 SwiftUI 的布局信息同步回 React Native 的 Yoga 布局系统。
当 React Native 视图放置在诸如 BottomSheet、Popover 或 HStack 等 SwiftUI 组件内部时，两个布局系统需要进行通信。RNHostView 负责桥接这一差距：
- 使用
matchContents：shadow node 的大小会被设置为匹配子 React Native 视图的固有尺寸，从而允许 SwiftUI 父组件根据 React Native 内容来决定自身大小。 - 不使用
matchContents：shadow node 的大小会被设置为匹配父 SwiftUI 视图的大小，从而允许 React Native 内容填充可用空间（适用于flex: 1布局）。
安装
Terminal
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
用法
使用 matchContents 的基本用法
当你希望 SwiftUI 父组件根据 React Native 内容来决定自身大小时，请使用 matchContents。
RNHostView with matchContents
import { useState } from 'react'; import { Pressable, Text, View } from 'react-native'; import { Host, BottomSheet, Button, RNHostView } from '@expo/ui/swift-ui'; function Example() { const [isPresented, setIsPresented] = useState(false); return ( <Host style={{ flex: 1 }}> <Button label="Open Sheet" onPress={() => setIsPresented(true)} /> <BottomSheet isOpened={isPresented} onIsOpenedChange={setIsPresented}> <RNHostView matchContents> <View style={{ padding: 24 }}> <Text style={{ fontSize: 18, fontWeight: 'bold' }}>React Native 内容</Text> <Pressable style={{ backgroundColor: '#007AFF', padding: 12, borderRadius: 8, marginTop: 16 }} onPress={() => setIsPresented(false)}> <Text style={{ color: 'white', textAlign: 'center' }}>关闭</Text> </Pressable> </View> </RNHostView> </BottomSheet> </Host> ); }
不使用 matchContents 的弹性内容
当你的 React Native 内容使用 flex: 1 时，请省略 matchContents 属性，这样内容就会填充可用的 SwiftUI 空间。
RNHostView with flex content
import { useState } from 'react'; import { Text, View } from 'react-native'; import { Host, BottomSheet, Button, RNHostView } from '@expo/ui/swift-ui'; function Example() { const [isPresented, setIsPresented] = useState(false); return ( <Host style={{ flex: 1 }}> <Button label="Open Sheet" onPress={() => setIsPresented(true)} /> <BottomSheet isOpened={isPresented} onIsOpenedChange={setIsPresented} presentationDetents={['medium', 'large']}> <RNHostView> <View style={{ flex: 1, backgroundColor: '#007AFF', padding: 24 }}> <Text style={{ color: 'white', fontSize: 18 }}> 此内容会填充可用空间 </Text> </View> </RNHostView> </BottomSheet> </Host> ); }
在 Popover 中使用
RNHostView 在 Popover 中也能很好地工作，用于展示可交互的 React Native 内容。
RNHostView in Popover
import { useState } from 'react'; import { Pressable, Text, View } from 'react-native'; import { Host, Button, Popover, RNHostView } from '@expo/ui/swift-ui'; function Example() { const [isPresented, setIsPresented] = useState(false); const [counter, setCounter] = useState(0); return ( <Host style={{ flex: 1 }}> <Popover isPresented={isPresented} onIsPresentedChange={setIsPresented}> <Popover.Trigger> <Button onPress={() => setIsPresented(true)} label="显示 Popover" /> </Popover.Trigger> <Popover.Content> <RNHostView matchContents> <View style={{ padding: 24 }}> <Text style={{ fontSize: 16, fontWeight: 'bold', marginBottom: 8 }}> React Native 内容 </Text> <Text style={{ color: '#666', marginBottom: 12 }}>计数器：{counter}</Text> <Pressable style={{ backgroundColor: '#007AFF', padding: 12, borderRadius: 8, alignItems: 'center', }} onPress={() => setCounter(counter + 1)}> <Text style={{ color: 'white', fontWeight: '600' }}>增加</Text> </Pressable> </View> </RNHostView> </Popover.Content> </Popover> </Host> ); }
API
import { RNHostView } from '@expo/ui/swift-ui';
Component
Type: React.Element<RNHostViewProps>