SuperAPI AI 工具集

use-dom

通用与其它

查看项目

更新于 10-16 01:15

技能介绍

用途:DOM 组件允许网页代码在原生平台(iOS 用 WKWebView、Android 用 WebView)的 WebView 中原样运行,在 Web 端不加包装直接渲染,从而在不修改代码的情况下使用 recharts、react-syntax-highlighter 等仅限 Web 的 React 库,并把已有 Web 组件逐步迁移到原生。

适用场景:需要仅限 Web 的库(图表、代码高亮、富文本编辑器)、迁移现有 Web 代码、复杂 HTML/CSS 布局、iframe 或嵌入内容、Canvas 或 WebGL。不建议在性能要求高、UI 简单、需要深度原生集成时使用;_layout 布局文件不能作为 DOM 组件。

使用方式:新建文件并在顶部加 'use dom'; 指令,文件只能有一个默认导出,不能内联定义或与原生组件混写,props 只能传字符串、数字、布尔、数组和普通对象等可序列化值。DOM 组件会收到特殊 dom 属性(类型 import("expo/dom").DOMProps),可配置 scrollEnabled、contentInsetAdjustmentBehavior、style 等。CSS 写在组件文件内或用内联样式/CSS-in-JS;资源优先用 require 引入。

能力:可把原生异步函数作为 props 传入,让 WebView 内触发原生操作;expo-router 的 Link 与 useRouter 可在组件内使用;用 IS_DOM 判断运行环境。useLocalSearchParams、useGlobalSearchParams、usePathname、useSegments 等需要同步访问原生路由状态的 hook 不能直接使用,需在原生父组件读取后以 props 传入。

限制:WebView 有独立 JavaScript 上下文,不能与原生直接共享状态;Web 端的 dom 属性会被忽略;大体积 DOM 组件可能影响性能;各平台渲染可能有差异,需分别测试。