;
saveData: (data: {
name: string;
value: number;
}) => Promise<{ success: boolean }>;
dom?: import("expo/dom").DOMProps;
}
export default function DOMComponent({ showAlert, saveData }: Props) {
const handleClick = async () => {
await showAlert("Hello from the webview!");
const result = await saveData({ name: "test", value: 42 });
console.log("Save result:", result);
};
return ;
}
```
## 使用 Web 库
DOM 组件可以使用任意 Web 库：
```tsx
// components/syntax-highlight.tsx
"use dom";
import SyntaxHighlighter from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
interface Props {
code: string;
language: string;
dom?: import("expo/dom").DOMProps;
}
export default function SyntaxHighlight({ code, language }: Props) {
return (
{code}
);
}
```
```tsx
// components/chart.tsx
"use dom";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
} from "recharts";
interface Props {
data: Array<{ name: string; value: number }>;
dom: import("expo/dom").DOMProps;
}
export default function Chart({ data }: Props) {
return (
);
}
```
## DOM 组件中的 CSS
由于运行在隔离上下文中，CSS 导入必须放在 DOM 组件文件内：
```tsx
// components/styled-component.tsx
"use dom";
import "@/styles.css"; // CSS file in same directory
export default function StyledComponent({
dom,
}: {
dom: import("expo/dom").DOMProps;
}) {
return (
Styled Content
);
}
```
或者使用内联样式 / CSS-in-JS：
```tsx
"use dom";
const styles = {
container: {
padding: 20,
backgroundColor: "#f0f0f0",
},
title: {
fontSize: 24,
color: "#333",
},
};
export default function StyledComponent({
dom,
}: {
dom: import("expo/dom").DOMProps;
}) {
return (
Styled Content
);
}
```
## DOM 组件中的 Expo Router
expo-router 的 `` 组件和路由 API 都可以在 DOM 组件中使用：
```tsx
"use dom";
import { Link, useRouter } from "expo-router";
export default function Navigation({
dom,
}: {
dom: import("expo/dom").DOMProps;
}) {
const router = useRouter();
return (
);
}
```
### 需要 props 配合的路由 API
下列 hooks 在 DOM 组件中无法直接使用，因为它们需要同步访问原生路由状态：
- `useLocalSearchParams()`
- `useGlobalSearchParams()`
- `usePathname()`
- `useSegments()`
- `useRootNavigation()`
- `useRootNavigationState()`
**解决办法：** 在原生父组件中读取这些值，再以 props 形式传入：
```tsx
// app/[id].tsx (native)
import { useLocalSearchParams, usePathname } from "expo-router";
import DOMComponent from "@/components/dom-component";
export default function Screen() {
const { id } = useLocalSearchParams();
const pathname = usePathname();
return ;
}
```
```tsx
// components/dom-component.tsx
"use dom";
interface Props {
id: string;
pathname: string;
dom?: import("expo/dom").DOMProps;
}
export default function DOMComponent({ id, pathname }: Props) {
return (
Current ID: {id}
Current Path: {pathname}
);
}
```
## 检测 DOM 环境
检查代码是否运行在 DOM 组件中：
```tsx
"use dom";
import { IS_DOM } from "expo/dom";
export default function Component({
dom,
}: {
dom?: import("expo/dom").DOMProps;
}) {
return {IS_DOM ? "Running in DOM component" : "Running natively"}
;
}
```
## 资源
推荐使用 `require` 加载资源，而不是放到 public 目录：
```tsx
"use dom";
// Good - bundled with the component
const logo = require("../assets/logo.png");
export default function Component({
dom,
}: {
dom: import("expo/dom").DOMProps;
}) {
return 
;
}
```
## 在原生组件中使用
像普通组件一样导入并使用 DOM 组件：
```tsx
// app/index.tsx
import { View, Text } from "react-native";
import WebChart from "@/components/web-chart";
import CodeBlock from "@/components/code-block";
export default function HomeScreen() {
return (
Native content above
Native content below
);
}
```
## 平台行为
| 平台 | 渲染方式 |
| ------ | ----------------------------------- |
| iOS | 在 WKWebView 中渲染 |
| Android | 在 WebView 中渲染 |
| Web | 按原样渲染（无 webview 包装） |
在 Web 平台上，`dom` 属性会被忽略，因为不需要 webview。
## 实用建议
- 开发期间 DOM 组件支持热更新
- 保持 DOM 组件职责单一 —— 不要把整个页面塞进 webview
- 导航栏用原生组件，特化的内容用 DOM 组件
- 在所有平台上测试 —— Web 渲染与原生 webview 之间可能存在细微差异
- 较大的 DOM 组件可能影响性能 —— 如有需要请进行性能分析
- webview 拥有独立的 JavaScript 上下文 —— 无法直接与原生共享状态
## 限制
- 仅在任务范围与上游产品或 API 范围明确匹配时使用本技能。
- 在做任何变更前，请对照当前官方文档核对命令、API 行为、定价、配额、凭据及部署影响。
- 不要把生成的示例当作针对特定环境的测试、安全审查或破坏性/高成本操作的审批替代品。