基于React Native鸿蒙跨平台应用中的数据统计逻辑（如总库存计算、平均利用率计算）采用纯数据计算实现

本文介绍了基于React Native和鸿蒙系统的企业仓库监控应用技术实现方案。项目采用React Native函数式组件架构，结合TypeScript类型安全特性，实现了跨平台兼容的仓库管理系统。技术亮点包括：1) 精心设计的数据结构（Warehouse和InventoryRecord类型）；2) 基于Hooks的状态管理机制；3) 面向鸿蒙平台的性能优化策略。文章详细分析了核心业务逻辑、数据流

烬头8821

428人浏览 · 2026-02-02 10:35:52

烬头8821 · 2026-02-02 10:35:52 发布

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

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

核心技术栈

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

仓库类型（Warehouse）

type Warehouse = {
  id: string;
  name: string;
  location: string;
  totalCapacity: number;
  currentStock: number;
  utilizationRate: number;
};

该类型设计全面，包含了仓库管理的核心信息：

id：唯一标识符，确保数据唯一性
name：仓库名称，便于识别
location：仓库位置，用于地理分布管理
totalCapacity：总容量，衡量仓库规模
currentStock：当前库存，核心管理指标
utilizationRate：利用率，反映仓库使用效率

库存记录类型（InventoryRecord）

type InventoryRecord = {
  id: string;
  warehouseId: string;
  productName: string;
  operation: '入库' | '出库';
  quantity: number;
  timestamp: string;
  operator: string;
};

库存记录类型设计合理，包含了库存操作的关键信息：

id：记录唯一标识
warehouseId：关联仓库ID，建立数据关联
productName：产品名称，明确操作对象
operation：操作类型，使用联合类型确保类型安全
quantity：操作数量，记录库存变动
timestamp：操作时间，用于追溯
operator：操作人，明确责任

核心状态

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

warehouses：仓库列表，使用常量状态
inventoryRecords：库存记录列表，使用常量状态

状态更新

仓库详情查看：通过handleViewWarehouse函数，根据仓库ID查找对应仓库信息
报告生成：通过handleGenerateReport函数，生成库存报告
数据过滤：通过filter方法，根据仓库ID筛选相关库存记录
数据计算：通过reduce方法，计算总库存和平均利用率等统计信息

状态管理

不可变数据模式：使用find和filter方法查找和筛选数据，避免直接修改原状态
数据计算：使用reduce方法高效计算统计数据，提高性能
状态验证：在进行操作前，通过find方法验证仓库是否存在
用户反馈：操作完成后，通过Alert组件提供明确的成功提示

核心业务

仓库概览：展示仓库总数、总库存和平均利用率等关键指标
仓库详情：查看单个仓库的详细信息和近期操作记录
库存报告：生成不同时间维度的库存报告
利用率监控：根据利用率自动计算风险等级，提供视觉警示
操作记录追踪：查看仓库的近期库存操作记录

核心业务

const handleViewWarehouse = (warehouseId: string) => {
  const warehouse = warehouses.find(w => w.id === warehouseId);
  const records = inventoryRecords.filter(r => r.warehouseId === warehouseId);
  
  if (warehouse) {
    Alert.alert(
      '仓库详情',
      `仓库: ${warehouse.name}\n` +
      `位置: ${warehouse.location}\n` +
      `总容量: ${warehouse.totalCapacity}\n` +
      `当前库存: ${warehouse.currentStock}\n` +
      `利用率: ${warehouse.utilizationRate}%\n\n` +
      `近期操作记录:\n` +
      records.slice(0, 3).map(record =>
        `${record.timestamp} ${record.operation} ${record.productName} ${record.quantity}件`
      ).join('\n'),
      [{ text: '确定', style: 'cancel' }]
    );
  }
};

数据流设计

单向数据流：状态 → 视图 → 用户操作 → 状态更新
数据计算：在渲染时实时计算统计数据，确保数据准确性
业务逻辑封装：将复杂操作逻辑封装在专用函数中，提高代码可读性
用户交互反馈：使用Alert组件提供操作确认和信息提示，提升用户体验

组件

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

资源

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

性能

渲染性能：
- 避免不必要的重渲染，合理使用React.memo
- 对于长仓库列表，建议使用FlatList替代ScrollView
- 优化组件结构，减少嵌套层级
数据处理：
- 缓存计算结果，避免重复计算
- 优化库存记录过滤和统计数据计算
- 考虑使用useMemo缓存计算结果，提高性能
内存管理：
- 及时释放不再使用的资源
- 避免内存泄漏，特别是在处理多个仓库和库存记录时
- 合理使用缓存策略，平衡性能和内存占用

条件渲染：使用Platform API检测平台，针对不同平台使用不同实现
样式适配：考虑鸿蒙系统的设计规范，调整UI样式以符合平台特性
权限处理：鸿蒙系统的权限管理与Android有所不同，需单独处理
鸿蒙特性：充分利用鸿蒙系统的分布式能力，实现多设备协同
数据同步：针对鸿蒙系统的网络特性，调整数据同步策略

1. 类型定义

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

2. 状态管理

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

3. 组件化

组件拆分：将大型组件拆分为更小的可复用组件，如WarehouseCard、StatsSummary、InventoryRecordItem等
自定义Hook：提取重复的状态逻辑到自定义Hook，如useWarehouseManager、useInventoryTracker等
高阶组件：使用高阶组件处理横切关注点，如错误边界、加载状态等
表单组件：封装报告生成表单组件，提高代码复用性

4. 业务逻辑

服务层分离：将业务逻辑分离到服务层，提高代码可测试性
错误处理：增强错误处理机制，提供更友好的错误提示
实时更新：考虑添加实时仓库数据更新，提升用户体验
智能分析：实现更智能的仓库利用率分析，提供优化建议

5. 性能

列表优化：使用FlatList的性能优化特性，如getItemLayout、initialNumToRender等
网络优化：实现请求防抖和节流，减少网络请求频率
Bundle优化：使用代码分割和Tree Shaking，减少应用体积
启动优化：优化应用启动速度，减少初始加载时间

1. 代码

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

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

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

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

通过持续的技术迭代和优化，可以构建更加稳定、高效、智能的企业仓库监控应用，为企业的数字化转型提供技术支持。

在供应链管理数字化升级的浪潮中，面向企业管理者的仓库监控类应用需要兼顾多端适配能力与原生体验。React Native 凭借其“一次编写，多端运行”的核心特性，成为连接 iOS、Android 与鸿蒙（HarmonyOS）系统的最优技术路径。本文以一套企业级仓库监控应用为例，从数据模型设计、UI 层鸿蒙风格适配、业务逻辑跨端兼容等维度，完整解析 React Native 对接鸿蒙系统的技术实现与最佳实践。

本仓库监控应用聚焦企业管理者的核心需求——仓库状态监控、库存预警、操作记录追踪与数据报告生成，整体架构遵循 React Native 组件化开发范式，同时深度契合鸿蒙系统的设计语言与交互逻辑。从技术底层来看，应用基于 React 函数式组件 + TypeScript 构建，这种组合既保证了代码的类型安全，又能最大化跨端复用率，是 React Native 适配鸿蒙系统的理想技术选型。

1. 跨端数据一致性

在跨端应用开发中，统一的数据模型是避免多端行为不一致的关键。代码中通过 TypeScript 精准定义了两类核心业务数据类型，覆盖仓库管理与库存操作全场景：

// 仓库核心模型
type Warehouse = {
  id: string;
  name: string;
  location: string;
  totalCapacity: number;
  currentStock: number;
  utilizationRate: number;
};

// 库存操作记录模型
type InventoryRecord = {
  id: string;
  warehouseId: string;
  productName: string;
  operation: '入库' | '出库';
  quantity: number;
  timestamp: string;
  operator: string;
};

这种强类型定义不仅在开发阶段提供语法校验和智能提示，更关键的是在鸿蒙系统适配时，能够与 ArkTS 的类型系统形成天然映射。相较于纯 JavaScript 开发，TypeScript 能有效规避因数据类型模糊导致的跨端兼容性问题，尤其在鸿蒙这类新兴智能终端操作系统的适配中，类型安全带来的稳定性提升尤为显著。

2. 轻量级状态管理：

应用采用 React 内置的 useState Hook 管理核心业务状态，包括仓库列表与库存操作记录：

const [warehouses] = useState<Warehouse[]>([...]);
const [inventoryRecords] = useState<InventoryRecord[]>([...]);

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

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

1. 布局系统：

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

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

相较于鸿蒙系统的 DirectionalLayout 和 StackLayout，React Native 的 Flex 布局具备更强的跨端兼容性，通过 flexDirection、justifyContent、alignItems 等属性，能够精准还原鸿蒙系统的布局逻辑。例如仓库概览模块的三列统计卡片：

<View style={styles.statsSummary}>
  <View style={styles.statItem}>
    <Text style={styles.statNumber}>{warehouses.length}</Text>
    <Text style={styles.statLabel}>仓库总数</Text>
  </View>
  <View style={styles.statItem}>
    <Text style={styles.statNumber}>{/* 总库存 */}</Text>
    <Text style={styles.statLabel}>总库存</Text>
  </View>
  <View style={styles.statItem}>
    <Text style={styles.statNumber}>{/* 平均利用率 */}</Text>
    <Text style={styles.statLabel}>平均利用率</Text>
  </View>
</View>

这段代码通过 flexDirection: 'row' 和 justifyContent: 'space-around' 实现了鸿蒙系统特有的均分布局效果，无需针对鸿蒙系统做额外的布局适配，完美体现了 React Native “一次编写，多端适配”的核心优势。

2. 视觉样式：

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

色彩体系：采用鸿蒙系统的绿色系主色调（#16a34a、#14532d），搭配功能性色彩区分不同状态（高风险-红色、警告-黄色、正常-绿色）
圆角与阴影：使用 borderRadius: 12 实现鸿蒙风格的大圆角设计，通过 elevation（Android）和 shadow（iOS）属性适配鸿蒙系统的阴影效果
进度条组件：通过动态样式绑定实现鸿蒙风格的利用率进度条，根据利用率动态调整颜色和宽度：

<View style={[
  styles.utilizationFill,
  { 
    width: `${warehouse.utilizationRate}%`,
    backgroundColor: getUtilizationColor(warehouse.utilizationRate)
  }
]} />

这种样式设计方案完全基于 React Native 的标准 API 实现，在鸿蒙系统中能够通过 React Native 的渲染层自动转换为原生样式，无需编写平台特定代码，大幅提升了开发效率。

3. 交互组件：

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

SafeAreaView：对应鸿蒙系统的 SafeArea 组件，适配刘海屏、挖孔屏等异形屏，保证界面在鸿蒙不同终端设备上的完整性
TouchableOpacity：替代鸿蒙的 Button 组件，实现点击反馈效果，符合鸿蒙的交互规范，同时支持长按、点击等基础交互
Alert：对应鸿蒙的 TextDialog 组件，实现仓库详情、报告生成等弹窗交互，保持与鸿蒙原生应用一致的交互体验
ScrollView：与鸿蒙的 List 组件逻辑一致，实现长列表的滚动加载，适配鸿蒙系统的滑动交互逻辑

以仓库详情弹窗为例，代码通过 Alert.alert 实现鸿蒙风格的信息展示弹窗：

Alert.alert(
  '仓库详情',
  `仓库: ${warehouse.name}\n` +
  `位置: ${warehouse.location}\n` +
  `总容量: ${warehouse.totalCapacity}\n` +
  `当前库存: ${warehouse.currentStock}\n` +
  `利用率: ${warehouse.utilizationRate}%\n\n` +
  `近期操作记录:\n` +
  records.slice(0, 3).map(record => 
    `${record.timestamp} ${record.operation} ${record.productName} ${record.quantity}件`
  ).join('\n'),
  [{ text: '确定', style: 'cancel' }]
);

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

除了 UI 层的适配，业务逻辑的跨端兼容性是 React Native 开发的核心。本应用的核心业务逻辑包括仓库利用率计算、库存预警、操作记录筛选等，这些逻辑完全基于 JavaScript/TypeScript 实现，天然具备跨端运行能力。

1. 仓库利用率计算

应用实现了基于利用率的仓库预警逻辑，通过纯函数判断仓库状态并返回对应颜色值：

const getUtilizationColor = (rate: number) => {
  if (rate >= 90) return '#ef4444'; // 红色 - 高风险
  if (rate >= 80) return '#f59e0b'; // 黄色 - 警告
  return '#10b981'; // 绿色 - 正常
};

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

2. 数据统计与聚合计算

应用中的数据统计逻辑（如总库存计算、平均利用率计算）采用纯数据计算实现：

// 总库存计算
warehouses.reduce((sum, wh) => sum + wh.currentStock, 0)

// 平均利用率计算
Math.round(warehouses.reduce((sum, wh) => sum + wh.utilizationRate, 0) / warehouses.length)

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

3. 库存操作记录筛选与展示

应用通过仓库 ID 筛选对应操作记录，实现仓库与操作记录的关联展示：

const records = inventoryRecords.filter(r => r.warehouseId === warehouseId);

该逻辑基于 JavaScript 标准数组方法实现，在 React Native 的跨端环境中能够保持一致的筛选规则，避免因平台差异导致的业务逻辑不一致问题。同时，代码中通过 slice(0, 3) 限制展示条数，兼顾了鸿蒙系统的性能优化要求，避免大量数据渲染导致的界面卡顿。

从本应用的实现来看，React Native 对接鸿蒙系统的核心在于“抽象层适配”，而非“重写适配”，具体体现在以下几个维度：

JS 引擎层兼容：鸿蒙系统内置了符合 ECMAScript 标准的 JavaScript 引擎，能够直接执行 React Native 的 JS 代码，这是跨端运行的底层基础。本应用中所有的业务逻辑代码（状态管理、数据计算、交互处理）均运行在 JS 引擎层，无需任何修改即可在鸿蒙系统中执行，保证了业务逻辑的跨端一致性。
组件映射层适配：React Native 通过自定义渲染器，将 React 组件（View、Text、TouchableOpacity 等）映射为鸿蒙系统的原生组件。例如 View 组件会被转换为鸿蒙的 Div 组件，Text 组件会被转换为鸿蒙的 Text 组件，这种映射关系由 React Native 的鸿蒙适配层自动完成，开发者无需关注底层实现细节，只需专注于业务逻辑开发。
样式转换层适配：React Native 的 StyleSheet 样式会被自动转换为鸿蒙系统的原生样式，例如 borderRadius 对应鸿蒙的 border-radius，backgroundColor 对应鸿蒙的 background-color。本应用中定义的所有鸿蒙风格样式（圆角、阴影、色彩体系）都能通过这一层完成自动转换，保证了 UI 风格在鸿蒙系统中的一致性。
API 适配层兼容：React Native 提供的基础 API（如 Alert、Dimensions）都有对应的鸿蒙实现，本应用中使用的 Alert.alert、Dimensions.get 等 API，在鸿蒙系统中会被替换为对应的原生 API 调用，保证了交互行为的跨端一致性。

本仓库监控应用的实现完整展现了 React Native 在鸿蒙跨端开发领域的技术优势，核心要点可总结为：

强类型设计保障跨端一致性：TypeScript 类型定义不仅提升代码质量，更能与鸿蒙 ArkTS 形成类型映射，降低跨端适配成本，是企业级应用跨端开发的基础保障
纯逻辑开发最大化复用率：业务逻辑与 UI 层解耦，采用纯 JavaScript/TypeScript 实现核心逻辑，无需针对鸿蒙系统做特殊修改，大幅提升开发效率
标准 API 适配鸿蒙生态：基于 React Native 标准组件和 API 开发，通过底层适配层自动对接鸿蒙原生能力，兼顾开发效率与原生体验

对于希望基于 React Native 开发鸿蒙应用的开发者而言，本案例提供了清晰的实践路径：聚焦业务逻辑的跨端复用，依托 React Native 的抽象层完成与鸿蒙系统的对接，既能享受跨端开发的效率优势，又能保证鸿蒙系统的原生体验，是企业级仓库管理类应用跨端开发的最优解。

真实演示案例代码：





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

// Base64 图标库
const ICONS_BASE64 = {
  warehouse: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  chart: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  inventory: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  report: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  location: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  alert: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  check: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  info: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
};

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

// 仓库类型
type Warehouse = {
  id: string;
  name: string;
  location: string;
  totalCapacity: number;
  currentStock: number;
  utilizationRate: number;
};

// 库存记录类型
type InventoryRecord = {
  id: string;
  warehouseId: string;
  productName: string;
  operation: '入库' | '出库';
  quantity: number;
  timestamp: string;
  operator: string;
};

// 企业管理者仓库监控应用组件
const WarehouseMonitoringApp: React.FC = () => {
  const [warehouses] = useState<Warehouse[]>([
    {
      id: 'wh1',
      name: '北京一号仓',
      location: '北京市朝阳区',
      totalCapacity: 10000,
      currentStock: 7500,
      utilizationRate: 75
    },
    {
      id: 'wh2',
      name: '上海二号仓',
      location: '上海市浦东新区',
      totalCapacity: 8000,
      currentStock: 6200,
      utilizationRate: 77.5
    },
    {
      id: 'wh3',
      name: '广州三号仓',
      location: '广州市天河区',
      totalCapacity: 12000,
      currentStock: 8900,
      utilizationRate: 74.2
    }
  ]);

  const [inventoryRecords] = useState<InventoryRecord[]>([
    {
      id: '1',
      warehouseId: 'wh1',
      productName: 'iPhone 15 Pro',
      operation: '入库',
      quantity: 200,
      timestamp: '2023-12-01 10:30',
      operator: '张管理员'
    },
    {
      id: '2',
      warehouseId: 'wh2',
      productName: 'MacBook Air',
      operation: '出库',
      quantity: 150,
      timestamp: '2023-12-01 14:20',
      operator: '李管理员'
    }
  ]);

  const getUtilizationColor = (rate: number) => {
    if (rate >= 90) return '#ef4444'; // 红色 - 高风险
    if (rate >= 80) return '#f59e0b'; // 黄色 - 警告
    return '#10b981'; // 绿色 - 正常
  };

  const handleViewWarehouse = (warehouseId: string) => {
    const warehouse = warehouses.find(w => w.id === warehouseId);
    const records = inventoryRecords.filter(r => r.warehouseId === warehouseId);
    
    if (warehouse) {
      Alert.alert(
        '仓库详情',
        `仓库: ${warehouse.name}\n` +
        `位置: ${warehouse.location}\n` +
        `总容量: ${warehouse.totalCapacity}\n` +
        `当前库存: ${warehouse.currentStock}\n` +
        `利用率: ${warehouse.utilizationRate}%\n\n` +
        `近期操作记录:\n` +
        records.slice(0, 3).map(record => 
          `${record.timestamp} ${record.operation} ${record.productName} ${record.quantity}件`
        ).join('\n'),
        [{ text: '确定', style: 'cancel' }]
      );
    }
  };

  const handleGenerateReport = () => {
    Alert.alert(
      '库存报告',
      '请选择报告类型:\n' +
      '• 日报\n' +
      '• 周报\n' +
      '• 月报\n' +
      '• 自定义时段',
      [
        { 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.overviewCard}>
          <Text style={styles.sectionTitle}>仓库概览</Text>
          
          <View style={styles.statsSummary}>
            <View style={styles.statItem}>
              <Text style={styles.statNumber}>{warehouses.length}</Text>
              <Text style={styles.statLabel}>仓库总数</Text>
            </View>
            <View style={styles.statItem}>
              <Text style={styles.statNumber}>
                {warehouses.reduce((sum, wh) => sum + wh.currentStock, 0)}
              </Text>
              <Text style={styles.statLabel}>总库存</Text>
            </View>
            <View style={styles.statItem}>
              <Text style={styles.statNumber}>
                {Math.round(warehouses.reduce((sum, wh) => sum + wh.utilizationRate, 0) / warehouses.length)}%
              </Text>
              <Text style={styles.statLabel}>平均利用率</Text>
            </View>
          </View>
        </View>

        {/* 仓库列表 */}
        <View style={styles.warehousesCard}>
          <Text style={styles.sectionTitle}>仓库列表</Text>
          
          {warehouses.map(warehouse => (
            <TouchableOpacity
              key={warehouse.id}
              style={styles.warehouseItem}
              onPress={() => handleViewWarehouse(warehouse.id)}
            >
              <View style={styles.warehouseInfo}>
                <Text style={styles.warehouseName}>{warehouse.name}</Text>
                <Text style={styles.warehouseLocation}>{warehouse.location}</Text>
                <View style={styles.capacityInfo}>
                  <Text style={styles.capacityText}>
                    库存: {warehouse.currentStock}/{warehouse.totalCapacity}
                  </Text>
                </View>
              </View>
              
              <View style={styles.utilizationSection}>
                <View style={styles.utilizationBar}>
                  <View style={[
                    styles.utilizationFill,
                    { 
                      width: `${warehouse.utilizationRate}%`,
                      backgroundColor: getUtilizationColor(warehouse.utilizationRate)
                    }
                  ]} />
                </View>
                <Text style={[
                  styles.utilizationText,
                  { color: getUtilizationColor(warehouse.utilizationRate) }
                ]}>
                  {warehouse.utilizationRate}%
                </Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>

        {/* 库存预警 */}
        <View style={styles.alertsCard}>
          <Text style={styles.sectionTitle}>库存预警</Text>
          
          {warehouses.filter(wh => wh.utilizationRate >= 80).map(warehouse => (
            <View key={warehouse.id} style={styles.alertItem}>
              <Text style={styles.alertIcon}>
                {warehouse.utilizationRate >= 90 ? '🔴' : '🟡'}
              </Text>
              <View style={styles.alertContent}>
                <Text style={styles.alertTitle}>
                  {warehouse.utilizationRate >= 90 ? '高风险' : '警告'}
                </Text>
                <Text style={styles.alertText}>
                  {warehouse.name} 利用率达到 {warehouse.utilizationRate}%
                </Text>
              </View>
            </View>
          ))}
          
          {warehouses.filter(wh => wh.utilizationRate < 80).length > 0 && (
            <View style={styles.normalItem}>
              <Text style={styles.normalIcon}>🟢</Text>
              <Text style={styles.normalText}>
                {warehouses.filter(wh => wh.utilizationRate < 80).length}个仓库状态正常
              </Text>
            </View>
          )}
        </View>

        {/* 操作记录 */}
        <View style={styles.recordsCard}>
          <Text style={styles.sectionTitle}>最新操作</Text>
          
          {inventoryRecords.slice(0, 5).map(record => {
            const warehouse = warehouses.find(w => w.id === record.warehouseId);
            return (
              <View key={record.id} style={styles.recordItem}>
                <View style={styles.recordHeader}>
                  <Text style={styles.warehouseTag}>{warehouse?.name}</Text>
                  <Text style={[
                    styles.operationTag,
                    { backgroundColor: record.operation === '入库' ? '#10b981' : '#ef4444' }
                  ]}>
                    {record.operation}
                  </Text>
                </View>
                <Text style={styles.recordProduct}>{record.productName}</Text>
                <View style={styles.recordFooter}>
                  <Text style={styles.recordQuantity}>{record.quantity}件</Text>
                  <Text style={styles.recordTime}>{record.timestamp}</Text>
                </View>
              </View>
            );
          })}
        </View>

        {/* 报告生成 */}
        <View style={styles.reportCard}>
          <Text style={styles.sectionTitle}>数据报告</Text>
          
          <TouchableOpacity 
            style={styles.reportButton}
            onPress={handleGenerateReport}
          >
            <Text style={styles.reportButtonText}>生成库存报告</Text>
          </TouchableOpacity>
          
          <View style={styles.reportOptions}>
            <TouchableOpacity style={styles.optionItem}>
              <Text style={styles.optionText}>日报</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.optionItem}>
              <Text style={styles.optionText}>周报</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.optionItem}>
              <Text style={styles.optionText}>月报</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* 使用说明 */}
        <View style={styles.infoCard}>
          <Text style={styles.sectionTitle}>使用说明</Text>
          <Text style={styles.infoText}>• 实时监控各仓库库存水平</Text>
          <Text style={styles.infoText}>• 自动预警库存异常情况</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: '#f0fdf4',
  },
  header: {
    flexDirection: 'column',
    padding: 16,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#bbf7d0',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#14532d',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: '#16a34a',
  },
  content: {
    flex: 1,
    marginTop: 12,
  },
  overviewCard: {
    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: '#14532d',
    marginBottom: 12,
  },
  statsSummary: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  statItem: {
    alignItems: 'center',
  },
  statNumber: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#16a34a',
  },
  statLabel: {
    fontSize: 12,
    color: '#64748b',
    marginTop: 4,
  },
  warehousesCard: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  warehouseItem: {
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#bbf7d0',
  },
  warehouseInfo: {
    marginBottom: 8,
  },
  warehouseName: {
    fontSize: 16,
    fontWeight: '600',
    color: '#14532d',
    marginBottom: 2,
  },
  warehouseLocation: {
    fontSize: 14,
    color: '#64748b',
    marginBottom: 4,
  },
  capacityInfo: {
    // 容量信息样式
  },
  capacityText: {
    fontSize: 12,
    color: '#64748b',
  },
  utilizationSection: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  utilizationBar: {
    flex: 1,
    height: 8,
    backgroundColor: '#e2e8f0',
    borderRadius: 4,
    overflow: 'hidden',
    marginRight: 8,
  },
  utilizationFill: {
    height: '100%',
    borderRadius: 4,
  },
  utilizationText: {
    fontSize: 14,
    fontWeight: '500',
    width: 40,
  },
  alertsCard: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  alertItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    backgroundColor: '#fffbeb',
    borderRadius: 8,
    marginBottom: 8,
  },
  alertIcon: {
    fontSize: 16,
    marginRight: 8,
  },
  alertContent: {
    flex: 1,
  },
  alertTitle: {
    fontSize: 14,
    fontWeight: '500',
    color: '#92400e',
    marginBottom: 2,
  },
  alertText: {
    fontSize: 12,
    color: '#92400e',
  },
  normalItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    backgroundColor: '#f0fdf4',
    borderRadius: 8,
  },
  normalIcon: {
    fontSize: 16,
    marginRight: 8,
  },
  normalText: {
    fontSize: 14,
    color: '#14532d',
  },
  recordsCard: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  recordItem: {
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#bbf7d0',
  },
  recordHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 4,
  },
  warehouseTag: {
    fontSize: 12,
    color: '#64748b',
  },
  operationTag: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 12,
  },
  recordProduct: {
    fontSize: 14,
    fontWeight: '500',
    color: '#14532d',
    marginBottom: 4,
  },
  recordFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  recordQuantity: {
    fontSize: 12,
    color: '#64748b',
  },
  recordTime: {
    fontSize: 12,
    color: '#64748b',
  },
  reportCard: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  reportButton: {
    backgroundColor: '#16a34a',
    paddingVertical: 14,
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 12,
  },
  reportButtonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
  reportOptions: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  optionItem: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    backgroundColor: '#f0fdf4',
    borderRadius: 16,
  },
  optionText: {
    fontSize: 14,
    color: '#16a34a',
  },
  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: '#bbf7d0',
    paddingVertical: 12,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  navItem: {
    alignItems: 'center',
    flex: 1,
  },
  activeNavItem: {
    paddingTop: 4,
    borderTopWidth: 2,
    borderTopColor: '#16a34a',
  },
  navIcon: {
    fontSize: 20,
    color: '#94a3b8',
    marginBottom: 4,
  },
  activeNavIcon: {
    color: '#16a34a',
  },
  navText: {
    fontSize: 12,
    color: '#94a3b8',
  },
  activeNavText: {
    color: '#16a34a',
    fontWeight: '500',
  },
});

export default WarehouseMonitoringApp;

请添加图片描述

打包

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

在这里插入图片描述

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

在这里插入图片描述

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

请添加图片描述
本文介绍了基于React Native和鸿蒙系统的企业仓库监控应用技术实现方案。项目采用React Native函数式组件架构，结合TypeScript类型安全特性，实现了跨平台兼容的仓库管理系统。技术亮点包括：1) 精心设计的数据结构（Warehouse和InventoryRecord类型）；2) 基于Hooks的状态管理机制；3) 面向鸿蒙平台的性能优化策略。文章详细分析了核心业务逻辑、数据流设计以及跨端兼容性考虑，并提供了组件化优化、状态管理改进等实用建议，为开发高效、可维护的跨平台企业应用提供了技术参考。

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

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

Flutter三方库适配OpenHarmony【flutter_speech】— AbilityAware 接口与上下文获取

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net上一篇我们搞定了FlutterPlugin接口，插件已经能被Flutter引擎加载了。但如果你现在就去调用activate方法申请麦克风权限，会发现一个尴尬的问题——没有UIAbilityContext。在OpenHarmony中，很多系统级操作（权限申请、弹窗、页面跳转等）都需要。这个上

人工智能6S服务平台

在React Native中开发鸿组件（这里指的是鸿蒙（HarmonyOS）组件），你需要了解鸿蒙开发的基础以及如何在React Native项目中集成鸿蒙应用。鸿蒙OS是由华为开发的一个分布式操作

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