用途:'use dom' 是 React Native 的指令,让标记该指令的组件在原生 WebView 中渲染,从而在保持应用其余部分原生的同时使用完整浏览器 DOM。核心原则是把它当作接入无 React Native 等价实现的 Web 库的桥梁,DOM 组件运行在隔离 WebView 中,通过可序列化 props 与原生应用通信。
主要能力:可渲染 Web 图表库(recharts、Chart.js、D3)、代码语法高亮(Prism、Shiki、highlight.js)、富文本编辑器(TipTap、Lexical、Quill)、Web 地图库(Leaflet、Mapbox GL JS)、复杂 HTML/CSS 内容(markdown、文档),以及任何依赖浏览器 API(DOM、Canvas、WebGL)的 npm 包。
使用方式:在组件文件第一行写 'use dom',并在 Props 类型中加入 dom?: import('expo/dom').DOMProps。dom prop 由框架自动注入,无需手动传递。可用 dom={{ scrollEnabled: true }} 允许滚动,dom={{ matchContents: true }} 按内容自动调整高度。所有传入 props 必须可 JSON 序列化,支持原始值、普通对象与数组,以及参数可序列化的回调函数;不支持 JSX 元素、类实例、refs 和闭包引用非序列化数据的函数。原生侧需用带明确宽高的 View 包裹,因为 WebView 需要已知框架。
适用场景:需要 Web 专属库的图表、高亮、编辑器、地图与复杂 HTML 内容。
限制:每个 DOM 组件都会创建 WebView 实例,开销较大,建议每屏最多 2-3 个;首次挂载有渲染延迟;避免频繁更新 props;简单 UI、性能敏感动画、需要原生设备 API 的场景不应使用。DOM 组件运行在浏览器上下文,无法访问 NativeModules。常见错误包括忘记首行指令、传入不可序列化 props、未设置父容器尺寸、类型定义缺少 dom prop。