Expo Web 如何实现跨端开发并避开常见坑？

Expo 支持 Web 的基础是 React Native for Web：View、Text、Pressable 等组件会映射到浏览器 DOM，再配合 Metro、Expo Router 和静态导出，把同一套业务代码跑到 iOS、Android 和 Web。它最大的价值是复用，而不是把移动端应用一键变成高质量网站。上线时，Web 端还要单独处理 SEO、响应式宽度、鼠标键盘交互、无障碍和浏览器 API 差异。

追问

Expo Web 怎么启动和发布？

开发时用 npx expo start --web。发布静态站点常用 npx expo export --platform web，再把产物交给 Vercel、Netlify、Nginx 或对象存储。

React Native for Web 做了什么？

它把 React Native 组件和样式模型翻译成 Web 可理解的结构。好处是组件复用，代价是并非所有原生能力都有 Web 等价物。

哪些代码需要平台区分？

相机、推送、文件系统、安全存储、分享、下载和路由跳转最容易分叉。简单差异用 Platform.OS，差异大时用 .web.tsx。

跨端样式最容易踩什么坑？

移动端固定宽度、全屏弹层、触摸优先交互放到桌面会很别扭。Web 端要补 hover、focus、键盘操作和宽屏断点。

SEO 和 PWA 能自动做好吗？

不能。Expo Router 能让 URL 更自然，但标题、描述、结构化内容、静态导出策略、manifest 和缓存策略仍要自己设计。

写段代码

tsx
const padding = Platform.select({ web: 24, default: 16 });