## 什么是 DOM 组件？ DOM 组件允许 Web 代码在本机平台上的 Web 视图中逐字运行，同时在 Web 上按原样呈现。这使得您可以在 Expo 应用程序中使用纯 Web 库，例如“recharts”、“react-syntax-highlighter”或任何 React Web 库，而无需进行修改。 ## 何时使用 DOM 组件当您需要时使用 DOM 组件： * **仅限 Web 的库** — 图表（recharts、chart.js）、语法突出显示、富文本编辑器或任何依赖于 DOM API 的库 * **迁移 Web 代码** — 将现有的 React Web 组件移植到原生，无需重写 * **复杂的 HTML/CSS 布局** - 当 CSS 功能在 React Native 中不可用时 * **iframes 或嵌入** - 嵌入需要浏览器上下文的外部内容 * **Canvas 或 WebGL** — Web 图形 API 本身不可用 ## 何时不使用 DOM 组件在以下情况下避免使用 DOM 组件： * **本机性能至关重要** — Webview 增加了开销 * **简单的 UI** - React Native 组件对于基本布局更加高效 * **深度本机集成** - 使用本地模块代替本机 API * **布局路线** - `_layout` 文件不能是 DOM 组件 ## 基本 DOM 组件创建一个新文件，在顶部添加“use dom”; 指令： // 组件/WebChart.tsx “使用 dom”；导出默认函数WebChart({ 数据， }：{ 数据：数字[]； dom: import("expo/dom").DOMProps; }) { 返回（

图表数据

{值}

）； } ## DOM 组件的规则 1. **文件顶部必须有`'use dom';`指令** 2. **单一默认导出** — 每个文件一个 React 组件 3. **自己的文件** - 无法内联定义或与本机组件组合 4. **仅限可序列化的属性** - 字符串、数字、布尔值、数组、普通对象 5. **在组件文件中包含 CSS** — DOM 组件在隔离上下文中运行 ## `dom` 属性每个 DOM 组件都会收到一个特殊的 dom 属性用于 webview 配置。始终在你的 props 中输入它： “使用 dom”；接口道具 { 内容：字符串； dom: import("expo/dom").DOMProps; } 导出默认函数 MyComponent({ content }: Props) { 返回

{内容}

; } ### 常见的 `dom` 属性选项 // 禁用主体滚动 // 在凹口下流动（禁用安全区域插入） // 手动控制大小 // 组合选项 ## 向 Webview 公开本机操作将异步函数作为 props 传递，以向 DOM 组件公开本机功能： // app/index.tsx（本机）从“react-native”导入{警报}；从“@/components/dom-component”导入 DOMComponent；导出默认函数 Screen() { 返回（ { Alert.alert("来自网络", 消息); }} saveData={async (数据: { 名称: 字符串; 值: 数字 }) => { // 保存到本机存储、数据库等。 console.log("正在保存：", data); 返回 { 成功：真 }; }} /> ）； } // 组件/dom-component.tsx “使用 dom”；接口道具 { showAlert: (消息: 字符串) => Promise; 保存数据：（数据：{ 名称：字符串；值：数字； }) => Promise<{ success: boolean }>; dom?: import("expo/dom").DOMProps; } 导出默认函数 DOMComponent({ showAlert, saveData }: Props) { const handleClick = async () => { 等待 showAlert("来自网络视图的你好！"); const 结果 = 等待 saveData({ 名称: "测试", 值: 42 }); console.log("保存结果：", result); }; return ; } ## 使用网络库 DOM 组件可以使用任何 Web 库： // 组件/syntax-highlight.tsx “使用 dom”；从“react-syntax-highlighter”导入 SyntaxHighlighter；从“react-syntax-highlighter/dist/esm/styles/hljs”导入{docco}；接口道具 { 代码：字符串；语言：字符串； dom?: import("expo/dom").DOMProps; } 导出默认函数 SyntaxHighlight({ 代码, 语言 }: Props) { 返回（ {代码} ）； } // 组件/chart.tsx “使用 dom”；导入{ 折线图, 线， X轴， Y轴，笛卡尔网格，工具提示， } 来自“重新图表”；接口道具 { 数据：数组<{名称：字符串；值：数字 }>; dom: import("expo/dom").DOMProps; } 导出默认函数 Chart({ data }: Props) { 返回（ <折线图宽度={400}高度={300}数据={数据}> <工具提示/> ）； } ## DOM 组件中的 CSS CSS 导入必须位于 DOM 组件文件中，因为它们在隔离上下文中运行： // 组件/styled-component.tsx “使用 dom”；导入“@/styles.css”； //同目录下的CSS文件导出默认函数 StyledComponent({ 多姆， }：{ dom: import("expo/dom").DOMProps; }) { 返回（

样式内容

）； } 或者使用内联样式/CSS-in-JS： “使用 dom”；常量样式 = { 容器：{ 填充：20，背景颜色: "#f0f0f0", }, 标题：{ 字体大小：24，颜色：“#333”， }, }; 导出默认函数 StyledComponent({ 多姆， }：{ dom: import("expo/dom").DOMProps; }) { 返回（

样式内容

）； } ## DOM 组件中的 Expo 路由器 expo-router `` 组件和路由器 API 在 DOM 组件内工作： “使用 dom”；从“expo-router”导入{链接，useRouter}；导出默认函数导航({ 多姆， }：{ dom: import("expo/dom").DOMProps; }) { const 路由器 = useRouter(); 返回（ <导航> 关于）； } ### 需要 Props 的 Router API 这些钩子不能直接在 DOM 组件中工作，因为它们需要同步访问本机路由状态： * `useLocalSearchParams()` * `useGlobalSearchParams()` * `usePathname()` * `useSegments()` * `useRootNavigation()` * `useRootNavigationState()` **解决方案：** 在本机父级中读取这些值并作为 props 传递： // app/[id].tsx（本机）从“expo-router”导入 { useLocalSearchParams, usePathname }; 从“@/components/dom-component”导入 DOMComponent；导出默认函数 Screen() { const { id } = useLocalSearchParams(); const 路径名 = usePathname(); 返回 ; } // 组件/dom-component.tsx “使用 dom”；接口道具 { id：字符串；路径名：字符串； dom?: import("expo/dom").DOMProps; } 导出默认函数 DOMComponent({ id, pathname }: Props) { 返回（

当前 ID：{id}

当前路径：{pathname}

）； } ## 检测 DOM 环境检查代码是否在 DOM 组件中运行： “使用 dom”；从“expo/dom”导入{ IS_DOM }；导出默认函数 Component({ 多姆， }：{ dom?: import("expo/dom").DOMProps; }) { 返回

{IS_DOM ？ "在 DOM 组件中运行" : "本地运行"}

; } ## 资产更喜欢需要资产而不是使用公共目录： “使用 dom”； // 好 - 与组件捆绑在一起 const 徽标 = require("../assets/logo.png"); 导出默认函数 Component({ 多姆， }：{ dom: import("expo/dom").DOMProps; }) { 返回

; } ## 原生组件的使用像常规组件一样导入和使用 DOM 组件： // 应用程序/index.tsx 从“react-native”导入{视图，文本}；从“@/components/web-chart”导入WebChart；从“@/components/code-block”导入CodeBlock；导出默认函数 HomeScreen() { 返回（ <视图样式={{ flex: 1 }}> 上面的原生内容 <代码块代码=“const x = 1;” 语言=“javascript” dom={{ 滚动启用: true }} /> 下面的原生内容）； } ## 平台行为平台|行为 ---|--- iOS |在WKWebView中渲染安卓 |在 WebView 中渲染网页 |按原样渲染（无 webview 包装器）在网络上，`dom` 属性被忽略，因为不需要 webview。 ## 提示 * DOM组件在开发过程中热重载 * 保持 DOM 组件的焦点——不要将整个屏幕放在 webview 中 * 使用原生组件用于导航镶边，使用 DOM 组件用于专门内容 * 在所有平台上进行测试 - 网页渲染可能与本机网页视图略有不同 * 大型 DOM 组件可能会影响性能 - 如果需要的话进行配置 * webview有自己的JavaScript上下文——不能直接与native共享状态

使用Dom

包含技能