技术选型背景与架构设计原则

在2026年的移动端开发领域，React Native 0.72凭借其New Architecture（Fabric渲染引擎、TurboModules模块系统）和TypeScript深度集成，已成为跨平台商城应用的首选框架。结合Vite 4的极速构建能力，我们构建了以下核心架构原则：

源码及演示：xcxyms.top
全栈TypeScript：从React Native前端到Node.js后端统一类型系统
模块化共享：通过Monorepo实现业务逻辑、UI组件、工具函数的跨端复用
性能优化：利用Vite的ES模块原生支持和React Native的JSI层通信
工程化保障：集成ESLint、Prettier、Vitest形成完整的质量门禁

Monorepo工程结构与依赖管理

# 项目根目录结构
├── packages/
│   ├── shared/          # 跨端共享代码
│   │   ├── api/         # API请求封装
│   │   ├── types/       # 全局类型定义
│   │   └── utils/       # 工具函数
│   ├── web/             # Vite+React Web端
│   └── mobile/          # React Native移动端
├── scripts/             # 构建脚本
└── package.json         # 工作区根配置

关键配置（根目录package.json）：

{
  "name": "mall-monorepo",
  "private": true,
  "workspaces": ["packages/*"],
  "scripts": {
    "mobile:dev": "yarn workspace mobile start",
    "web:dev": "yarn workspace web dev",
    "build:mobile": "yarn workspace mobile build",
    "build:web": "yarn workspace web build"
  },
  "devDependencies": {
    "typescript": "^5.8.0",
    "vite": "^4.5.0",
    "eslint": "^9.0.0",
    "turbo": "^1.12.0"  // 增量构建优化
  }
}

React Native 0.72移动端实现

1. New Architecture集成配置

vite.config.ts（需使用vite-plugin-rnw插件）：

import { defineConfig } from 'vite'
import rnw from 'vite-plugin-rnw'

export default defineConfig({
  plugins: [
    rnw({
      // 启用Fabric渲染引擎
      fabric: true,
      // 配置TurboModules
      turboModules: {
        enabled: true,
        resolveDeps: ['react-native-reanimated']
      }
    })
  ],
  resolve: {
    alias: {
      '@shared': require('path').resolve(__dirname, '../packages/shared')
    }
  }
})

2. 核心组件实现

// packages/mobile/src/components/ProductCard.tsx
import React from 'react'
import { View, Text, Image, Pressable } from 'react-native'
import { Product } from '@shared/types'
import { useCart } from '@shared/hooks/useCart'

interface Props {
  product: Product
}

const ProductCard: React.FC<Props> = ({ product }) => {
  const { addToCart } = useCart()

  return (
    <View className="bg-white rounded-lg shadow-md p-4">
      <Image 
        source={{ uri: product.image }} 
        className="w-full h-48 rounded-md mb-3"
        resizeMode="contain"
      />
      <Text className="text-lg font-semibold mb-1">{product.name}</Text>
      <Text className="text-gray-500 mb-2">¥{product.price}</Text>
      <Pressable
        onPress={() => addToCart(product)}
        className="bg-blue-500 rounded-full py-2 px-4"
      >
        <Text className="text-white text-center">加入购物车</Text>
      </Pressable>
    </View>
  )
}

export default React.memo(ProductCard) // 使用React.memo优化性能

TurboModules性能优化

原生模块桥接示例（Android）：

// android/app/src/main/java/com/mall/PerformanceModule.kt
class PerformanceModule(reactContext: ReactApplicationContext) : 
    ReactContextBaseJavaModule(reactContext) {

    override fun getName(): String = "Performance"

    @ReactMethod
    fun trackRenderTime(tag: String, startTime: Double) {
        val renderTime = System.currentTimeMillis() - startTime.toLong()
        // 上报性能数据到监控系统
    }
}

TypeScript类型声明：

// packages/shared/types/native.d.ts
declare module 'react-native' {
  interface NativeModules {
    Performance: {
      trackRenderTime(tag: string, startTime: number): void
    }
  }
}

Vite 4+React Web端实现

1. 响应式布局系统

tailwind.config.js：

module.exports = {
  content: [
    "./packages/web/src/**/*.{js,ts,jsx,tsx}",
    "./packages/shared/components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px'
    }
  }
}

2. 跨端组件复用（Button组件示例）

// packages/shared/components/Button.tsx
import React from 'react'
import { Pressable, Text, PressableProps } from 'react-native'

interface ButtonProps extends PressableProps {
  title: string
  variant?: 'primary' | 'secondary'
}

// 移动端实现
export const NativeButton: React.FC<ButtonProps> = ({ title, variant = 'primary', ...props }) => (
  <Pressable 
    className={`
      py-2 px-4 rounded-full
      ${variant === 'primary' ? 'bg-blue-500' : 'bg-gray-200'}
    `}
    {...props}
  >
    <Text className={`text-center ${variant === 'primary' ? 'text-white' : 'text-gray-800'}`}>
      {title}
    </Text>
  </Pressable>
)

// Web端实现（通过文件后缀区分）
// packages/shared/components/Button.web.tsx
import React from 'react'

export const WebButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & { title: string }> = ({ 
  title, 
  className = '',
  children,
  ...props 
}) => (
  <button 
    className={`
      py-2 px-4 rounded-full
      bg-blue-500 text-white hover:bg-blue-600
      ${className}
    `}
    {...props}
  >
    {children || title}
  </button>
)

3. Vite插件链优化

vite.config.ts（Web端）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@shared': path.resolve(__dirname, '../shared'),
      // 自动处理.web.tsx后缀
      'react-native': 'react-native-web'
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-native-web'],
          ui: ['@shared/components']
        }
      }
    }
  }
})

全栈类型安全实践

1. API请求类型定义

// packages/shared/types/api.ts
export interface ApiResponse<T> {
  code: number
  message: string
  data: T
}

export interface Product {
  id: string
  name: string
  price: number
  image: string
  stock: number
}

export type GetProductsParams = {
  categoryId?: string
  page?: number
  pageSize?: number
}

2. 请求客户端封装

// packages/shared/api/client.ts
import axios from 'axios'
import type { ApiResponse, GetProductsParams } from '../types'

const api = axios.create({
  baseURL: process.env.API_BASE_URL,
  timeout: 10000
})

export const getProducts = async (params: GetProductsParams): Promise<ApiResponse<Product[]>> => {
  const { data } = await api.get('/products', { params })
  return data
}

3. 移动端原生模块类型安全

// packages/shared/hooks/usePerformance.ts
import { NativeModules } from 'react-native'

const { Performance } = NativeModules

export const usePerformance = () => {
  const trackRenderTime = (tag: string) => {
    if (__DEV__) {
      const startTime = performance.now()
      // 使用requestAnimationFrame确保DOM更新完成
      requestAnimationFrame(() => {
        Performance.trackRenderTime(tag, startTime)
      })
    }
  }

  return { trackRenderTime }
}

结语

通过本次对Vite 4+TypeScript+React Native 0.72全栈架构在商城小程序中的实践探索，我们见证了现代化前端技术栈在实际商业项目中的强大生命力。这种架构组合不仅显著提升了开发效率与代码质量，更通过其卓越的性能表现和跨平台能力，为商城类应用提供了可靠的技术基础。未来，随着这些技术的持续演进，全栈开发将更加注重开发体验与用户体验的平衡。希望本文的实践经验能为同行提供有价值的参考，让我们共同在快速变化的技术浪潮中，不断探索更优雅、更高效的架构解决方案，推动小程序开发生态向更高水平迈进。