SuperAPI AI 工具集

use-dom

前端与建站

查看项目

更新于 10-16 03:05

技能介绍

用途:DOM 组件让 Web 代码在原生平台以 WebView 原样运行,在 Web 端直接按原样渲染,从而在 Expo 应用中使用依赖 DOM API 的 Web 库(如 recharts、chart.js、语法高亮、富文本编辑器),或把现有 React Web 组件增量迁移到原生,也适用于复杂 HTML/CSS 布局、iframe/嵌入内容、Canvas/WebGL。

用法:在文件顶部写 'use dom'; 指令,每个文件仅一个默认导出组件,不可内联或与原生组件混写;必须单独成文件,props 只能传可序列化值(字符串、数字、布尔、数组、普通对象),CSS 需写在该组件文件内(隔离上下文)。每个 DOM 组件会收到 dom prop(类型 import("expo/dom").DOMProps),用于配置 WebView,如 scrollEnabled、contentInsetAdjustmentBehavior、style 尺寸等。可从原生传入 async 函数作为 props,向 WebView 暴露原生能力;可用 IS_DOM 判断运行环境;资源建议用 require 引入。expo-router 的 Link 和 router API 可在此运行,但 useLocalSearchParams、usePathname、useSegments 等需同步原生路由状态的 hooks 不能直接用,应在原生父组件读取后以 props 传入。

平台行为:iOS 用 WKWebView,Android 用 WebView,Web 端原样渲染(忽略 dom prop)。

限制:原生性能关键场景、简单 UI、需要深度原生集成或 _layout 布局路由时不宜使用;WebView 有额外开销和独立 JavaScript 上下文,不能与原生直接共享状态;不同平台渲染可能略有差异,大型 DOM 组件可能影响性能。