React Native鸿蒙跨平台代码急助手应用聚焦维修工具、应急用品、即时配送、生活服务场景，覆盖商品展示、库存校验、购物车操作等完整应急消费链路

在React Native中开发鸿组件（这里指的是鸿蒙（HarmonyOS）组件），你需要了解鸿蒙开发的基础以及如何在React Native项目中集成鸿蒙应用。鸿蒙OS是由华为开发的一个分布式操作系统，主要用于其智能设备，如手机、平板、智能手表等。首先，你需要熟悉鸿蒙OS的开发环境设置和基本开发流程。React Native本身主要用于Harmony和Harmony平台的开发，但你可以通过以下几

2501_92985290

573人浏览 · 2026-02-04 15:48:38

2501_92985290 · 2026-02-04 15:48:38 发布

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

在应急服务领域，应用的跨端响应效率、场景化交互体验与系统适配性直接决定用户体验上限。React Native 凭借“一次开发、多端部署”的核心优势，成为连接 iOS、Android 与鸿蒙（HarmonyOS）系统的最优技术选型。本文以应急助手应用为例，从应急服务场景的数据模型设计、鸿蒙风格 UI 实现、跨端业务逻辑兼容等维度，深度解析 React Native 对接鸿蒙系统的技术内核与应急服务场景的落地最佳实践。

本应急助手应用聚焦维修工具、应急用品、即时配送、生活必需四大核心应急服务场景，覆盖商品展示、库存校验、购物车操作等完整应急消费链路，整体架构遵循 React Native 组件化开发范式，同时深度契合鸿蒙系统的设计语言与应急类应用的交互规范。从技术底层来看，应用基于 React 函数式组件 + TypeScript 构建，这种组合既保证了应急商品数据的类型安全，又能最大化跨端复用率，是 React Native 适配鸿蒙系统应急服务类应用的理想技术底座。

1. 场景化

应急服务类应用涉及多维度的商品属性（紧急程度、库存状态、配送时效等），统一且精准的强类型数据模型是避免多端行为不一致的关键。代码中通过 TypeScript 严格定义了应急商品的核心数据结构，覆盖应急服务全场景的业务属性：

// 应急商品核心数据模型
type EmergencyProduct = {
  id: string;
  name: string;
  category: '维修工具' | '应急用品' | '即时配送' | '生活必需';
  price: number;
  image: string;
  description: string;
  urgency?: string; // 紧急程度
  isAvailable?: boolean; // 是否有货
};

这种场景化的强类型定义不仅在开发阶段提供语法校验和智能提示，更关键的是在鸿蒙系统适配时，能够与 ArkTS 的类型系统形成天然映射。相较于纯 JavaScript 开发，TypeScript 可有效规避因数据类型模糊导致的应急商品信息展示错误——尤其是在鸿蒙这类面向全场景智慧终端的操作系统中，类型安全能大幅降低多设备适配的调试成本，确保商品紧急程度、库存状态、价格等核心应急服务数据在不同终端的一致性。

2. 轻量级

应用采用 React 内置的 useState Hook 管理核心商品状态，结合不可变数据模式实现应急商品信息的跨端展示：

const [products] = useState<EmergencyProduct[]>([
  {
    id: '1',
    name: '多功能工具箱',
    category: '维修工具',
    price: 129,
    image: '🔧',
    description: '包含螺丝刀、钳子等常用工具',
    urgency: '高',
    isAvailable: true
  },
  // 其他应急商品数据
]);

这种轻量级状态管理方案完全适配应急服务类跨端开发场景，相较于 Redux 等重型状态库，useState 无需额外的中间件和适配层，能够直接在 React Native 支持的所有平台（包括鸿蒙）上稳定运行。从鸿蒙系统的视角来看，useState 的状态管理逻辑与 ArkUI 的 @State 装饰器在设计理念上高度契合，开发者无需切换思维模式即可完成跨端状态管理，大幅降低了鸿蒙适配的学习成本。

React Native 的核心价值在于通过统一的组件抽象层，屏蔽不同平台的 UI 实现差异。本应用在 UI 层的设计深度复刻了鸿蒙系统的视觉风格与应急服务类应用交互规范，同时保证多端体验的一致性。

1. Flex 布局

应用基于 React Native 的 Flex 布局系统构建整体界面，通过 Dimensions.get('window') 获取设备宽高，实现对不同尺寸鸿蒙设备（手机、平板、智慧屏）的自适应：

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

相较于鸿蒙系统的 DirectionalLayout 和 GridLayout，React Native 的 Flex 布局具备更强的跨端兼容性，通过 flexDirection、justifyContent、flexWrap 等属性，能够精准还原鸿蒙系统的应急服务界面布局逻辑。例如应急商品网格布局的实现：

<View style={styles.productsGrid}>
  {products
    .filter(p => p.category === category)
    .map(product => (
      <TouchableOpacity 
        key={product.id}
        style={styles.productItem}
        onPress={() => handleProductDetail(product.id)}
      >
        {/* 应急商品展示内容 */}
      </TouchableOpacity>
    ))
  }
</View>

这段代码通过 flexDirection: 'row'、justifyContent: 'space-between' 和 flexWrap: 'wrap' 实现了鸿蒙系统特有的应急商品网格布局效果，结合 width: '48%' 的样式定义，在不同尺寸的鸿蒙设备上都能保持应急商品卡片的合理排列，无需针对鸿蒙系统做额外的布局适配。

2. 视觉样式：

应用通过 StyleSheet.create 定义样式表，深度适配鸿蒙系统的应急服务设计规范，核心体现在以下几个维度：

应急色彩体系：采用鸿蒙系统的应急蓝系主色调（#2563eb、#1e3a8a），搭配功能性色彩区分商品状态（有货-绿色、缺货-红色、紧急-红色），符合鸿蒙系统应急应用“醒目、高效”的视觉设计理念
圆角与阴影：使用 borderRadius: 12 实现鸿蒙风格的大圆角设计，通过 elevation（Android）和 shadow（iOS）属性适配鸿蒙系统的阴影效果，兼顾应急界面的层次感与跨端一致性
应急标签与状态样式：通过动态样式绑定实现鸿蒙风格的库存标签，同时强化应急商品紧急程度的视觉层级：

<View style={[
  styles.stockTag,
  { backgroundColor: product.isAvailable ? '#10b981' : '#ef4444' }
]}>
  <Text style={styles.stockTagText}>
    {product.isAvailable ? '有货' : '缺货'}
  </Text>
</View>

<Text style={styles.largeProductUrgency}>紧急程度: {product.urgency}</Text>

这种样式设计方案完全基于 React Native 的标准 API 实现，在鸿蒙系统中能够通过 React Native 的渲染层自动转换为原生样式——backgroundColor 对应鸿蒙的 background-color，borderRadius 对应鸿蒙的 border-radius，无需编写平台特定代码。

3. 交互组件：

应用中所有交互组件均基于 React Native 基础组件封装，同时适配鸿蒙系统的应急服务交互规范：

SafeAreaView：对应鸿蒙系统的 SafeArea 组件，适配刘海屏、挖孔屏等异形屏，保证应急服务界面在鸿蒙不同终端设备上的完整性
ScrollView (horizontal)：与鸿蒙的 List 组件（横向模式）逻辑一致，实现高紧急度应急商品的横向滚动展示，适配鸿蒙系统的滑动交互逻辑
TouchableOpacity (disabled)：替代鸿蒙的 Button 组件（禁用态），实现缺货应急商品按钮的不可点击状态，符合鸿蒙的交互规范
Alert：对应鸿蒙的 TextDialog 组件，实现应急商品详情、库存提示等弹窗交互，保持与鸿蒙原生应急应用一致的交互体验

以应急商品加入购物车交互为例，代码通过状态判断实现鸿蒙风格的库存校验逻辑：

<TouchableOpacity 
  style={[
    styles.addButton,
    { backgroundColor: product.isAvailable ? '#3b82f6' : '#94a3b8' }
  ]}
  onPress={() => handleQuickAdd(product.id)}
  disabled={!product.isAvailable}
>
  <Text style={styles.addButtonText}>
    {product.isAvailable ? '+ 加入购物车' : '暂时缺货'}
  </Text>
</TouchableOpacity>

这种交互逻辑完全基于 React Native 的跨端 API 实现，在鸿蒙系统中能够保持与原生应急服务应用一致的交互体验，无需针对鸿蒙系统做特殊处理。

除了 UI 层的适配，应急服务业务逻辑的跨端兼容性是 React Native 开发的核心。本应用的核心业务逻辑包括应急商品详情展示、库存校验、分类筛选等，这些逻辑完全基于 JavaScript/TypeScript 实现，天然具备跨端运行能力。

1. 应急商品

应用实现了基于商品分类的精准筛选逻辑，通过纯函数过滤实现不同应急商品类别的展示：

{['维修工具', '应急用品', '即时配送', '生活必需'].map(category => (
  <View key={category} style={styles.categorySection}>
    {/* 分类标题 */}
    <View style={styles.productsGrid}>
      {products
        .filter(p => p.category === category)
        .map(product => (
          {/* 应急商品展示 */}
        ))
      }
    </View>
  </View>
))}

该逻辑完全基于纯函数实现，不依赖任何平台特定 API，在 React Native 支持的所有平台（包括鸿蒙）上都能稳定运行。值得注意的是，代码中使用 Array.filter 等标准 JavaScript 方法处理应急商品数据，这些方法在鸿蒙系统的 JS 引擎中能够无缝执行，体现了 React Native 跨端开发“一次编写，多端复用”的核心价值。

2. 库存校验

应用针对应急服务场景实现了鸿蒙风格的库存校验交互，包含商品库存状态判断与操作反馈：

const handleQuickAdd = (productId: string) => {
  const product = products.find(p => p.id === productId);
  if (product) {
    if (!product.isAvailable) {
      Alert.alert('提示', '该商品暂时缺货，无法加入购物车');
      return;
    }
    
    Alert.alert(
      '加入购物车',
      `已将 ${product.name} 加入购物车\n` +
      `价格: ¥${product.price}`,
      [
        { text: '继续选购', style: 'cancel' },
        { text: '去结算', onPress: () => Alert.alert('提示', '跳转到购物车页面') }
      ]
    );
  }
};

这种交互逻辑基于纯 JavaScript 实现，能够有效保证购物车操作的跨端一致性，同时在鸿蒙系统中，Alert.alert 的回调函数能够被 JS 引擎高效执行，确保应急服务操作的即时反馈。

3. 商品筛选

应用实现了基于 urgency 属性的高紧急度应急商品筛选，用于展示核心应急推荐商品：

{products.filter(p => p.urgency === '高').map(product => (
  <TouchableOpacity 
    key={product.id}
    style={styles.emergencyItem}
    onPress={() => handleProductDetail(product.id)}
  >
    {/* 高紧急度应急商品展示 */}
  </TouchableOpacity>
))}

这种无副作用的纯函数筛选方式，不仅符合 React 的设计理念，更重要的是在跨端场景下，能够避免因不同平台的运行时差异导致的筛选结果不一致。对于鸿蒙系统而言，这类纯逻辑代码无需任何适配即可直接运行，是应急服务类跨端开发的最优实践。

从本应用的实现来看，React Native 对接鸿蒙系统应急服务场景的核心在于“抽象层适配 + 应急体验兼容”，具体体现在以下几个维度：

JS 引擎层应急兼容：鸿蒙系统内置了符合 ECMAScript 标准的 JavaScript 引擎，能够直接执行 React Native 的 JS 代码，这是跨端运行的底层基础。本应用中所有的应急服务业务逻辑代码（商品筛选、库存校验、购物车操作）均运行在 JS 引擎层，无需任何修改即可在鸿蒙系统中执行，保证了应急服务逻辑的跨端一致性。
组件映射层应急适配：React Native 通过自定义渲染器，将 React 组件（View、Text、TouchableOpacity 等）映射为鸿蒙系统的原生组件。例如横向 ScrollView 会被转换为鸿蒙的横向 List 组件，TouchableOpacity (disabled) 会被转换为鸿蒙的禁用态 Button 组件，这种映射关系由 React Native 的鸿蒙适配层自动完成，开发者无需关注底层实现细节，只需专注于应急服务业务逻辑开发。
样式转换层应急规范适配：React Native 的 StyleSheet 样式会被自动转换为鸿蒙系统的原生样式，本应用中定义的所有鸿蒙应急服务风格样式（应急蓝主调、库存状态色彩、商品卡片样式）都能通过这一层完成自动转换，保证了应急 UI 风格在鸿蒙系统中的一致性。
应急体验跨端兼容：应用中所有交互逻辑均基于 React Native 的标准 API 实现，这些 API 在鸿蒙系统中会被替换为对应的原生 API 调用，例如 Alert.alert 对应鸿蒙的 TextDialog，TouchableOpacity (disabled) 对应鸿蒙的禁用态 Button，确保了应急服务体验在不同平台的一致性。

本应急助手应用的实现完整展现了 React Native 在鸿蒙跨端应急服务开发领域的技术优势，核心要点可总结为：

强类型设计保障应急数据一致性：TypeScript 场景化类型定义不仅提升代码质量，更能与鸿蒙 ArkTS 形成类型映射，降低应急服务场景跨端适配成本，是应急服务类应用跨端开发的基础保障
纯逻辑开发最大化应急代码复用率：商品筛选、库存校验、购物车操作等核心应急服务逻辑采用纯 JavaScript/TypeScript 实现，无需针对鸿蒙系统做特殊修改，大幅提升开发效率
标准 API 适配鸿蒙应急生态：基于 React Native 标准组件和 API 开发，通过底层适配层自动对接鸿蒙原生能力，兼顾开发效率与应急服务场景的原生体验

本项目采用React Native函数式组件架构，以EmergencyHelperApp为核心组件，实现了应急助手应用的完整功能流程。架构设计遵循模块化原则，将数据结构、状态管理和业务逻辑清晰分离，便于维护和扩展。

核心技术栈

React Native：跨平台移动应用开发框架，支持iOS、Android和鸿蒙系统
TypeScript：提供类型安全，增强代码可维护性和开发体验
Hooks API：使用useState进行状态管理，简化组件逻辑
Flexbox：实现响应式布局，适配不同屏幕尺寸
Base64图标：内置图标资源，减少网络请求，提升加载速度
Dimensions API：获取屏幕尺寸，实现精细化布局控制

应急商品类型（EmergencyProduct）

type EmergencyProduct = {
  id: string;
  name: string;
  category: '维修工具' | '应急用品' | '即时配送' | '生活必需';
  price: number;
  image: string;
  description: string;
  urgency?: string;
  isAvailable?: boolean;
};

该类型设计全面，包含了应急商品的核心信息：

id：唯一标识符，确保数据唯一性
name：商品名称，便于用户识别
category：商品分类，使用联合类型确保类型安全
price：价格信息，直接影响购买决策
image：商品图片，提升用户体验
description：商品描述，提供详细信息
urgency：紧急程度，可选字段，用于紧急推荐
isAvailable：是否有货，可选字段，影响购买可行性

核心状态

应用使用useState钩子管理一个核心状态：

products：应急商品列表，使用常量状态，包含多种类型的应急商品

状态更新

商品详情：通过handleProductDetail函数，根据商品ID查找商品信息并展示
加入购物车：通过handleQuickAdd函数，将商品添加到购物车，同时检查库存状态
用户交互：通过Alert组件提供操作确认和信息提示

状态管理

不可变数据模式：使用find方法查找商品，避免直接修改原状态
状态验证：在进行操作前，通过find方法验证商品是否存在
库存检查：在加入购物车前检查商品库存状态，确保操作可行性
用户反馈：操作完成后，通过Alert组件提供明确的成功或失败提示
数据过滤：使用filter方法筛选紧急商品，实现智能推荐

核心业务

商品展示：展示应急商品列表，包含紧急推荐和分类导航
商品详情：查看商品详细信息，包括名称、价格、描述、紧急程度和库存状态
加入购物车：快速将商品添加到购物车，支持继续选购或去结算，同时检查库存状态
分类浏览：按商品分类浏览不同类型的应急商品

const handleQuickAdd = (productId: string) => {
  const product = products.find(p => p.id === productId);
  if (product) {
    if (!product.isAvailable) {
      Alert.alert('提示', '该商品暂时缺货，无法加入购物车');
      return;
    }
    
    Alert.alert(
      '加入购物车',
      `已将 ${product.name} 加入购物车\n` +
      `价格: ¥${product.price}`,
      [
        { text: '继续选购', style: 'cancel' },
        { text: '去结算', onPress: () => Alert.alert('提示', '跳转到购物车页面') }
      ]
    );
  }
};

数据流

单向数据流：状态 → 视图 → 用户操作 → 状态更新
数据过滤：在渲染时使用filter方法筛选紧急商品，确保推荐准确性
业务逻辑封装：将复杂操作逻辑封装在专用函数中，提高代码可读性
用户交互反馈：使用Alert组件提供操作确认和信息提示，提升用户体验
库存验证：在加入购物车前验证商品库存状态，确保操作可行性

组件

核心组件：SafeAreaView、View、Text、ScrollView、TouchableOpacity等在鸿蒙系统上有对应实现
API兼容性：Dimensions API在鸿蒙系统中可正常使用，确保布局适配
Alert组件：鸿蒙系统支持Alert组件的基本功能，但样式可能有所差异
ScrollView：横向ScrollView在鸿蒙系统中可正常使用，确保紧急商品展示

资源管理

Base64图标：在鸿蒙系统中同样支持，可减少网络请求，提升性能
内存管理：鸿蒙系统对内存使用更为严格，需注意资源释放
计算性能：对于商品过滤和查找等操作，鸿蒙系统的处理性能与其他平台相当

性能

渲染性能：避免不必要的重渲染，合理使用React.memo；对于长商品列表，建议使用FlatList替代ScrollView；优化组件结构，减少嵌套层级
数据处理：缓存计算结果，避免重复计算；优化商品查找算法，特别是紧急商品筛选；考虑使用useMemo缓存计算结果，提高性能
内存管理：及时释放不再使用的资源；避免内存泄漏，特别是在处理多个商品时；合理使用缓存策略，平衡性能和内存占用
条件渲染：使用Platform API检测平台，针对不同平台使用不同实现
样式适配：考虑鸿蒙系统的设计规范，调整UI样式以符合平台特性
权限处理：鸿蒙系统的权限管理与Android有所不同，需单独处理
鸿蒙特性：充分利用鸿蒙系统的分布式能力，实现多设备协同
图标资源：针对鸿蒙系统的图标规范，调整Base64图标资源

类型定义

使用枚举类型：将商品分类、紧急程度等使用枚举类型替代字符串，提高代码可读性和可维护性
类型扩展：考虑使用接口继承，增强类型系统的表达能力
类型守卫：添加更多类型守卫，确保运行时类型安全
国际化支持：考虑添加国际化支持，特别是商品分类等术语

状态管理

状态分离：对于复杂状态，考虑使用useReducer或状态管理库（如Redux、Zustand）
状态持久化：实现状态持久化，使用AsyncStorage存储商品和购物车数据
计算属性：使用useMemo缓存计算结果，避免重复计算
批量操作：支持批量管理购物车商品，提高用户体验

组件化

组件拆分：将大型组件拆分为更小的可复用组件，如ProductCard、CategorySection、EmergencyItem等
自定义Hook：提取重复的状态逻辑到自定义Hook，如useProductManager、useCart等
高阶组件：使用高阶组件处理横切关注点，如错误边界、加载状态等
表单组件：封装商品详情和购物车组件，提高代码复用性

业务逻辑

服务层分离：将业务逻辑分离到服务层，提高代码可测试性
错误处理：增强错误处理机制，提供更友好的错误提示
实时更新：考虑添加实时商品库存更新，提升用户体验
智能推荐：实现更智能的商品推荐算法，基于用户位置和紧急程度

代码组织

模块化设计：采用模块化设计，分离平台特定代码
配置管理：使用配置文件管理不同平台的差异
目录结构：合理组织目录结构，便于维护和扩展
安全分区：对于用户数据等敏感信息，采用安全分区存储

本项目展示了如何使用React Native和TypeScript构建一个功能完整的应急助手应用。通过合理的架构设计、类型定义和状态管理，实现了跨平台的一致性体验。

随着React Native和鸿蒙系统的不断发展，跨端开发将会变得更加成熟和高效。未来可以考虑：

使用React Native 0.70+版本：利用新的架构特性，如Fabric渲染器和Turbo Modules，提升应用性能
探索鸿蒙原生能力：充分利用鸿蒙系统的分布式能力，实现多设备协同和更丰富的功能
引入现代化状态管理：使用Redux Toolkit或Zustand等现代状态管理库，简化状态管理
实现PWA支持：扩展应用的使用场景，支持Web平台
集成AI能力：引入AI技术，如智能应急推荐、实时库存预测等，提升应用智能化水平
实时数据同步：实现商品库存和价格的实时同步，确保数据准确性
多语言支持：添加多语言支持，提升应用的全球适配能力

真实演示案例代码：





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

// Base64 图标库
const ICONS_BASE64 = {
  repair: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  urgent: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  delivery: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  tools: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  battery: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  lightbulb: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  plug: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  medicine: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
};

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

// 应急商品类型
type EmergencyProduct = {
  id: string;
  name: string;
  category: '维修工具' | '应急用品' | '即时配送' | '生活必需';
  price: number;
  image: string;
  description: string;
  urgency?: string; // 紧急程度
  isAvailable?: boolean; // 是否有货
};

// 应急助手应用组件
const EmergencyHelperApp: React.FC = () => {
  const [products] = useState<EmergencyProduct[]>([
    {
      id: '1',
      name: '多功能工具箱',
      category: '维修工具',
      price: 129,
      image: '🔧',
      description: '包含螺丝刀、钳子等常用工具',
      urgency: '高',
      isAvailable: true
    },
    {
      id: '2',
      name: '应急手电筒',
      category: '应急用品',
      price: 59,
      image: '🔦',
      description: 'LED强光，续航48小时',
      urgency: '中',
      isAvailable: true
    },
    {
      id: '3',
      name: '30分钟达服务',
      category: '即时配送',
      price: 9,
      image: '🚚',
      description: '同城快速配送，准时到达',
      urgency: '高',
      isAvailable: true
    },
    {
      id: '4',
      name: '备用电池套装',
      category: '生活必需',
      price: 29,
      image: '🔋',
      description: '5号7号电池各4节',
      urgency: '中',
      isAvailable: false
    },
    {
      id: '5',
      name: 'LED灯泡',
      category: '生活必需',
      price: 19,
      image: '💡',
      description: '节能省电，寿命长达2万小时',
      urgency: '低',
      isAvailable: true
    },
    {
      id: '6',
      name: '创可贴急救包',
      category: '应急用品',
      price: 15,
      image: '🩹',
      description: '含多种规格创可贴',
      urgency: '中',
      isAvailable: true
    }
  ]);

  const getCategoryColor = (category: string) => {
    switch (category) {
      case '维修工具': return '#3b82f6';
      case '应急用品': return '#ef4444';
      case '即时配送': return '#10b981';
      case '生活必需': return '#f59e0b';
      default: return '#64748b';
    }
  };

  const handleProductDetail = (productId: string) => {
    const product = products.find(p => p.id === productId);
    if (product) {
      Alert.alert(
        '商品详情',
        `名称: ${product.name}\n` +
        `紧急程度: ${product.urgency}\n` +
        `分类: ${product.category}\n` +
        `价格: ¥${product.price}\n` +
        `库存: ${product.isAvailable ? '有货' : '缺货'}\n` +
        `描述: ${product.description}`,
        [{ text: '确定', style: 'cancel' }]
      );
    }
  };

  const handleQuickAdd = (productId: string) => {
    const product = products.find(p => p.id === productId);
    if (product) {
      if (!product.isAvailable) {
        Alert.alert('提示', '该商品暂时缺货，无法加入购物车');
        return;
      }
      
      Alert.alert(
        '加入购物车',
        `已将 ${product.name} 加入购物车\n` +
        `价格: ¥${product.price}`,
        [
          { text: '继续选购', style: 'cancel' },
          { text: '去结算', onPress: () => Alert.alert('提示', '跳转到购物车页面') }
        ]
      );
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <Text style={styles.title}>应急助手</Text>
        <Text style={styles.subtitle}>快速响应，解您燃眉之急</Text>
      </View>

      <ScrollView style={styles.content}>
        {/* 紧急推荐 */}
        <View style={styles.emergencyCard}>
          <Text style={styles.sectionTitle}>紧急推荐</Text>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            <View style={styles.emergencyRow}>
              {products.filter(p => p.urgency === '高').map(product => (
                <TouchableOpacity 
                  key={product.id}
                  style={styles.emergencyItem}
                  onPress={() => handleProductDetail(product.id)}
                >
                  <Text style={styles.productImage}>{product.image}</Text>
                  <Text style={styles.productName}>{product.name}</Text>
                  <Text style={styles.productUrgency}>🔥 {product.urgency}急</Text>
                  <Text style={styles.productPrice}>¥{product.price}</Text>
                  <View style={[
                    styles.stockTag,
                    { backgroundColor: product.isAvailable ? '#10b981' : '#ef4444' }
                  ]}>
                    <Text style={styles.stockTagText}>
                      {product.isAvailable ? '有货' : '缺货'}
                    </Text>
                  </View>
                </TouchableOpacity>
              ))}
            </View>
          </ScrollView>
        </View>

        {/* 分类导航 */}
        <View style={styles.categoriesCard}>
          <Text style={styles.sectionTitle}>应急分类</Text>
          
          {['维修工具', '应急用品', '即时配送', '生活必需'].map(category => (
            <View key={category} style={styles.categorySection}>
              <View style={[
                styles.categoryHeader,
                { borderLeftColor: getCategoryColor(category) }
              ]}>
                <Text style={styles.categoryTitle}>{category}</Text>
              </View>
              
              <View style={styles.productsGrid}>
                {products
                  .filter(p => p.category === category)
                  .map(product => (
                    <TouchableOpacity 
                      key={product.id}
                      style={styles.productItem}
                      onPress={() => handleProductDetail(product.id)}
                    >
                      <Text style={styles.largeProductImage}>{product.image}</Text>
                      <Text style={styles.largeProductName}>{product.name}</Text>
                      <Text style={styles.largeProductUrgency}>紧急程度: {product.urgency}</Text>
                      <Text style={styles.largeProductDesc}>{product.description}</Text>
                      <View style={styles.priceRow}>
                        <Text style={styles.largeProductPrice}>¥{product.price}</Text>
                        <View style={[
                          styles.smallStockTag,
                          { backgroundColor: product.isAvailable ? '#10b981' : '#ef4444' }
                        ]}>
                          <Text style={styles.smallStockTagText}>
                            {product.isAvailable ? '有货' : '缺货'}
                          </Text>
                        </View>
                      </View>
                      <TouchableOpacity 
                        style={[
                          styles.addButton,
                          { backgroundColor: product.isAvailable ? '#3b82f6' : '#94a3b8' }
                        ]}
                        onPress={() => handleQuickAdd(product.id)}
                        disabled={!product.isAvailable}
                      >
                        <Text style={styles.addButtonText}>
                          {product.isAvailable ? '+ 加入购物车' : '暂时缺货'}
                        </Text>
                      </TouchableOpacity>
                    </TouchableOpacity>
                  ))
                }
              </View>
            </View>
          ))}
        </View>

        {/* 应急贴士 */}
        <View style={styles.tipsCard}>
          <Text style={styles.sectionTitle}>应急小贴士</Text>
          
          <View style={styles.tipItem}>
            <Text style={styles.tipEmoji}>🏠</Text>
            <View style={styles.tipContent}>
              <Text style={styles.tipTitle}>家庭常备</Text>
              <Text style={styles.tipDesc}>准备基础维修工具和应急用品</Text>
            </View>
          </View>
          
          <View style={styles.tipItem}>
            <Text style={styles.tipEmoji}>⏱️</Text>
            <View style={styles.tipContent}>
              <Text style={styles.tipTitle}>时效优先</Text>
              <Text style={styles.tipDesc}>紧急情况选择最快配送服务</Text>
            </View>
          </View>
          
          <View style={styles.tipItem}>
            <Text style={styles.tipEmoji}>📱</Text>
            <View style={styles.tipContent}>
              <Text style={styles.tipTitle}>联系客服</Text>
              <Text style={styles.tipDesc}>24小时在线，随时为您服务</Text>
            </View>
          </View>
        </View>

        {/* 使用说明 */}
        <View style={styles.infoCard}>
          <Text style={styles.sectionTitle}>使用说明</Text>
          <Text style={styles.infoText}>• 30分钟极速配送服务</Text>
          <Text style={styles.infoText}>• 24小时客服在线支持</Text>
          <Text style={styles.infoText}>• 实时库存更新显示</Text>
          <Text style={styles.infoText}>• 支持紧急订单优先处理</Text>
        </View>
      </ScrollView>

      {/* 底部导航 */}
      <View style={styles.bottomNav}>
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>🔧</Text>
          <Text style={styles.navText}>工具</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>🚑</Text>
          <Text style={styles.navText}>应急</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navIcon}>📦</Text>
          <Text style={styles.navText}>配送</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.navItem, styles.activeNavItem]}>
          <Text style={styles.navIcon}>👤</Text>
          <Text style={styles.navText}>我的</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#dbeafe',
  },
  header: {
    flexDirection: 'column',
    padding: 16,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#bfdbfe',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#1e3a8a',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: '#2563eb',
  },
  content: {
    flex: 1,
    marginTop: 12,
  },
  emergencyCard: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1e3a8a',
    marginBottom: 12,
  },
  emergencyRow: {
    flexDirection: 'row',
  },
  emergencyItem: {
    width: 120,
    backgroundColor: '#dbeafe',
    borderRadius: 12,
    padding: 12,
    marginRight: 12,
    alignItems: 'center',
  },
  productImage: {
    fontSize: 28,
    marginBottom: 8,
  },
  productName: {
    fontSize: 12,
    fontWeight: '500',
    color: '#1e3a8a',
    marginBottom: 4,
    textAlign: 'center',
  },
  productUrgency: {
    fontSize: 10,
    color: '#ef4444',
    marginBottom: 4,
  },
  productPrice: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#2563eb',
  },
  stockTag: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 12,
    position: 'absolute',
    top: 8,
    right: 8,
  },
  stockTagText: {
    fontSize: 10,
    color: '#ffffff',
    fontWeight: '600',
  },
  categoriesCard: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  categorySection: {
    marginBottom: 16,
  },
  categoryHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    borderLeftWidth: 4,
    paddingLeft: 12,
    marginBottom: 12,
  },
  categoryTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#1e3a8a',
  },
  productsGrid: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
  },
  productItem: {
    width: '48%',
    backgroundColor: '#dbeafe',
    borderRadius: 12,
    padding: 12,
    marginBottom: 12,
  },
  largeProductImage: {
    fontSize: 32,
    marginBottom: 8,
    textAlign: 'center',
  },
  largeProductName: {
    fontSize: 14,
    fontWeight: '600',
    color: '#1e3a8a',
    marginBottom: 4,
    textAlign: 'center',
  },
  largeProductUrgency: {
    fontSize: 10,
    color: '#ef4444',
    marginBottom: 4,
    textAlign: 'center',
  },
  largeProductDesc: {
    fontSize: 12,
    color: '#64748b',
    marginBottom: 8,
    textAlign: 'center',
    lineHeight: 16,
  },
  priceRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 8,
  },
  largeProductPrice: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#2563eb',
  },
  smallStockTag: {
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 8,
    marginLeft: 8,
  },
  smallStockTagText: {
    fontSize: 10,
    color: '#ffffff',
    fontWeight: '600',
  },
  addButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
    alignItems: 'center',
  },
  addButtonText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: '500',
  },
  tipsCard: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  tipItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#bfdbfe',
  },
  tipEmoji: {
    fontSize: 20,
    width: 30,
  },
  tipContent: {
    flex: 1,
  },
  tipTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#1e3a8a',
    marginBottom: 2,
  },
  tipDesc: {
    fontSize: 12,
    color: '#64748b',
  },
  infoCard: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 80,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  infoText: {
    fontSize: 14,
    color: '#64748b',
    lineHeight: 20,
    marginBottom: 4,
  },
  bottomNav: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ffffff',
    borderTopWidth: 1,
    borderTopColor: '#bfdbfe',
    paddingVertical: 12,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  navItem: {
    alignItems: 'center',
    flex: 1,
  },
  activeNavItem: {
    paddingTop: 4,
    borderTopWidth: 2,
    borderTopColor: '#2563eb',
  },
  navIcon: {
    fontSize: 20,
    color: '#94a3b8',
    marginBottom: 4,
  },
  activeNavIcon: {
    color: '#2563eb',
  },
  navText: {
    fontSize: 12,
    color: '#94a3b8',
  },
  activeNavText: {
    color: '#2563eb',
    fontWeight: '500',
  },
});

export default EmergencyHelperApp;

请添加图片描述

打包

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

在这里插入图片描述

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

在这里插入图片描述

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

请添加图片描述
本文介绍了基于React Native开发跨平台应急助手应用的技术实践，重点解析其在鸿蒙系统上的适配方案。文章从场景化数据模型设计、轻量级状态管理、Flex布局适配鸿蒙设备、视觉样式规范匹配以及交互组件封装等维度，阐述了如何实现应急服务类应用的高效跨端开发。通过TypeScript强类型定义保障数据安全，利用React Native标准API实现与鸿蒙原生组件等效的UI效果和交互体验，展示了"一次开发、多端部署"的技术优势，为应急服务类应用提供了一套完整的跨平台解决方案。

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

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

【鸿蒙 PC 实战精讲】help2man 工具移植与适配指南（完整源码 + 编译脚本 + 避坑全集）标签： OpenHarmony | 鸿蒙 PC 开发 | help2man 移植 | 开源工具适配

开源鸿蒙跨平台开发者社区

Flutter三方库鸿蒙适配实战指南

随着鸿蒙生态的蓬勃发展，越来越多的开发者开始将现有的 Flutter 应用迁移至 HarmonyOS 平台。在这一过程中，三方库的适配无疑是核心挑战之一。本文将以实战的方式，详细讲解如何在 Flutter-OH 项目中接入 shared_preferences（本地存储）、dio（网络请求）和 cached_network_image（图片缓存）三个常用三方库，帮助开发者快速掌握鸿蒙化适配的完整流