react实现三端开发

React 实现三端开发（Web、iOS、Android）

React 生态系统提供多种工具链支持三端开发，核心思路是通过一套代码生成 Web、iOS 和 Android 应用。以下是主流技术方案：

React Native + React DOM

通过 React Native 覆盖移动端，React DOM 处理 Web 端，共享业务逻辑代码。

技术组合：

• 移动端：React Native 编译为原生组件
• Web端：React DOM 渲染传统 Web 页面
• 状态管理：Redux/MobX 实现跨平台状态共享
• 构建工具：Metro（RN） + Webpack（Web）

代码结构示例：

src/
  ├── components/    # 共享组件
  ├── platforms/
  │   ├── mobile/    # RN专用组件
  │   └── web/       # Web专用组件
  └── stores/        # 全局状态

跨平台框架方案

使用封装度更高的框架实现三端统一开发：

1. Taro

• 支持 React 语法
• 编译为各端原生代码
• 内置多平台适配方案
• 典型配置：

  // config/index.js
  export default {
    platforms: ['weapp', 'h5', 'rn']
  }

2. React Native for Web

• 将 RN 组件运行在浏览器环境
• 通过 react-art 实现绘图兼容
• 关键依赖：

  "dependencies": {
    "react-native-web": "^0.19.0",
    "react-scripts": "5.0.1"
  }

共享代码策略

组件开发规范：

• 使用平台无关的 React API

• 通过 Platform.OS 判断平台差异

  import { Platform } from 'react-native';
  
  const styles = Platform.select({
    ios: { padding: 10 },
    android: { padding: 5 },
    default: { padding: 15 }
  });

样式处理方案：

• RN 使用 StyleSheet
• Web 使用 CSS Modules
• 共享方案：

  // sharedStyles.js
  export const colors = {
    primary: '#3498db',
    secondary: '#e74c3c'
  };

构建部署流程

开发环境：

• 独立启动各平台开发服务器

  

  # Web
  npm run start:web
  
  # iOS
  react-native run-ios
  
  # Android
  react-native run-android

生产构建：

• 分离构建命令

  "scripts": {
    "build:web": "react-scripts build",
    "build:ios": "react-native bundle --platform ios",
    "build:android": "react-native bundle --platform android"
  }

性能优化要点

移动端专项：

• 使用 FlatList 替代长列表渲染
• 原生模块处理复杂动画
• 避免跨平台桥接频繁调用

Web端专项：

• 代码分割按需加载
• 服务端渲染提升首屏速度
• PWA 离线缓存支持

通用优化：

• 使用 memo 和 useCallback 减少重渲染
• 共享工具函数通过 Lodash 实现
• 错误边界处理平台差异异常

调试工具链

跨平台调试方案：

• React DevTools 调试基础组件
• Flipper 调试 RN 应用
• Chrome DevTools 调试 Web 版本
• 统一日志系统：

  const logger = Platform.select({
    native: require('react-native-logs'),
    default: require('winston')
  });

注意事项

1. 平台差异处理应集中管理，避免分散判断
2. 移动端需考虑触摸事件与 Web 点击事件差异
3. 字体/图标等资源需要各平台单独配置
4. 导航系统需使用 react-navigation 等跨平台方案

通过合理架构设计，React 技术栈可实现 85%+ 代码复用率，同时保持各平台原生体验。实际开发中建议采用 Monorepo 结构管理多平台代码。