用途:DOM 组件允许 Web 代码在原生平台(iOS 的 WKWebView、Android 的 WebView)中原样运行,在 Web 端则直接渲染,无需 WebView 包装。适合引入仅支持 Web 的库(图表、语法高亮、富文本编辑器)、迁移现有 React Web 组件、使用 React Native 不支持的复杂 HTML/CSS 布局、iframe/嵌入内容以及 Canvas/WebGL。
主要能力:文件顶部加 'use dom'; 指令即可创建 DOM 组件;每个文件仅一个默认导出,不能内联定义或与原生组件混写;props 必须可序列化(字符串、数字、布尔、数组、普通对象);CSS 需写在组件文件内。每个组件接收特殊 dom prop(类型 import("expo/dom").DOMProps),可配置 scrollEnabled、contentInsetAdjustmentBehavior、style 等。可将异步函数作为 props 传入,向 WebView 暴露原生能力(如 Alert、存储)。支持 expo-router 的 Link 与 useRouter;但 useLocalSearchParams、useGlobalSearchParams、usePathname、useSegments、useRootNavigation、useRootNavigationState 需在原生父组件读取后以 props 传入。可用 IS_DOM 判断运行环境;资源建议用 require 而非 public 目录。
使用方式:在原生组件中像普通组件一样导入并使用 DOM 组件,通过 dom prop 控制尺寸与滚动。
限制:WebView 有额外开销,原生性能关键或简单 UI 场景不宜使用;_layout 布局路由不能作为 DOM 组件;WebView 拥有独立 JavaScript 上下文,无法与原生直接共享状态;Web 端渲染可能与原生 WebView 略有差异,需多平台测试;大型 DOM 组件可能影响性能。