在电商应用中，商品详情页是用户了解商品信息、做出购买决策的关键页面，其设计质量直接影响用户体验和转化率。本文将深入分析一个基于 React Native 实现的商品详情页，探讨其架构设计、技术实现以及鸿蒙跨端适配策略。

状态管理

该商品详情页采用了 React Hooks 中的 useState 进行轻量级状态管理，构建了多层次的状态模型：

const [product] = useState<Product>({
  id: '1',
  name: 'iPhone 15 Pro Max',
  // 其他属性...
});

const [reviews] = useState<Review[]>([
  // 评价数据...
]);

const [activeTab, setActiveTab] = useState<'info' | 'specs' | 'reviews'>('info');
const [quantity, setQuantity] = useState<number>(1);

这种状态管理方式具有以下优势：

• 类型安全：通过 TypeScript 接口 Product 和 Review 确保状态结构一致性
• 模块化：将商品数据、评价数据和 UI 状态分离管理
• 响应式：状态变更自动触发组件重渲染
• 跨端兼容：React Hooks 在鸿蒙系统的 React Native 实现中通常都有良好支持

商品信息展示

商品详情页展示了丰富的商品信息：

• 基本信息：名称、价格、折扣、评分、评价数量、店铺
• 详细描述：商品功能和特点介绍
• 规格参数：以键值对形式展示详细规格
• 用户评价：展示用户评价列表，包含评分、评论和日期

交互

系统实现了完整的商品详情交互功能：

const toggleFavorite = () => {
  Alert.alert('收藏', `商品已${product.isFavorite ? '取消收藏' : '收藏'}`);
};

const addToCart = () => {
  Alert.alert('加入购物车', `已将商品加入购物车，数量: ${quantity}`);
};

const buyNow = () => {
  Alert.alert('立即购买', `正在处理您的订单...`);
};

交互功能包括：

• 收藏功能：切换商品收藏状态
• 加入购物车：将商品加入购物车，支持数量选择
• 立即购买：直接进入购买流程
• 标签切换：在商品信息、规格参数和用户评价之间切换
• 图片轮播：查看商品的多张图片

评价

系统使用 FlatList 高效渲染用户评价列表：

const renderReview = ({ item }: { item: Review }) => (
  <View style={styles.reviewCard}>
    {/* 评价内容 */}
  </View>
);

评价展示包括：

• 用户信息：头像、用户名
• 评价详情：评分、评论内容、评价日期
• 评分可视化：使用星星图标直观展示评分

---

基础架构

该实现采用了 React Native 核心组件库，确保了在鸿蒙系统上的基本兼容性：

• SafeAreaView：适配刘海屏等异形屏
• ScrollView：处理内容滚动
• TouchableOpacity：提供触摸反馈
• FlatList：高效渲染评价列表
• Image：显示商品图片和用户头像
• Alert：系统级弹窗提示

Base64 图标

系统使用 Base64 编码的图标库：

const ICONS_BASE64 = {
  cart: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  // 其他图标...
};

这种处理方式在跨端开发中尤为重要：

• 避免了不同平台对资源文件格式的兼容性问题
• 减少了网络请求，提高了加载速度
• 简化了构建流程，无需处理多平台资源文件

屏幕尺寸

系统通过 Dimensions API 获取屏幕尺寸：

const { width, height } = Dimensions.get('window');

这种方式确保了在不同屏幕尺寸的设备上都能获得一致的布局体验，无论是 React Native 环境还是鸿蒙系统。

---

系统采用了模块化的样式定义：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  // 其他样式...
});

这种方式确保了样式的一致性和可维护性，同时为后续的主题定制和深色模式适配预留了扩展空间。

---

API 兼容性

在鸿蒙系统上使用 React Native 时，应注意以下 API 兼容性问题：

1. FlatList API：鸿蒙系统的 FlatList 实现可能与 React Native 有所差异，建议测试确认滚动和渲染行为
2. Image API：鸿蒙系统的 Image 实现可能与 React Native 有所差异，建议测试确认图片加载行为
3. ScrollView API：鸿蒙系统的 ScrollView 实现可能与 React Native 有所差异，建议测试确认滚动行为

---

1. 类型定义：

   // 更详细的商品类型
   interface Product {
     id: string;
     name: string;
     price: number;
     originalPrice?: number;
     rating: number;
     reviewCount: number;
     store: string;
     category: string;
     description: string;
     specs: { [key: string]: string };
     imageUrl?: string;
     images?: string[]; // 多张图片
     isFavorite: boolean;
     discount?: number;
     tags?: string[];
     stock?: number;
     sales?: number;
   }
   
   // 更详细的评价类型
   interface Review {
     id: string;
     userName: string;
     rating: number;
     comment: string;
     date: string;
     avatar: string;
     images?: string[]; // 评价图片
   }
   

2. 状态管理：

   // 使用 useReducer 管理复杂状态
   const [state, dispatch] = useReducer(productReducer, {
     product: initialProduct,
     reviews: initialReviews,
     activeTab: 'info' as 'info' | 'specs' | 'reviews',
     quantity: 1,
     loading: false,
     error: null
   });
   

3. 性能：

   // 使用 useMemo 缓存计算结果
   const totalPrice = useMemo(() => {
     return product.price * quantity;
   }, [product.price, quantity]);
   
   // 图片轮播优化
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   

4. 错误处理：

   // 添加错误边界
   const addToCart = () => {
     try {
       // 加入购物车逻辑
       Alert.alert('加入购物车', `已将商品加入购物车，数量: ${quantity}`);
     } catch (error) {
       console.error('加入购物车失败:', error);
       Alert.alert('错误', '加入购物车失败，请稍后重试');
     }
   };
   

5. 可访问性：

   // 添加可访问性标签
   <TouchableOpacity
     accessible={true}
     accessibilityLabel="加入购物车"
     // 其他属性
   />
   

本商品详情页实现了一个功能完整、用户友好的商品信息展示界面，通过合理的架构设计和代码组织，为用户提供了良好的购物体验。在跨端开发场景下，该实现充分考虑了 React Native 和鸿蒙系统的兼容性需求，为后续的功能扩展和性能优化预留了空间。

---

商品详情页作为电商应用的核心转化页面，其交互体验、信息呈现完整性和操作便捷性直接决定用户的购买决策。本文将深度拆解这份基于 React Native 构建的商品详情页代码，从数据模型设计、页面架构分层、交互逻辑实现、视觉样式体系四个维度剖析其技术内核，并结合鸿蒙（HarmonyOS）跨端开发实践，提供一套完整的 React Native 到鸿蒙 ArkTS 的适配方案，为跨端电商应用的详情页开发提供可落地的技术参考。

1. 数据模型

商品详情页承载了商品全维度信息的展示与交互，代码首先通过 TypeScript 构建了严谨的类型体系，为后续的状态管理和数据渲染奠定基础：

（1）数据类型

// 商品核心类型：覆盖电商商品全维度属性
type Product = {
  id: string;
  name: string;
  price: number;
  originalPrice?: number;
  rating: number;
  reviewCount: number;
  store: string;
  category: string;
  description: string;
  specs: { [key: string]: string }; // 规格参数：键值对结构
  imageUrl?: string;
  isFavorite: boolean;
  discount?: number;
  tags?: string[];
};

// 评价类型：用户反馈数据结构
type Review = {
  id: string;
  userName: string;
  rating: number;
  comment: string;
  date: string;
  avatar: string;
};

设计亮点分析：

• Product 类型覆盖了详情页所需的全维度商品属性：
  • 基础信息：名称、价格体系（原价/现价/折扣）、评分/评论数、店铺信息；
  • 内容信息：商品描述、规格参数（键值对结构适配任意商品的参数展示）、标签；
  • 交互信息：收藏状态标识，为收藏功能提供数据支撑；
• Review 类型精准匹配用户评价展示需求，包含用户信息、评分、评论内容、时间、头像等核心字段，符合电商评价展示的通用范式；
• 可选属性（originalPrice/discount/tags）的合理使用，兼顾了不同商品类型的展示灵活性与类型安全性。

（2）状态管理

详情页的交互核心是状态的动态变更，代码通过 useState 构建了分层的状态管理体系，精准把控页面全流程的状态流转：

// 核心数据状态：商品基础信息与评价数据
const [product] = useState<Product>({/* 商品完整数据 */});
const [reviews] = useState<Review[]>([/* 评价列表数据 */]);

// 交互状态：页面操作控制
const [activeTab, setActiveTab] = useState<'info' | 'specs' | 'reviews'>('info'); // 选项卡状态
const [quantity, setQuantity] = useState<number>(1); // 购买数量（示例中未完全使用）

状态设计遵循单一职责原则：

• 核心数据状态（product/reviews）：存储商品基础数据和评价数据，初始化后不再变更（实际项目中可对接 API 动态更新）；
• 交互状态：
  • activeTab：控制选项卡切换（商品介绍/规格参数/用户评价），使用字面量类型限制取值范围，保证类型安全；
  • quantity：预留购买数量控制状态，为后续加入购物车/立即购买功能提供扩展支撑。

2. 核心交互逻辑实现

详情页的核心价值在于将商品信息有效传递给用户，并降低购买转化的操作成本，代码实现了选项卡切换、星级评分渲染、收藏/加购/购买、评价列表展示的完整交互逻辑体系：

（1）星级评分

const renderStars = (rating: number) => {
  return Array.from({ length: 5 }, (_, i) => (
    <Text key={i} style={styles.starIcon}>
      {i < Math.floor(rating) ? '⭐' : '☆'}
    </Text>
  ));
};

技术亮点分析：

• 通用化设计：封装为独立函数，支持任意评分值的星级渲染，可复用在商品评分和用户评价评分场景；
• 精准渲染：通过 Math.floor(rating) 实现半星（整数部分）的精准展示，符合电商评分展示的通用规则；
• 性能优化：使用 Array.from 创建固定长度数组，避免冗余计算，保证渲染效率。

（2）核心操作

// 收藏切换逻辑
const toggleFavorite = () => {
  Alert.alert('收藏', `商品已${product.isFavorite ? '取消收藏' : '收藏'}`);
};

// 加入购物车逻辑
const addToCart = () => {
  Alert.alert('加入购物车', `已将商品加入购物车，数量: ${quantity}`);
};

// 立即购买逻辑
const buyNow = () => {
  Alert.alert('立即购买', `正在处理您的订单...`);
};

设计亮点：

• 交互反馈明确：每个操作均通过 Alert.alert 给出明确的操作反馈，符合移动端交互的反馈原则；
• 参数传递完整：加入购物车逻辑关联购买数量状态，为后续扩展数量选择功能提供接口；
• 逻辑解耦：核心操作封装为独立函数，便于后续对接后端 API、添加加载状态等扩展逻辑。

（3）评价列表

const renderReview = ({ item }: { item: Review }) => (
  <View style={styles.reviewCard}>
    <View style={styles.reviewHeader}>
      <View style={styles.userAvatar}>
        <Image source={{ uri: item.avatar }} style={styles.avatarImage} />
      </View>
      <View style={styles.userDetails}>
        <Text style={styles.userName}>{item.userName}</Text>
        <View style={styles.reviewRating}>
          {renderStars(item.rating)}
          <Text style={styles.reviewDate}>{item.date}</Text>
        </View>
      </View>
    </View>
    <Text style={styles.reviewComment}>{item.comment}</Text>
  </View>
);

技术亮点：

• 组件化渲染：将单条评价封装为独立渲染函数，符合 React 组件化设计思想；
• 复用星级渲染：直接调用 renderStars 函数，保证评分展示样式的一致性；
• 布局分层清晰：评价头部（用户信息）与评价内容分离，结构清晰易维护。

3. 页面架构

详情页的布局架构直接决定用户的信息获取效率，代码采用头部导航 + 图片轮播 + 商品基础信息 + 选项卡内容 + 底部操作栏的经典电商详情页布局，结合精细化的视觉交互设计，打造了符合用户直觉的浏览体验。

（1）整体布局

SafeAreaView
├── Header（头部：返回按钮 + 标题 + 功能图标）
├── ScrollView（滚动内容区）
│   ├── ImageContainer（商品图片轮播）
│   ├── ProductInfo（商品基础信息：名称/价格/评分/标签）
│   ├── TabContainer（选项卡导航：介绍/参数/评价）
│   └── TabContent（选项卡内容：动态渲染对应模块）
└── BottomActions（底部操作栏：收藏/客服/加购/购买）

布局设计优势：

• 滚动容器适配：使用 ScrollView 包裹核心内容区，保证长内容的可滚动性，适配不同设备屏幕尺寸；
• 选项卡分层展示：将商品信息按维度拆分为介绍/参数/评价三个模块，降低信息密度，提升用户阅读效率；
• 底部操作栏固定：核心转化按钮（加购/购买）固定在页面底部，保证用户在任意浏览位置均可快速操作；
• 视觉层级清晰：通过卡片式设计、阴影、圆角等视觉元素，区分不同信息模块，提升页面可读性。

---

商品图片轮播区

<View style={styles.imageContainer}>
  <Image source={{ uri: 'https://via.placeholder.com/300x300' }} style={styles.productImage} />
  <View style={styles.imageIndicators}>
    {[1, 2, 3, 4].map((_, index) => (
      <View 
        key={index} 
        style={[
          styles.indicator, 
          index === 0 && styles.activeIndicator
        ]} 
      />
    ))}
  </View>
</View>

设计亮点：

• 响应式尺寸：图片宽度设置为 width * 0.9，保证在不同设备上的展示比例一致；
• 轮播指示器：通过条件样式实现当前图片的指示器高亮，符合移动端轮播交互范式；
• 占位符适配：使用占位图 URL，便于实际项目中替换为真实商品图片地址。

选项卡导航

// 选项卡导航
<View style={styles.tabContainer}>
  <TouchableOpacity 
    style={[styles.tab, activeTab === 'info' && styles.activeTab]}
    onPress={() => setActiveTab('info')}
  >
    <Text style={[styles.tabText, activeTab === 'info' && styles.activeTabText]}>商品介绍</Text>
  </TouchableOpacity>
  {/* 其他选项卡... */}
</View>

// 选项卡内容
<View style={styles.tabContent}>
  {activeTab === 'info' && (/* 商品介绍内容 */)}
  {activeTab === 'specs' && (/* 规格参数内容 */)}
  {activeTab === 'reviews' && (/* 用户评价内容 */)}
</View>

设计亮点：

• 状态驱动渲染：通过 activeTab 状态控制选项卡的选中态和内容区的展示，逻辑清晰；
• 视觉反馈明确：选中态通过底部边框和文字颜色变化双重强化，提升用户操作感知；
• 内容懒渲染：仅渲染当前选中的选项卡内容，减少不必要的 DOM 渲染，提升页面性能。

底部操作栏

<View style={styles.bottomActions}>
  <TouchableOpacity style={styles.actionButton} onPress={toggleFavorite}>
    <Text style={styles.actionIcon}>❤️</Text>
    <Text style={styles.actionText}>收藏</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.actionButton}>
    <Text style={styles.actionIcon}>💬</Text>
    <Text style={styles.actionText}>客服</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.cartButton} onPress={addToCart}>
    <Text style={styles.cartButtonText}>加入购物车</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.buyButton} onPress={buyNow}>
    <Text style={styles.buyButtonText}>立即购买</Text>
  </TouchableOpacity>
</View>

设计亮点：

• 功能权重区分：收藏/客服按钮占比更小，加购/购买按钮占比更大且使用醒目的背景色，突出核心转化功能；
• 视觉层次清晰：通过不同的背景色（橙色/蓝色）区分加购和购买按钮，符合电商设计的通用认知；
• 固定定位：使用 position: 'absolute' 固定在页面底部，保证在任意滚动位置均可操作。

（3）样式

代码通过 StyleSheet.create 构建了完整的样式体系，遵循复用性 + 语义化 + 视觉一致性原则：

const styles = StyleSheet.create({
  // 容器样式
  container: { flex: 1, backgroundColor: '#f5f7fa' },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  
  // 商品信息样式
  productInfo: {
    backgroundColor: '#ffffff',
    padding: 16,
    margin: 16,
    borderRadius: 12,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  
  // 价格样式
  currentPrice: {
    fontSize: 22,
    color: '#ef4444',
    fontWeight: 'bold',
    marginRight: 8,
  },
  originalPrice: {
    fontSize: 14,
    color: '#94a3b8',
    textDecorationLine: 'line-through',
    marginRight: 8,
  },
  
  // 其他样式...
});

样式设计核心原则：

• 色彩体系统一：主色调采用蓝色（#3b82f6），警示色/价格色采用红色（#ef4444），辅助色采用橙色（#f59e0b），中性色采用灰度渐变，符合电商视觉设计规范；
• 阴影与层级：通过 elevation（安卓）和 shadow（iOS）属性，为卡片组件添加轻微阴影，提升视觉层次感；
• 圆角统一：核心组件统一使用 12px/8px/6px 圆角，符合现代移动端 UI 设计趋势；
• 间距规范：采用 16px/12px/8px/4px 的间距体系，保证页面布局的呼吸感和一致性；
• 文字层级：通过字体大小（22px/18px/16px/14px/12px）和字重（bold/500/normal）区分信息重要程度，提升可读性。

---

将 React Native 商品详情页迁移至鸿蒙平台，核心是基于 ArkTS + ArkUI 实现数据模型、状态管理、布局架构、交互逻辑的对等还原，以下是关键适配技术点：

1. 数据模型

RN 的 TypeScript 类型体系可无缝迁移至鸿蒙 ArkTS，仅需调整类型定义语法，核心字段完全复用：

（1）数据类型

// RN 类型定义
type Product = {
  id: string;
  name: string;
  price: number;
  originalPrice?: number;
  rating: number;
  reviewCount: number;
  store: string;
  category: string;
  description: string;
  specs: { [key: string]: string };
  imageUrl?: string;
  isFavorite: boolean;
  discount?: number;
  tags?: string[];
};

type Review = {
  id: string;
  userName: string;
  rating: number;
  comment: string;
  date: string;
  avatar: string;
};

// 鸿蒙 ArkTS 适配
interface Product {
  id: string;
  name: string;
  price: number;
  originalPrice?: number;
  rating: number;
  reviewCount: number;
  store: string;
  category: string;
  description: string;
  specs: { [key: string]: string };
  imageUrl?: string;
  isFavorite: boolean;
  discount?: number;
  tags?: string[];
}

interface Review {
  id: string;
  userName: string;
  rating: number;
  comment: string;
  date: string;
  avatar: string;
}

（2）状态管理

RN 的 useState 对应鸿蒙的 @State 装饰器，状态初始化与更新逻辑完全复用：

@Entry
@Component
struct ProductDetailApp {
  // 核心数据状态
  @State product: Product = {
    id: '1',
    name: 'iPhone 15 Pro Max',
    price: 9999,
    originalPrice: 10999,
    rating: 4.8,
    reviewCount: 1250,
    store: '苹果官方旗舰店',
    category: '手机',
    description: 'iPhone 15 Pro Max 搭载了全新的 A17 Pro 芯片...',
    specs: {
      '屏幕尺寸': '6.7英寸',
      '处理器': 'A17 Pro芯片',
      '摄像头': '48MP主摄',
      '电池容量': '4441mAh',
      '操作系统': 'iOS 17',
      '内存': '8GB RAM',
      '存储': '256GB起',
      '颜色': '钛金属黑、白、蓝、原色'
    },
    isFavorite: false,
    discount: 10,
    tags: ['热销', '正品', '官方保修']
  };
  
  @State reviews: Review[] = [
    {
      id: 'r1',
      userName: '张三',
      rating: 5,
      comment: '手机质量很好，拍照效果出色，运行流畅，值得购买！',
      date: '2023-10-15',
      avatar: 'https://via.placeholder.com/40'
    },
    // 其他评价数据...
  ];
  
  // 交互状态
  @State activeTab: 'info' | 'specs' | 'reviews' = 'info';
  @State quantity: number = 1;
  
  // 星级评分渲染逻辑（完全复用 RN 逻辑）
  @Builder
  renderStars(rating: number) {
    for (let i = 0; i < 5; i++) {
      Text(i < Math.floor(rating) ? '⭐' : '☆')
        .fontSize(16)
        .fontColor('#f59e0b');
    }
  }
  
  // 收藏切换逻辑
  toggleFavorite() {
    AlertDialog.show({
      title: '收藏',
      message: `商品已${this.product.isFavorite ? '取消收藏' : '收藏'}`,
      confirm: {
        value: '确定',
        action: () => {}
      }
    });
  }
  
  // 加入购物车逻辑
  addToCart() {
    AlertDialog.show({
      title: '加入购物车',
      message: `已将商品加入购物车，数量: ${this.quantity}`,
      confirm: {
        value: '确定',
        action: () => {}
      }
    });
  }
  
  // 立即购买逻辑
  buyNow() {
    AlertDialog.show({
      title: '立即购买',
      message: `正在处理您的订单...`,
      confirm: {
        value: '确定',
        action: () => {}
      }
    });
  }
  
  // 评价项渲染构建函数
  @Builder
  renderReview(item: Review) {
    Column()
      .backgroundColor('#f8fafc')
      .padding(12)
      .borderRadius(8)
      .marginBottom(12) {
      
      Row()
        .marginBottom(8) {
        
        Image(item.avatar)
          .width(40)
          .height(40)
          .borderRadius(20)
          .marginRight(12);
        
        Column() {
          Text(item.userName)
            .fontSize(14)
            .fontWeight(FontWeight.Medium)
            .fontColor('#1e293b')
            .marginBottom(4);
          
          Row()
            .alignItems(ItemAlign.Center) {
            this.renderStars(item.rating);
            Text(item.date)
              .fontSize(12)
              .fontColor('#94a3b8')
              .marginLeft(8);
          }
        }
      }
      
      Text(item.comment)
        .fontSize(14)
        .fontColor('#64748b')
        .lineHeight(20);
    }
  }
  
  // 页面构建逻辑
  build() {
    Column()
      .flex(1)
      .backgroundColor('#f5f7fa')
      .safeArea(true) {
      
      // 头部导航
      this.renderHeader();
      
      // 滚动内容区
      Scroll()
        .flex(1) {
        Column() {
          // 商品图片轮播区
          this.renderImageContainer();
          
          // 商品基础信息区
          this.renderProductInfo();
          
          // 选项卡导航
          this.renderTabContainer();
          
          // 选项卡内容
          this.renderTabContent();
        }
      }
      
      // 底部操作栏
      this.renderBottomActions();
    }
  }
  
  // 头部导航构建函数
  @Builder
  renderHeader() {
    Row()
      .alignItems(ItemAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
      .padding(16)
      .backgroundColor('#ffffff')
      .borderBottom({ width: 1, color: '#e2e8f0' }) {
      
      Button()
        .padding(8)
        .backgroundColor(Color.Transparent)
        .onClick(() => {
          // 返回逻辑
        }) {
          Text('‹ 返回')
            .fontSize(16)
            .fontColor('#3b82f6');
        }
      
      Text('商品详情')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#1e293b');
      
      Row() {
        Text('❤️')
          .fontSize(20)
          .marginHorizontal(8);
        Text('🔄')
          .fontSize(20)
          .marginHorizontal(8);
      }
    }
  }
  
  // 商品图片轮播区构建函数
  @Builder
  renderImageContainer() {
    Column()
      .backgroundColor('#ffffff')
      .padding(16)
      .alignItems(ItemAlign.Center) {
      
      Image('https://via.placeholder.com/300x300')
        .width('90%')
        .aspectRatio(1)
        .borderRadius(12);
      
      Row()
        .marginTop(16) {
        for (let i = 0; i < 4; i++) {
          Column()
            .width(i === 0 ? 20 : 8)
            .height(8)
            .borderRadius(4)
            .backgroundColor(i === 0 ? '#3b82f6' : '#cbd5e1')
            .marginHorizontal(4);
        }
      }
    }
  }
  
  // 商品基础信息区构建函数
  @Builder
  renderProductInfo() {
    Column()
      .backgroundColor('#ffffff')
      .padding(16)
      .margin(16)
      .borderRadius(12)
      .shadow({ color: '#000', offsetX: 0, offsetY: 1, opacity: 0.1, radius: 2 }) {
      
      Text(this.product.name)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#1e293b')
        .marginBottom(12);
      
      Row()
        .alignItems(ItemAlign.Center)
        .marginBottom(8) {
        Text(`¥${this.product.price}`)
          .fontSize(22)
          .fontColor('#ef4444')
          .fontWeight(FontWeight.Bold)
          .marginRight(8);
        
        if (this.product.originalPrice) {
          Text(`¥${this.product.originalPrice}`)
            .fontSize(14)
            .fontColor('#94a3b8')
            .decoration({ type: TextDecorationType.LineThrough })
            .marginRight(8);
        }
        
        if (this.product.discount) {
          Text(`-${this.product.discount}%`)
            .fontSize(12)
            .fontColor('#ffffff')
            .backgroundColor('#ef4444')
            .padding({ left: 6, right: 6, top: 2, bottom: 2 })
            .borderRadius(4);
        }
      }
      
      Row()
        .alignItems(ItemAlign.Center)
        .marginBottom(8) {
        this.renderStars(this.product.rating);
        Text(`${this.product.rating} (${this.product.reviewCount}人评价)`)
          .fontSize(14)
          .fontColor('#64748b')
          .marginLeft(8);
      }
      
      Text(`店铺: ${this.product.store}`)
        .fontSize(14)
        .fontColor('#64748b')
        .marginBottom(8);
      
      Row()
        .flexWrap(FlexWrap.Wrap) {
        if (this.product.tags) {
          this.product.tags.forEach(tag => {
            Column()
              .backgroundColor('#dbeafe')
              .padding({ left: 8, right: 8, top: 4, bottom: 4 })
              .borderRadius(12)
              .marginRight(8)
              .marginBottom(8) {
              Text(tag)
                .fontSize(12)
                .fontColor('#3b82f6');
            }
          });
        }
      }
    }
  }
  
  // 选项卡导航构建函数
  @Builder
  renderTabContainer() {
    Row()
      .backgroundColor('#ffffff')
      .marginHorizontal(16)
      .borderRadius(8)
      .marginBottom(16)
      .shadow({ color: '#000', offsetX: 0, offsetY: 1, opacity: 0.1, radius: 2 }) {
      
      Button()
        .flex(1)
        .paddingVertical(12)
        .backgroundColor(Color.Transparent)
        .borderBottom({ width: this.activeTab === 'info' ? 2 : 0, color: '#3b82f6' })
        .onClick(() => {
          this.activeTab = 'info';
        }) {
          Text('商品介绍')
            .fontSize(14)
            .fontColor(this.activeTab === 'info' ? '#3b82f6' : '#64748b')
            .fontWeight(this.activeTab === 'info' ? FontWeight.Medium : FontWeight.Normal);
        }
      
      Button()
        .flex(1)
        .paddingVertical(12)
        .backgroundColor(Color.Transparent)
        .borderBottom({ width: this.activeTab === 'specs' ? 2 : 0, color: '#3b82f6' })
        .onClick(() => {
          this.activeTab = 'specs';
        }) {
          Text('规格参数')
            .fontSize(14)
            .fontColor(this.activeTab === 'specs' ? '#3b82f6' : '#64748b')
            .fontWeight(this.activeTab === 'specs' ? FontWeight.Medium : FontWeight.Normal);
        }
      
      Button()
        .flex(1)
        .paddingVertical(12)
        .backgroundColor(Color.Transparent)
        .borderBottom({ width: this.activeTab === 'reviews' ? 2 : 0, color: '#3b82f6' })
        .onClick(() => {
          this.activeTab = 'reviews';
        }) {
          Text('用户评价')
            .fontSize(14)
            .fontColor(this.activeTab === 'reviews' ? '#3b82f6' : '#64748b')
            .fontWeight(this.activeTab === 'reviews' ? FontWeight.Medium : FontWeight.Normal);
        }
    }
  }
  
  // 选项卡内容构建函数
  @Builder
  renderTabContent() {
    Column()
      .backgroundColor('#ffffff')
      .marginHorizontal(16)
      .marginBottom(80)
      .borderRadius(12)
      .padding(16)
      .shadow({ color: '#000', offsetX: 0, offsetY: 1, opacity: 0.1, radius: 2 }) {
      
      if (this.activeTab === 'info') {
        // 商品介绍内容
        Column() {
          Text('商品描述')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor('#1e293b')
            .marginBottom(12);
          
          Text(this.product.description)
            .fontSize(14)
            .fontColor('#64748b')
            .lineHeight(22)
            .marginBottom(20);
          
          Text('商品特点')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor('#1e293b')
            .marginBottom(12);
          
          Column()
            .marginBottom(20) {
            const features = [
              { icon: '🚀', text: 'A17 Pro芯片，性能强劲' },
              { icon: '📸', text: '48MP主摄，拍照出色' },
              { icon: '🔋', text: '长续航电池，持久耐用' },
              { icon: '🛡️', text: '钛金属材质，坚固轻盈' }
            ];
            
            features.forEach(feature => {
              Row()
                .alignItems(ItemAlign.Center)
                .marginBottom(12) {
                Text(feature.icon)
                  .fontSize(20)
                  .marginRight(8);
                Text(feature.text)
                  .fontSize(14)
                  .fontColor('#475569')
                  .flex(1);
              }
            });
          }
        }
      } else if (this.activeTab === 'specs') {
        // 规格参数内容
        Column() {
          Text('详细参数')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor('#1e293b')
            .marginBottom(12);
          
          Column()
            .marginBottom(20) {
            Object.entries(this.product.specs).forEach(([key, value]) => {
              Row()
                .justifyContent(FlexAlign.SpaceBetween)
                .paddingVertical(8)
                .borderBottom({ width: 1, color: '#e2e8f0' }) {
                Text(`${key}:`)
                  .fontSize(14)
                  .fontColor('#475569')
                  .flex(0.4);
                Text(value)
                  .fontSize(14)
                  .fontColor('#1e293b')
                  .flex(0.6)
                  .textAlign(TextAlign.Right);
              }
            });
          }
        }
      } else if (this.activeTab === 'reviews') {
        // 用户评价内容
        Column() {
          Text(`用户评价 (${this.product.reviewCount})`)
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
            .fontColor('#1e293b')
            .marginBottom(12);
          
          List()
            .showsVerticalScrollbar(false) {
            ForEach(this.reviews, (item: Review) => {
              ListItem() {
                this.renderReview(item);
              }
            });
          }
        }
      }
    }
  }
  
  // 底部操作栏构建函数
  @Builder
  renderBottomActions() {
    Row()
      .backgroundColor('#ffffff')
      .padding(12)
      .borderTop({ width: 1, color: '#e2e8f0' })
      .position(Position.Fixed)
      .bottom(0)
      .width('100%') {
      
      Button()
        .flex(1)
        .paddingVertical(8)
        .backgroundColor(Color.Transparent)
        .onClick(() => this.toggleFavorite()) {
          Column() {
            Text('❤️')
              .fontSize(20)
              .marginBottom(4);
            Text('收藏')
              .fontSize(12)
              .fontColor('#64748b');
          }
        }
      
      Button()
        .flex(1)
        .paddingVertical(8)
        .backgroundColor(Color.Transparent) {
          Column() {
            Text('💬')
              .fontSize(20)
              .marginBottom(4);
            Text('客服')
              .fontSize(12)
              .fontColor('#64748b');
          }
        }
      
      Button()
        .flex(1.5)
        .backgroundColor('#f59e0b')
        .paddingVertical(12)
        .borderRadius(6)
        .marginRight(8)
        .onClick(() => this.addToCart()) {
          Text('加入购物车')
            .fontColor('#ffffff')
            .fontSize(14)
            .fontWeight(FontWeight.Medium);
        }
      
      Button()
        .flex(1.5)
        .backgroundColor('#3b82f6')
        .paddingVertical(12)
        .borderRadius(6)
        .onClick(() => this.buyNow()) {
          Text('立即购买')
            .fontColor('#ffffff')
            .fontSize(14)
            .fontWeight(FontWeight.Medium);
        }
    }
  }
}

适配亮点：

• 计算逻辑完全复用：星级渲染、收藏/加购/购买等核心业务逻辑无需修改，仅需适配平台特有 API（如弹窗）；
• 构建函数封装：通过 @Builder 装饰器将不同模块封装为独立构建函数，提升代码复用率和可维护性；
• 状态更新语法对齐：RN 的 setXXX 对应鸿蒙的直接赋值（this.xxx = value），学习成本低；
• 容器组件映射：RN 的 FlatList 对应鸿蒙的 List + ForEach，实现列表渲染的对等还原；
• 样式体系统一：复用相同的色值、间距、圆角、字体体系，保证两端视觉效果无差异。

---

React Native 特性	鸿蒙 ArkUI 对应实现	适配关键说明
useState	@State 装饰器	状态初始化与更新逻辑完全复用，仅调整语法
FlatList	List + ForEach	列表渲染核心逻辑一致，鸿蒙通过 ListItem 实现列表项封装
ScrollView	Scroll 容器	滚动容器属性高度兼容，仅调整语法格式
TouchableOpacity	Button 组件	通过 backgroundColor(Color.Transparent) 实现透明点击按钮
Alert.alert	AlertDialog.show	弹窗 API 语法差异，核心功能一致
StyleSheet	链式样式 + @Styles	样式属性完全复用，通过链式调用实现样式定义
条件渲染	if/else 语句	选项卡内容渲染逻辑一致，语法更简洁
动态样式	内联样式条件判断	选中态样式通过三元表达式实现，逻辑一致

---

• RN 端优化：
  • 商品图片使用 react-native-fast-image 实现缓存和渐进式加载；
  • FlatList 设置 initialNumToRender/maxToRenderPerBatch 优化列表渲染性能；
  • 图片轮播使用成熟库（如 react-native-swiper）实现流畅的滑动体验。
• 鸿蒙端优化：
  • 商品图片设置 objectFit: ImageFit.Cover 优化显示效果，通过 cachePolicy 实现图片缓存；
  • List 组件设置 cachedCount/lanes 优化列表渲染性能；
  • 图片轮播使用 Swiper 组件实现，支持自动播放、无限滚动等特性。

---

1. 模块化架构是跨端适配的核心：详情页的分层模块化设计（数据层/交互层/UI层），保证了跨端适配时的代码复用率，核心业务逻辑可实现 90% 以上的复用；
2. 状态管理逻辑对等实现：RN 的 useState 与鸿蒙的 @State 装饰器功能高度对齐，选项卡切换、收藏状态等核心状态更新逻辑可直接迁移；
3. 布局组件灵活映射：RN 的核心组件均可通过 ArkUI 组件实现对等还原，仅需调整语法格式和平台特有 API；
4. 视觉体验一致性保障：通过统一的样式体系和交互反馈，保证用户在不同平台的操作体验无差异；
5. 性能优化差异化处理：针对不同平台的性能特性，分别进行图片加载、列表渲染等方面的优化，最大化发挥各平台的原生优势。

React Native 商品详情页的跨端适配实践，验证了 ArkTS 与 React 技术体系的高度兼容性。对于详情页这类信息密度高、交互复杂的场景，核心的业务逻辑、数据模型、布局架构均可实现高效复用，仅需适配平台特有 API 和性能优化策略，是跨端电商应用开发的高效路径。

---

真实演示案例代码：

// App.tsx
import React, { useState } from 'react';
import { SafeAreaView, View, Text, StyleSheet, TouchableOpacity, ScrollView, Dimensions, Alert, Image, FlatList } from 'react-native';

// Base64 图标库
const ICONS_BASE64 = {
  cart: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  favorite: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  share: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  back: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  home: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  star: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  store: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  info: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
};

const { width, height } = Dimensions.get('window');

// 商品类型
type Product = {
  id: string;
  name: string;
  price: number;
  originalPrice?: number;
  rating: number;
  reviewCount: number;
  store: string;
  category: string;
  description: string;
  specs: { [key: string]: string };
  imageUrl?: string;
  isFavorite: boolean;
  discount?: number;
  tags?: string[];
};

// 评价类型
type Review = {
  id: string;
  userName: string;
  rating: number;
  comment: string;
  date: string;
  avatar: string;
};

// 商品详情页应用组件
const ProductDetailApp: React.FC = () => {
  const [product] = useState<Product>({
    id: '1',
    name: 'iPhone 15 Pro Max',
    price: 9999,
    originalPrice: 10999,
    rating: 4.8,
    reviewCount: 1250,
    store: '苹果官方旗舰店',
    category: '手机',
    description: 'iPhone 15 Pro Max 搭载了全新的 A17 Pro 芯片，性能大幅提升。配备了 6.7 英寸超视网膜 XDR 显示屏，支持 ProMotion 自适应刷新率技术，带来流畅的视觉体验。',
    specs: {
      '屏幕尺寸': '6.7英寸',
      '处理器': 'A17 Pro芯片',
      '摄像头': '48MP主摄',
      '电池容量': '4441mAh',
      '操作系统': 'iOS 17',
      '内存': '8GB RAM',
      '存储': '256GB起',
      '颜色': '钛金属黑、白、蓝、原色'
    },
    isFavorite: false,
    discount: 10,
    tags: ['热销', '正品', '官方保修']
  });

  const [reviews] = useState<Review[]>([
    {
      id: 'r1',
      userName: '张三',
      rating: 5,
      comment: '手机质量很好，拍照效果出色，运行流畅，值得购买！',
      date: '2023-10-15',
      avatar: 'https://via.placeholder.com/40'
    },
    {
      id: 'r2',
      userName: '李四',
      rating: 4,
      comment: '外观设计很精美，性能也不错，就是价格有点高。',
      date: '2023-10-10',
      avatar: 'https://via.placeholder.com/40'
    },
    {
      id: 'r3',
      userName: '王五',
      rating: 5,
      comment: '使用了一个月，各方面都很满意，电池续航也很给力。',
      date: '2023-10-05',
      avatar: 'https://via.placeholder.com/40'
    },
    {
      id: 'r4',
      userName: '赵六',
      rating: 4,
      comment: '相机功能强大，日常使用完全没问题，系统也很稳定。',
      date: '2023-09-28',
      avatar: 'https://via.placeholder.com/40'
    }
  ]);

  const [activeTab, setActiveTab] = useState<'info' | 'specs' | 'reviews'>('info');
  const [quantity, setQuantity] = useState<number>(1);

  const toggleFavorite = () => {
    Alert.alert('收藏', `商品已${product.isFavorite ? '取消收藏' : '收藏'}`);
  };

  const addToCart = () => {
    Alert.alert('加入购物车', `已将商品加入购物车，数量: ${quantity}`);
  };

  const buyNow = () => {
    Alert.alert('立即购买', `正在处理您的订单...`);
  };

  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Text key={i} style={styles.starIcon}>
        {i < Math.floor(rating) ? '⭐' : '☆'}
      </Text>
    ));
  };

  const renderReview = ({ item }: { item: Review }) => (
    <View style={styles.reviewCard}>
      <View style={styles.reviewHeader}>
        <View style={styles.userAvatar}>
          <Image source={{ uri: item.avatar }} style={styles.avatarImage} />
        </View>
        <View style={styles.userDetails}>
          <Text style={styles.userName}>{item.userName}</Text>
          <View style={styles.reviewRating}>
            {renderStars(item.rating)}
            <Text style={styles.reviewDate}>{item.date}</Text>
          </View>
        </View>
      </View>
      <Text style={styles.reviewComment}>{item.comment}</Text>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton}>
          <Text style={styles.backButtonText}>‹ 返回</Text>
        </TouchableOpacity>
        <Text style={styles.title}>商品详情</Text>
        <TouchableOpacity style={styles.headerIcons}>
          <Text style={styles.headerIcon}>❤️</Text>
          <Text style={styles.headerIcon}>🔄</Text>
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.content}>
        {/* 商品图片轮播 */}
        <View style={styles.imageContainer}>
          <Image source={{ uri: 'https://via.placeholder.com/300x300' }} style={styles.productImage} />
          <View style={styles.imageIndicators}>
            {[1, 2, 3, 4].map((_, index) => (
              <View 
                key={index} 
                style={[
                  styles.indicator, 
                  index === 0 && styles.activeIndicator
                ]} 
              />
            ))}
          </View>
        </View>

        {/* 商品信息 */}
        <View style={styles.productInfo}>
          <Text style={styles.productName}>{product.name}</Text>
          <View style={styles.priceContainer}>
            <Text style={styles.currentPrice}>¥{product.price}</Text>
            {product.originalPrice && (
              <Text style={styles.originalPrice}>¥{product.originalPrice}</Text>
            )}
            {product.discount && (
              <Text style={styles.discountBadge}>-{product.discount}%</Text>
            )}
          </View>
          <View style={styles.ratingContainer}>
            <View style={styles.starsContainer}>
              {renderStars(product.rating)}
              <Text style={styles.ratingText}>{product.rating} ({product.reviewCount}人评价)</Text>
            </View>
          </View>
          <Text style={styles.storeName}>店铺: {product.store}</Text>
          <View style={styles.tagsContainer}>
            {product.tags?.map(tag => (
              <View key={tag} style={styles.tag}>
                <Text style={styles.tagText}>{tag}</Text>
              </View>
            ))}
          </View>
        </View>

        {/* 选项卡导航 */}
        <View style={styles.tabContainer}>
          <TouchableOpacity 
            style={[styles.tab, activeTab === 'info' && styles.activeTab]}
            onPress={() => setActiveTab('info')}
          >
            <Text style={[styles.tabText, activeTab === 'info' && styles.activeTabText]}>商品介绍</Text>
          </TouchableOpacity>
          <TouchableOpacity 
            style={[styles.tab, activeTab === 'specs' && styles.activeTab]}
            onPress={() => setActiveTab('specs')}
          >
            <Text style={[styles.tabText, activeTab === 'specs' && styles.activeTabText]}>规格参数</Text>
          </TouchableOpacity>
          <TouchableOpacity 
            style={[styles.tab, activeTab === 'reviews' && styles.activeTab]}
            onPress={() => setActiveTab('reviews')}
          >
            <Text style={[styles.tabText, activeTab === 'reviews' && styles.activeTabText]}>用户评价</Text>
          </TouchableOpacity>
        </View>

        {/* 选项卡内容 */}
        <View style={styles.tabContent}>
          {activeTab === 'info' && (
            <View style={styles.infoContent}>
              <Text style={styles.sectionTitle}>商品描述</Text>
              <Text style={styles.descriptionText}>{product.description}</Text>
              
              <Text style={styles.sectionTitle}>商品特点</Text>
              <View style={styles.featuresContainer}>
                <View style={styles.featureItem}>
                  <Text style={styles.featureIcon}>🚀</Text>
                  <Text style={styles.featureText}>A17 Pro芯片，性能强劲</Text>
                </View>
                <View style={styles.featureItem}>
                  <Text style={styles.featureIcon}>📸</Text>
                  <Text style={styles.featureText}>48MP主摄，拍照出色</Text>
                </View>
                <View style={styles.featureItem}>
                  <Text style={styles.featureIcon}>🔋</Text>
                  <Text style={styles.featureText}>长续航电池，持久耐用</Text>
                </View>
                <View style={styles.featureItem}>
                  <Text style={styles.featureIcon}>🛡️</Text>
                  <Text style={styles.featureText}>钛金属材质，坚固轻盈</Text>
                </View>
              </View>
            </View>
          )}

          {activeTab === 'specs' && (
            <View style={styles.specsContent}>
              <Text style={styles.sectionTitle}>详细参数</Text>
              <View style={styles.specsList}>
                {Object.entries(product.specs).map(([key, value]) => (
                  <View key={key} style={styles.specItem}>
                    <Text style={styles.specKey}>{key}:</Text>
                    <Text style={styles.specValue}>{value}</Text>
                  </View>
                ))}
              </View>
            </View>
          )}

          {activeTab === 'reviews' && (
            <View style={styles.reviewsContent}>
              <Text style={styles.sectionTitle}>用户评价 ({product.reviewCount})</Text>
              <FlatList
                data={reviews}
                renderItem={renderReview}
                keyExtractor={item => item.id}
                showsVerticalScrollIndicator={false}
              />
            </View>
          )}
        </View>
      </ScrollView>

      {/* 底部操作栏 */}
      <View style={styles.bottomActions}>
        <TouchableOpacity style={styles.actionButton} onPress={toggleFavorite}>
          <Text style={styles.actionIcon}>❤️</Text>
          <Text style={styles.actionText}>收藏</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.actionButton}>
          <Text style={styles.actionIcon}>💬</Text>
          <Text style={styles.actionText}>客服</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.cartButton} onPress={addToCart}>
          <Text style={styles.cartButtonText}>加入购物车</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.buyButton} onPress={buyNow}>
          <Text style={styles.buyButtonText}>立即购买</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f7fa',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  backButton: {
    padding: 8,
  },
  backButtonText: {
    fontSize: 16,
    color: '#3b82f6',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#1e293b',
  },
  headerIcons: {
    flexDirection: 'row',
  },
  headerIcon: {
    fontSize: 20,
    marginHorizontal: 8,
  },
  content: {
    flex: 1,
  },
  imageContainer: {
    backgroundColor: '#ffffff',
    padding: 16,
    alignItems: 'center',
  },
  productImage: {
    width: width * 0.9,
    height: width * 0.9,
    borderRadius: 12,
  },
  imageIndicators: {
    flexDirection: 'row',
    marginTop: 16,
  },
  indicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#cbd5e1',
    marginHorizontal: 4,
  },
  activeIndicator: {
    backgroundColor: '#3b82f6',
    width: 20,
  },
  productInfo: {
    backgroundColor: '#ffffff',
    padding: 16,
    margin: 16,
    borderRadius: 12,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  productName: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#1e293b',
    marginBottom: 12,
  },
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  currentPrice: {
    fontSize: 22,
    color: '#ef4444',
    fontWeight: 'bold',
    marginRight: 8,
  },
  originalPrice: {
    fontSize: 14,
    color: '#94a3b8',
    textDecorationLine: 'line-through',
    marginRight: 8,
  },
  discountBadge: {
    fontSize: 12,
    color: '#ffffff',
    backgroundColor: '#ef4444',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  ratingContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  starsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  starIcon: {
    fontSize: 16,
    color: '#f59e0b',
  },
  ratingText: {
    fontSize: 14,
    color: '#64748b',
    marginLeft: 8,
  },
  storeName: {
    fontSize: 14,
    color: '#64748b',
    marginBottom: 8,
  },
  tagsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  tag: {
    backgroundColor: '#dbeafe',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
    marginRight: 8,
    marginBottom: 8,
  },
  tagText: {
    fontSize: 12,
    color: '#3b82f6',
  },
  tabContainer: {
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    borderRadius: 8,
    marginBottom: 16,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  tab: {
    flex: 1,
    paddingVertical: 12,
    alignItems: 'center',
  },
  activeTab: {
    borderBottomWidth: 2,
    borderBottomColor: '#3b82f6',
  },
  tabText: {
    fontSize: 14,
    color: '#64748b',
  },
  activeTabText: {
    color: '#3b82f6',
    fontWeight: '500',
  },
  tabContent: {
    flex: 1,
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 80,
    borderRadius: 12,
    padding: 16,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  infoContent: {
    flex: 1,
  },
  specsContent: {
    flex: 1,
  },
  reviewsContent: {
    flex: 1,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#1e293b',
    marginBottom: 12,
  },
  descriptionText: {
    fontSize: 14,
    color: '#64748b',
    lineHeight: 22,
    marginBottom: 20,
  },
  featuresContainer: {
    marginBottom: 20,
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  featureIcon: {
    fontSize: 20,
    marginRight: 8,
  },
  featureText: {
    fontSize: 14,
    color: '#475569',
    flex: 1,
  },
  specsList: {
    marginBottom: 20,
  },
  specItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  specKey: {
    fontSize: 14,
    color: '#475569',
    flex: 0.4,
  },
  specValue: {
    fontSize: 14,
    color: '#1e293b',
    flex: 0.6,
    textAlign: 'right',
  },
  reviewCard: {
    backgroundColor: '#f8fafc',
    padding: 12,
    borderRadius: 8,
    marginBottom: 12,
  },
  reviewHeader: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  userAvatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#e2e8f0',
    marginRight: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarImage: {
    width: 40,
    height: 40,
    borderRadius: 20,
  },
  userDetails: {
    flex: 1,
  },
  userName: {
    fontSize: 14,
    fontWeight: '500',
    color: '#1e293b',
    marginBottom: 4,
  },
  reviewRating: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  reviewDate: {
    fontSize: 12,
    color: '#94a3b8',
    marginLeft: 8,
  },
  reviewComment: {
    fontSize: 14,
    color: '#64748b',
    lineHeight: 20,
  },
  bottomActions: {
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    padding: 12,
    borderTopWidth: 1,
    borderTopColor: '#e2e8f0',
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  actionButton: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
  },
  actionIcon: {
    fontSize: 20,
    marginBottom: 4,
  },
  actionText: {
    fontSize: 12,
    color: '#64748b',
  },
  cartButton: {
    flex: 1.5,
    backgroundColor: '#f59e0b',
    paddingVertical: 12,
    borderRadius: 6,
    alignItems: 'center',
    marginRight: 8,
  },
  cartButtonText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
  },
  buyButton: {
    flex: 1.5,
    backgroundColor: '#3b82f6',
    paddingVertical: 12,
    borderRadius: 6,
    alignItems: 'center',
  },
  buyButtonText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
  },
});

export default ProductDetailApp;

---

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

打包之后再将打包后的鸿蒙OpenHarmony文件拷贝到鸿蒙的DevEco-Studio工程目录去：

最后运行效果图如下显示：

本文深入分析了一个基于React Native实现的电商商品详情页，从架构设计、技术实现到鸿蒙跨端适配策略。系统采用React Hooks进行轻量级状态管理，通过TypeScript确保类型安全，并实现模块化的状态分离。页面展示完整的商品信息（基本属性、详细描述、规格参数、用户评价）和交互功能（收藏、购物车、购买）。在跨端开发中，使用Base64图标库和Dimensions API解决兼容性问题，同时考虑了FlatList、Image等API在鸿蒙系统的差异。代码组织采用模块化样式定义，预留了主题定制空间，并通过错误边界和可访问性标签提升健壮性。该实现为React Native到鸿蒙ArkTS的跨端开发提供了可落地的技术参考。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。