Expo如何支持Web平台？有哪些注意事项？ - 面试题

Expo支持Web平台，使开发者能够使用相同的代码库构建Web应用。这大大扩展了Expo的应用场景，实现了真正的跨平台开发。

Expo for Web特点：

单一代码库：使用相同的JavaScript/TypeScript代码
响应式设计：自动适应不同屏幕尺寸
Web API支持：访问浏览器原生API
PWA支持：可配置为渐进式Web应用
快速开发：支持热重载和快速刷新

配置Web支持：

安装依赖：

bash
npx expo install react-dom react-native-web @expo/webpack-config

配置app.json：

json
{
  "expo": {
    "web": {
      "bundler": "webpack",
      "output": "single",
      "favicon": "./assets/favicon.png"
    },
    "experiments": {
      "typedRoutes": true
    }
  }
}

启动Web开发服务器：

bash
npx expo start --web

平台特定代码：

使用Platform模块处理平台差异：

typescript
import { Platform } from 'react-native';

function MyComponent() {
  if (Platform.OS === 'web') {
    return <div>Web specific content</div>;
  }
  return <View>Mobile specific content</View>;
}

Web特定API：

窗口API：

typescript
// 获取窗口尺寸
const width = window.innerWidth;
const height = window.innerHeight;

// 监听窗口大小变化
window.addEventListener('resize', handleResize);

本地存储：

typescript
// 使用localStorage
localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');

导航API：

typescript
// 使用浏览器历史
window.history.pushState({}, '', '/new-route');
window.history.back();

样式适配：

响应式样式：

typescript
import { StyleSheet, Dimensions } from 'react-native';

const styles = StyleSheet.create({
  container: {
    width: Dimensions.get('window').width > 768 ? '80%' : '100%',
    padding: 16,
  },
});

CSS媒体查询：

typescript
// 使用expo-linear-gradient等库
import { LinearGradient } from 'expo-linear-gradient';

<LinearGradient
  colors={['#4c669f', '#3b5998']}
  style={{ flex: 1 }}
/>

Web特定组件：

HTML元素：

typescript
// 在Web上使用HTML元素
import { View, Text } from 'react-native';

// 在Web上渲染为div和span
<View style={{ padding: 16 }}>
  <Text>Hello Web</Text>
</View>

Web特定库：

typescript
// 使用react-web-specific库
import { useMediaQuery } from 'react-responsive';

const isDesktop = useMediaQuery({ minWidth: 992 });

性能优化：

代码分割：

typescript
// 使用React.lazy进行代码分割
const LazyComponent = React.lazy(() => import('./LazyComponent'));

懒加载：

typescript
// 懒加载图片
import { Image } from 'react-native';

<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  loading="lazy"
/>

缓存策略：

typescript
// 配置Service Worker进行缓存
// 在public/sw.js中配置

PWA配置：

创建manifest.json：

json
{
  "name": "My Expo App",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/assets/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

配置Service Worker：

javascript
// public/sw.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/static/js/main.js'
      ]);
    })
  );
});

部署Web应用：

构建生产版本：

bash
npx expo export:web

部署到Vercel：

bash
# 安装Vercel CLI
npm i -g vercel

# 部署
vercel

部署到Netlify：

bash
# 安装Netlify CLI
npm i -g netlify-cli

# 部署
netlify deploy --prod

常见问题：

样式差异：Web和移动端样式可能有所不同，需要测试和调整
API兼容性：某些移动端API在Web上不可用，需要提供替代方案
性能问题：Web版本可能比移动端慢，需要优化加载和渲染
触摸事件：Web需要同时支持鼠标和触摸事件
键盘导航：Web需要支持键盘导航和无障碍访问

最佳实践：

渐进增强：先实现核心功能，然后为Web添加特定优化
响应式设计：确保应用在不同屏幕尺寸上都能良好显示
性能监控：使用Web性能工具监控和优化加载速度
SEO优化：添加meta标签和结构化数据
测试覆盖：在多个浏览器和设备上测试Web版本

Expo for Web使开发者能够用一套代码构建真正的跨平台应用，大大提高了开发效率和代码复用率。