基于React Native鸿蒙跨平台handleApproveLeave`和`handleRejectLeave`函数则通过精准的`map`遍历实现单条申请状态的更新，确保审批操作的原子性

电商类应用是移动端开发的核心场景之一，涵盖商品展示、分类导航、推荐系统、商家模块、交互操作等复杂业务逻辑。这份 React Native 全能商城代码，采用组件化、强类型、高性能渲染的设计思路，完整实现了电商 App 首页的核心功能，同时具备极佳的跨端适配潜力。本文将从 React Native 原生技术架构、核心功能实现亮点、鸿蒙（HarmonyOS）跨端适配方案三个维度，深度拆解这款商城应用

xiaoqi922

241人浏览 · 2026-02-02 11:17:00

xiaoqi922 · 2026-02-02 11:17:00 发布

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

在企业人力资源管理体系中，请假审批是考勤合规性管控的核心环节，其对流程闭环完整性、状态同步实时性和跨端操作一致性有着严苛要求。鸿蒙系统的分布式全场景能力为企业办公应用的多终端部署提供了底层支撑，而React Native凭借“一次开发、多端运行”的技术特性，成为这类考勤应用跨端开发的核心技术底座。本文将从请假审批状态管理、层级化数据模型设计、审批流程交互适配到鸿蒙跨端兼容的底层实现，全方位拆解这款请假审批应用的技术架构，剖析React Native与鸿蒙生态深度融合的关键技术要点。

React Native与鸿蒙

这款请假审批应用的核心架构遵循React Native“通用抽象层+平台适配层”的设计原则，所有核心功能均基于React Native通用API（View、TextInput、Modal、TouchableOpacity）和Hooks体系构建，未引入任何平台专属代码，这是实现鸿蒙跨端兼容的核心前提。

从底层适配逻辑来看，React Native for HarmonyOS框架会将React Native通用组件无缝映射为鸿蒙ArkUI原生组件：TouchableOpacity对应鸿蒙Button原生组件，保留点击反馈的同时适配鸿蒙交互规范，尤其适合员工选择、审批操作（批准/拒绝）这类需要明确操作反馈的办公场景；TextInput映射为鸿蒙TextInput原生控件，支持多行文本输入特性，完美适配请假原因这类长文本录入场景，保证在鸿蒙设备上的输入流畅性和文本排版一致性；Modal组件转换为鸿蒙Dialog原生模态框，适配鸿蒙系统弹窗交互逻辑，用于展示包含请假详情和审批状态的完整信息，保证办公数据展示的完整性；Alert则调用鸿蒙系统级弹窗能力，在自动审批完成时即时推送通知，确保审批结果触达相关人员，符合企业考勤“流程闭环”的核心诉求。

此外，应用通过Dimensions.get('window')获取设备屏幕尺寸，该API在鸿蒙系统中会被React Native框架适配为鸿蒙getWindowSize原生能力，能够精准获取不同形态鸿蒙设备（手机、平板、智慧屏）的屏幕参数——例如在鸿蒙平板上展示完整的请假审批列表和审批操作面板，在手机上呈现精简的请假申请录入界面，在智慧屏上适配企业管理层的审批状态大屏展示需求，完美契合企业请假审批多终端协作的业务场景。

保障审批流程

请假审批的核心是员工层级关系与申请状态数据的精准匹配，代码中通过TypeScript构建了多层级强类型数据模型，从员工档案（含上级关联）到请假申请（含状态枚举），形成闭环的企业考勤审批数据体系，既规避前端开发中的类型错误，又在跨端编译阶段拦截数据格式偏差，适配鸿蒙ArkTS的静态类型特性。

// 员工档案模型：新增上级关联字段，为审批层级提供数据基础
type Employee = {
  id: string;
  name: string;
  department: string;         // 字符串型部门，适配技术部/市场部等企业组织架构
  position: string;            // 字符串型职位，兼容前端工程师/部门经理等岗位描述
  supervisorId: string;       // 字符串型上级ID，构建企业审批层级关系
};

// 请假申请核心模型：整合申请信息与审批状态，是应用的核心数据载体
type LeaveApplication = {
  id: string;
  employeeId: string;
  startDate: string;          // 字符串型开始日期，兼容跨端日期格式（YYYY-MM-DD）
  endDate: string;            // 字符串型结束日期，与开始日期形成完整请假周期
  reason: string;             // 字符串型请假原因，适配长文本录入场景
  status: 'pending' | 'approved' | 'rejected'; // 枚举型审批状态，保证状态值的唯一性
};

这些类型定义严格约束了企业请假审批相关数据的格式和类型，在鸿蒙系统中，React Native的TypeScript编译器会对JS层与鸿蒙ArkTS层之间的数据交互进行严格校验。例如，status采用联合类型枚举（pending/approved/rejected），既满足审批流程的三态化需求，又保证跨端数据解析的一致性，避免因鸿蒙ArkTS静态类型特性与JavaScript动态类型特性不兼容导致的审批状态判定错误；supervisorId作为字符串类型，在跨端传递时会被强制校验，确保员工审批层级关系的精准匹配，符合企业请假审批“层级清晰、流程可控”的核心要求。

React Hooks驱动的跨端审批流程管理

应用的核心业务逻辑（自动审批机制、手动提交申请、审批状态更新）均基于React Hooks（useState、useEffect）实现，这种轻量级状态管理方式完美适配React Native的跨端生命周期模型，同时与鸿蒙组件生命周期深度融合，保障了核心审批流程的跨端稳定运行。

不可变更新：

应用通过useState管理核心数据状态，采用“不可变更新”的方式修改状态，避免引用类型数据在跨端环境下的共享冲突。例如，更新请假申请状态时，通过数组map方法创建新数组副本：

const updatedApplications = leaveApplications.map(app => 
  app.id === applicationId ? { ...app, status: 'approved' } : app
);
setLeaveApplications(updatedApplications);

这种不可变更新策略在鸿蒙系统中尤为关键——鸿蒙分布式数据管理要求数据副本的一致性，不可变更新保证每次状态变更都会生成新的数据源，避免多端数据同步时的冲突问题，确保请假申请状态在鸿蒙多设备间的同步准确性，符合企业请假审批“状态统一、流程可溯”的核心要求。

自动审批机制：

应用通过useEffect实现每分钟一次的自动审批逻辑，这一核心流程在鸿蒙系统中稳定运行的核心在于：setInterval/clearInterval是React Native封装的通用定时器API，已适配鸿蒙任务调度机制；useEffect的返回清理函数对应鸿蒙组件onDestroy生命周期，确保定时器在组件卸载时被销毁，避免鸿蒙设备内存泄漏。

useEffect(() => {
  const interval = setInterval(() => {
    const randomApplication = leaveApplications[Math.floor(Math.random() * leaveApplications.length)];
    if (randomApplication.status === 'pending') {
      const updatedApplications = leaveApplications.map(app => 
        app.id === randomApplication.id ? { ...app, status: Math.random() > 0.5 ? 'approved' : 'rejected' } : app
      );
      setLeaveApplications(updatedApplications);
      // 鸿蒙系统级通知：调用原生Alert能力推送审批结果
      Alert.alert('审批通知', `请假申请已${Math.random() > 0.5 ? '批准' : '拒绝'}`);
    }
  }, 60000);

  return () => clearInterval(interval); // 适配鸿蒙组件销毁生命周期
}, [leaveApplications]);

自动审批逻辑中，通过数组find和map方法实现精准的状态更新，完全基于ES6标准数组API实现，在鸿蒙系统中会被React Native框架转换为ArkTS的数组操作逻辑，保证不同鸿蒙设备上审批状态更新的一致性；Alert.alert在鸿蒙系统中会触发原生系统通知，确保审批结果能即时触达相关人员，符合企业请假审批“流程自动化、结果即时化”的核心诉求。

手动提交与审批操作逻辑：

handleSubmitLeaveApplication函数是请假申请录入的核心入口，其内部的状态更新逻辑采用不可变模式（setLeaveApplications([...leaveApplications, newApplication])），保证新申请在鸿蒙分布式数据环境下的同步准确性；handleApproveLeave和handleRejectLeave函数则通过精准的map遍历实现单条申请状态的更新，确保审批操作的原子性，避免因多端并发操作导致的状态混乱，完全适配企业请假审批“操作精准、状态可控”的业务需求。

应用的UI层基于React Native的StyleSheet统一管理样式，既保证鸿蒙系统中的原生渲染效果，又兼顾请假审批应用对操作辨识度、状态可视化的特殊要求。

样式系统

StyleSheet将CSS样式抽象为跨平台的样式对象，核心样式属性（flex、borderRadius、padding、elevation）在鸿蒙系统中会被精准转换为ArkUI的布局属性，同时针对审批操作设计了差异化的视觉样式：

const styles = StyleSheet.create({
  section: {
    backgroundColor: '#ffffff',
    marginHorizontal: 16,
    borderRadius: 12,
    padding: 16,
    // 阴影跨端适配：elevation适配鸿蒙/Android，shadow系列适配iOS
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  approveButton: {
    backgroundColor: '#10b981', // 绿色系批准按钮，符合企业办公视觉规范
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
    marginRight: 8,
  },
  rejectButton: {
    backgroundColor: '#ef4444', // 红色系拒绝按钮，强化操作辨识度
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
  },
  input: {
    flex: 1,
    backgroundColor: '#f0f9ff', // 浅蓝主题，适配企业办公应用视觉规范
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 8,
    fontSize: 14,
    color: '#0c4a6e',
  }
});

其中，elevation属性在鸿蒙系统中会被解析为原生阴影层级，borderRadius适配鸿蒙圆角渲染规则，保证UI视觉效果的跨端一致性；批准/拒绝按钮采用差异化的色彩体系（绿色/红色），既符合企业办公应用的视觉规范，又适配鸿蒙系统的色彩渲染特性，提升审批操作的辨识度，避免误操作；浅蓝主题（#f0f9ff）的输入框背景色，降低长时间录入请假信息的视觉疲劳，适配企业考勤数据录入的核心场景。

交互组件

核心交互组件TouchableOpacity在鸿蒙系统中会被渲染为具备原生点击反馈的按钮，选中态的selectedCard样式（边框高亮）能够清晰标识当前选择的员工，符合企业考勤应用“操作可追溯、状态可识别”的核心要求；仅对pending状态的申请展示批准/拒绝按钮，实现了基于状态的交互逻辑控制，适配企业请假审批“流程阶段化”的业务特性。

Modal组件通过animationType="slide"实现滑动弹窗效果，在鸿蒙系统中适配为原生滑动模态框，用于展示包含请假详情的完整信息（员工信息、请假周期、原因、审批状态），既保证数据展示的完整性，又符合鸿蒙系统交互规范，提升企业请假审批数据查看的安全性。

当前代码已实现基础的鸿蒙跨端兼容，在生产环境中，可针对鸿蒙系统特性和请假审批业务需求进行深度优化，进一步提升应用的企业考勤服务能力：

1. 高性能列表渲染

应用中请假申请列表采用ScrollView + map的方式渲染，在鸿蒙系统中面对大量企业审批数据时可能出现卡顿。可替换为React Native的FlatList组件，该组件在鸿蒙系统中会适配ArkUI的List原生组件，实现按需渲染和组件复用，通过getItemLayout优化列表滚动性能，尤其适合展示企业员工月度/年度的请假申请记录和审批统计数据。

2. 鸿蒙原生

审批结果的即时触达是核心需求，可通过React Native的Native Module机制封装鸿蒙NotificationKit原生API，将通知推送逻辑下沉到鸿蒙原生层。例如，利用鸿蒙的系统级通知能力，在审批完成时推送原生系统通知（而非仅弹窗），即使应用在后台运行也能触达相关人员；同时利用鸿蒙的分布式通知能力，实现审批结果在员工、上级、人事多鸿蒙设备上的同步推送，确保流程闭环。

3. 分布式

基于鸿蒙分布式数据管理能力，可通过React Native的跨端通信机制，实现请假审批流程在多鸿蒙设备间的同步。例如，上级在鸿蒙平板上批准某员工的请假申请，可实时同步到员工手机端的考勤应用和人事智慧屏的考勤系统，自动更新该员工的考勤状态，形成“员工-上级-人事”的闭环审批管理。

这款基于React Native开发的请假审批应用，通过强类型数据模型、React Hooks状态管理和通用UI组件设计，构建了具备完整鸿蒙跨端兼容能力的企业考勤应用架构，核心技术要点可总结为：

通用API选型是实现鸿蒙兼容的基础，基于React Native通用组件构建核心逻辑，规避平台专属代码，保证了请假审批UI和交互的跨端一致性；
TypeScript强类型约束不仅提升企业考勤数据的精准性，更适配鸿蒙ArkTS的静态类型特性，避免跨端数据交互中的类型错误，保障审批状态判定的准确性；
React Hooks状态管理与鸿蒙组件生命周期深度融合，采用不可变更新策略，保障了自动审批、手动操作等核心流程的跨端稳定运行；
统一的StyleSheet样式系统实现了UI在鸿蒙设备上的原生渲染，差异化的视觉设计兼顾了请假审批应用的操作辨识度和状态可视化需求。

在企业人力资源管理中，请假审批是一项日常且重要的工作流程。本文将深入剖析一个基于 React Native 构建的请假审批应用，探讨其技术实现细节及鸿蒙跨端能力的应用。

技术选型

该应用采用了现代 React Native 函数式组件架构，通过 TypeScript 类型系统和 React Hooks 实现了一个功能完整的请假审批管理系统。核心技术栈包括：

React Native：作为跨端开发框架，提供了统一的组件 API，确保应用在 iOS、Android 及鸿蒙平台上的一致性体验
TypeScript：通过严格的类型定义增强代码可维护性，明确了数据结构和组件接口
React Hooks：使用 useState 管理应用状态，useEffect 处理副作用逻辑，实现了声明式的状态管理
Base64 图标：采用 Base64 编码的图标资源，避免了不同平台资源格式的差异，提高了跨端兼容性
响应式布局：使用 Dimensions API 获取屏幕尺寸，实现适配不同设备的响应式界面

数据模型

应用通过 TypeScript 接口定义了两个核心数据类型，构建了完整的请假审批数据模型体系：

// 员工类型
type Employee = {
  id: string;
  name: string;
  department: string;
  position: string;
  supervisorId: string;
};

// 请假申请类型
type LeaveApplication = {
  id: string;
  employeeId: string;
  startDate: string;
  endDate: string;
  reason: string;
  status: 'pending' | 'approved' | 'rejected';
};

这种强类型设计不仅提高了代码可读性，也为鸿蒙跨端适配提供了清晰的数据契约，确保不同平台间数据传递的一致性。数据模型的设计充分考虑了请假审批的核心要素，包含了员工信息、请假时间范围、请假原因和审批状态等关键数据。

状态管理

应用使用 useState Hook 管理多个复杂状态，包括员工列表、请假申请、选中状态等：

const [employees] = useState<Employee[]>([
  {
    id: '1',
    name: '李先生',
    department: '技术部',
    position: '前端工程师',
    supervisorId: '2'
  },
  // 其他员工...
]);

// 其他状态定义...

特别值得注意的是，应用通过 useEffect 实现了请假申请的自动审批机制：

// 自动审批请假申请
useEffect(() => {
  const interval = setInterval(() => {
    const randomApplication = leaveApplications[Math.floor(Math.random() * leaveApplications.length)];
    if (randomApplication.status === 'pending') {
      const updatedApplications = leaveApplications.map(app =>
        app.id === randomApplication.id ? { ...app, status: Math.random() > 0.5 ? 'approved' : 'rejected' } : app
      );
      setLeaveApplications(updatedApplications);
      Alert.alert('审批通知', `请假申请已${Math.random() > 0.5 ? '批准' : '拒绝'}`);
    }
  }, 60000);

  return () => clearInterval(interval);
}, [leaveApplications]);

这种基于时间间隔的自动审批机制，模拟了真实场景中管理者审批请假申请的过程，为考勤管理提供了自动化的技术支持。同时，通过 useEffect 的清理函数，确保了定时器在组件卸载时被正确清除，避免了内存泄漏。

在 React Native 鸿蒙跨端开发中，该应用体现了以下关键技术点：

组件兼容性：使用 React Native 核心组件（如 SafeAreaView、View、Text、TouchableOpacity、ScrollView、Modal 等），确保在鸿蒙系统上的兼容性
资源管理：通过 Base64 编码的图标资源，避免了不同平台资源格式的差异，提高了跨端部署的一致性
尺寸适配：使用 Dimensions API 获取屏幕尺寸，实现响应式布局，适应不同设备屏幕
状态管理：采用 React Hooks 进行状态管理，保持跨平台代码一致性
类型安全：TypeScript 类型定义确保了数据结构在不同平台间的一致性
API 调用：使用 React Native 统一的 API 调用方式，如 Alert 组件，确保在鸿蒙平台上的正确显示

员工管理与选择

应用实现了员工的选择功能，用户可以选择特定员工提交请假申请：

const handleSelectEmployee = (employeeId: string) => {
  setSelectedEmployee(employeeId);
  Alert.alert('选择员工', '您已选择该员工进行请假申请');
};

请假申请提交

应用提供了请假申请的提交功能，员工可以输入请假起止日期和原因：

const handleSubmitLeaveApplication = () => {
  if (newLeaveApplication.startDate && newLeaveApplication.endDate && newLeaveApplication.reason && selectedEmployee) {
    const newApplication: LeaveApplication = {
      id: (leaveApplications.length + 1).toString(),
      employeeId: selectedEmployee,
      startDate: newLeaveApplication.startDate,
      endDate: newLeaveApplication.endDate,
      reason: newLeaveApplication.reason,
      status: 'pending'
    };
    setLeaveApplications([...leaveApplications, newApplication]);
    setNewLeaveApplication({ startDate: '', endDate: '', reason: '' });
    Alert.alert('提交成功', '新的请假申请已提交');
  } else {
    Alert.alert('提示', '请选择员工并填写完整的请假信息');
  }
};

请假审批功能

应用实现了请假申请的审批功能，管理者可以批准或拒绝请假申请：

const handleApproveLeave = (applicationId: string) => {
  const updatedApplications = leaveApplications.map(app =>
    app.id === applicationId ? { ...app, status: 'approved' } : app
  );
  setLeaveApplications(updatedApplications);
  Alert.alert('审批成功', '请假申请已批准');
};

const handleRejectLeave = (applicationId: string) => {
  const updatedApplications = leaveApplications.map(app =>
    app.id === applicationId ? { ...app, status: 'rejected' } : app
  );
  setLeaveApplications(updatedApplications);
  Alert.alert('审批成功', '请假申请已拒绝');
};

申请查看功能

应用提供了请假申请的查看功能，通过模态框展示详细信息：

const handleViewApplication = (applicationId: string) => {
  const application = leaveApplications.find(a => a.id === applicationId);
  if (application) {
    const employee = employees.find(e => e.id === application.employeeId);
    setModalContent(`员工: ${employee?.name}\n部门: ${employee?.department}\n职位: ${employee?.position}\n开始日期: ${application.startDate}\n结束日期: ${application.endDate}\n原因: ${application.reason}\n状态: ${application.status}`);
    setIsModalVisible(true);
  }
};

自动审批机制

应用通过定时任务自动审批请假申请，模拟了真实的管理审批流程。

应用的 UI 设计遵循了现代移动应用的设计原则，使用了以下组件和交互模式：

安全区域：通过 SafeAreaView 确保内容显示在安全区域内，适应不同设备的屏幕刘海和底部指示条
滚动视图：通过 ScrollView 实现内容的垂直滚动，适应不同长度的员工列表和请假申请
卡片布局：使用 TouchableOpacity 和 View 组合实现卡片式列表项，提供清晰的视觉层次和交互反馈
表单输入：通过 TextInput 组件实现请假信息的输入
模态框：通过 Modal 组件展示详细信息，如请假申请详情
交互反馈：使用 Alert 组件提供操作反馈和审批通知
响应式设计：根据屏幕尺寸动态调整布局，确保在不同设备上的良好显示效果

跨端架构：基于 React Native 构建，实现了一次编码多平台运行的目标，特别关注了鸿蒙平台的适配
类型安全：全面使用 TypeScript 类型定义，提高代码质量和可维护性，确保请假数据的准确性
自动化审批：通过定时任务自动审批请假申请，提高了考勤管理的效率
智能状态管理：通过 React Hooks 实现了简洁的状态管理，提高了代码的可读性和可维护性
模块化设计：通过清晰的类型定义和函数划分，实现了代码的模块化，提高了可维护性
实时数据反馈：通过即时的 Alert 反馈，增强用户操作体验
数据结构设计：通过关联的数据结构，如请假申请关联员工，实现了复杂人事数据的有效组织
层级管理：通过 supervisorId 字段实现了员工的层级管理，为后续的审批流程奠定了基础
状态流转：通过明确的状态定义（pending、approved、rejected），实现了请假申请的完整生命周期管理

在实际应用中，还可以考虑以下性能优化策略：

状态管理优化：对于大型应用，可以考虑使用 Redux 或 Context API 进行全局状态管理，提高状态更新的效率
组件拆分：将大型组件拆分为更小的可复用组件，提高渲染性能和代码可维护性
数据缓存：对员工数据和请假申请进行本地缓存，减少重复计算和网络请求
动画性能：使用 React Native 的 Animated API 实现流畅的过渡动画，提升用户体验
内存管理：确保及时清理不再使用的状态和事件监听器，避免内存泄漏
网络优化：对于实际应用中的远程数据同步，实现合理的网络请求策略，如批量上传、增量同步等
计算优化：对于请假天数计算等操作，可以考虑使用 memoization 技术缓存计算结果
列表优化：对于长列表，使用 FlatList 组件替代 ScrollView，提高渲染性能

在开发过程中，可能面临的技术挑战及解决方案：

鸿蒙平台适配：通过使用 React Native 核心组件和统一的 API 调用方式，确保应用在鸿蒙平台上的兼容性
实时数据同步：在实际应用中，可以实现与后端服务器的实时数据同步，确保请假申请数据的一致性
审批流程复杂化：可以实现更复杂的审批流程，如多级审批、审批意见记录等
数据安全：实现人事数据的加密存储和传输，保护企业数据安全
离线功能：实现基本的离线操作能力，确保在网络不稳定情况下的正常使用
性能优化：针对不同设备性能差异，实现自适应的性能优化策略，确保在中低端设备上的流畅运行
用户体验一致性：确保在不同平台上的用户体验一致，特别是交互方式和视觉效果
多语言支持：实现多语言支持，满足不同地区企业的需求

通过对这个请假审批应用的技术解读，我们可以看到 React Native 在跨端开发中的强大能力。该应用不仅实现了完整的请假审批管理功能，还展示了如何通过 TypeScript、React Hooks 等现代前端技术构建高质量的跨端应用。

真实演示案例代码：











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

// Base64 图标库
const ICONS_BASE64 = {
  leave: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  approve: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  reject: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
  calendar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
};

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

// 员工类型
type Employee = {
  id: string;
  name: string;
  department: string;
  position: string;
  supervisorId: string;
};

// 请假申请类型
type LeaveApplication = {
  id: string;
  employeeId: string;
  startDate: string;
  endDate: string;
  reason: string;
  status: 'pending' | 'approved' | 'rejected';
};

// 请假审批应用组件
const LeaveApprovalApp: React.FC = () => {
  const [employees] = useState<Employee[]>([
    {
      id: '1',
      name: '李先生',
      department: '技术部',
      position: '前端工程师',
      supervisorId: '2'
    },
    {
      id: '2',
      name: '王女士',
      department: '市场部',
      position: '市场专员',
      supervisorId: '3'
    },
    {
      id: '3',
      name: '张经理',
      department: '管理部',
      position: '部门经理',
      supervisorId: ''
    }
  ]);

  const [leaveApplications, setLeaveApplications] = useState<LeaveApplication[]>([
    {
      id: '1',
      employeeId: '1',
      startDate: '2023-12-10',
      endDate: '2023-12-12',
      reason: '家中有事',
      status: 'pending'
    }
  ]);

  const [selectedEmployee, setSelectedEmployee] = useState<string | null>(null);
  const [newLeaveApplication, setNewLeaveApplication] = useState({
    startDate: '',
    endDate: '',
    reason: ''
  });
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [modalContent, setModalContent] = useState('');

  // 自动审批请假申请
  useEffect(() => {
    const interval = setInterval(() => {
      const randomApplication = leaveApplications[Math.floor(Math.random() * leaveApplications.length)];
      if (randomApplication.status === 'pending') {
        const updatedApplications = leaveApplications.map(app => 
          app.id === randomApplication.id ? { ...app, status: Math.random() > 0.5 ? 'approved' : 'rejected' } : app
        );
        setLeaveApplications(updatedApplications);
        Alert.alert('审批通知', `请假申请已${Math.random() > 0.5 ? '批准' : '拒绝'}`);
      }
    }, 60000);

    return () => clearInterval(interval);
  }, [leaveApplications]);

  const handleSelectEmployee = (employeeId: string) => {
    setSelectedEmployee(employeeId);
    Alert.alert('选择员工', '您已选择该员工进行请假申请');
  };

  const handleSubmitLeaveApplication = () => {
    if (newLeaveApplication.startDate && newLeaveApplication.endDate && newLeaveApplication.reason && selectedEmployee) {
      const newApplication: LeaveApplication = {
        id: (leaveApplications.length + 1).toString(),
        employeeId: selectedEmployee,
        startDate: newLeaveApplication.startDate,
        endDate: newLeaveApplication.endDate,
        reason: newLeaveApplication.reason,
        status: 'pending'
      };
      setLeaveApplications([...leaveApplications, newApplication]);
      setNewLeaveApplication({ startDate: '', endDate: '', reason: '' });
      Alert.alert('提交成功', '新的请假申请已提交');
    } else {
      Alert.alert('提示', '请选择员工并填写完整的请假信息');
    }
  };

  const handleApproveLeave = (applicationId: string) => {
    const updatedApplications = leaveApplications.map(app => 
      app.id === applicationId ? { ...app, status: 'approved' } : app
    );
    setLeaveApplications(updatedApplications);
    Alert.alert('审批成功', '请假申请已批准');
  };

  const handleRejectLeave = (applicationId: string) => {
    const updatedApplications = leaveApplications.map(app => 
      app.id === applicationId ? { ...app, status: 'rejected' } : app
    );
    setLeaveApplications(updatedApplications);
    Alert.alert('审批成功', '请假申请已拒绝');
  };

  const handleViewApplication = (applicationId: string) => {
    const application = leaveApplications.find(a => a.id === applicationId);
    if (application) {
      const employee = employees.find(e => e.id === application.employeeId);
      setModalContent(`员工: ${employee?.name}\n部门: ${employee?.department}\n职位: ${employee?.position}\n开始日期: ${application.startDate}\n结束日期: ${application.endDate}\n原因: ${application.reason}\n状态: ${application.status}`);
      setIsModalVisible(true);
    }
  };

  const openModal = (content: string) => {
    setModalContent(content);
    setIsModalVisible(true);
  };

  const closeModal = () => {
    setIsModalVisible(false);
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <Text style={styles.title}>请假审批</Text>
        <Text style={styles.subtitle}>员工在App中提交请假申请，由上级审批后自动更新考勤状态</Text>
      </View>

      <ScrollView style={styles.content}>
        {/* 员工列表 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>员工列表</Text>
          {employees.map(employee => (
            <TouchableOpacity 
              key={employee.id}
              style={[
                styles.card,
                selectedEmployee === employee.id && styles.selectedCard
              ]}
              onPress={() => handleSelectEmployee(employee.id)}
            >
              <Text style={styles.icon}>👤</Text>
              <View style={styles.cardInfo}>
                <Text style={styles.cardTitle}>{employee.name}</Text>
                <Text style={styles.cardDescription}>部门: {employee.department}</Text>
                <Text style={styles.cardDescription}>职位: {employee.position}</Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>

        {/* 提交请假申请 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>提交请假申请</Text>
          <View style={styles.inputRow}>
            <TextInput
              style={styles.input}
              placeholder="开始日期 (YYYY-MM-DD)"
              value={newLeaveApplication.startDate}
              onChangeText={(text) => setNewLeaveApplication({ ...newLeaveApplication, startDate: text })}
            />
            <TextInput
              style={styles.input}
              placeholder="结束日期 (YYYY-MM-DD)"
              value={newLeaveApplication.endDate}
              onChangeText={(text) => setNewLeaveApplication({ ...newLeaveApplication, endDate: text })}
            />
          </View>
          <View style={styles.inputRow}>
            <TextInput
              style={styles.input}
              placeholder="请假原因"
              value={newLeaveApplication.reason}
              onChangeText={(text) => setNewLeaveApplication({ ...newLeaveApplication, reason: text })}
            />
          </View>
          <TouchableOpacity 
            style={styles.addButton}
            onPress={handleSubmitLeaveApplication}
          >
            <Text style={styles.addText}>提交请假申请</Text>
          </TouchableOpacity>
        </View>

        {/* 请假申请列表 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>请假申请列表</Text>
          {leaveApplications.map(application => (
            <TouchableOpacity 
              key={application.id}
              style={styles.applicationCard}
              onPress={() => handleViewApplication(application.id)}
            >
              <Text style={styles.icon}>📅</Text>
              <View style={styles.cardInfo}>
                <Text style={styles.cardTitle}>申请ID: {application.id}</Text>
                <Text style={styles.cardDescription}>开始日期: {application.startDate}</Text>
                <Text style={styles.cardDescription}>结束日期: {application.endDate}</Text>
                <Text style={styles.cardDescription}>状态: {application.status}</Text>
              </View>
              {application.status === 'pending' && (
                <>
                  <TouchableOpacity 
                    style={styles.approveButton}
                    onPress={() => handleApproveLeave(application.id)}
                  >
                    <Text style={styles.approveText}>批准</Text>
                  </TouchableOpacity>
                  <TouchableOpacity 
                    style={styles.rejectButton}
                    onPress={() => handleRejectLeave(application.id)}
                  >
                    <Text style={styles.rejectText}>拒绝</Text>
                  </TouchableOpacity>
                </>
              )}
            </TouchableOpacity>
          ))}
        </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>

        {/* 弹框内容 */}
        <Modal
          animationType="slide"
          transparent={true}
          visible={isModalVisible}
          onRequestClose={closeModal}
        >
          <View style={styles.modalContainer}>
            <View style={styles.modalContent}>
              <Text style={styles.modalTitle}>详细信息</Text>
              <Text style={styles.modalText}>{modalContent}</Text>
              <TouchableOpacity
                style={styles.closeButton}
                onPress={closeModal}
              >
                <Text style={styles.closeButtonText}>关闭</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f9ff',
  },
  header: {
    flexDirection: 'column',
    padding: 16,
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#bae6fd',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#0c4a6e',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: '#0284c7',
  },
  content: {
    flex: 1,
    marginTop: 12,
  },
  section: {
    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: '#0c4a6e',
    marginBottom: 12,
  },
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f9ff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  selectedCard: {
    borderWidth: 2,
    borderColor: '#0284c7',
  },
  applicationCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f9ff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  icon: {
    fontSize: 28,
    marginRight: 12,
  },
  cardInfo: {
    flex: 1,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#0c4a6e',
    marginBottom: 4,
  },
  cardDescription: {
    fontSize: 14,
    color: '#0284c7',
    marginBottom: 2,
  },
  inputRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  input: {
    flex: 1,
    backgroundColor: '#f0f9ff',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 8,
    fontSize: 14,
    color: '#0c4a6e',
    marginRight: 8,
  },
  addButton: {
    backgroundColor: '#0284c7',
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  addText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
  },
  approveButton: {
    backgroundColor: '#10b981',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
    marginRight: 8,
  },
  approveText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: '500',
  },
  rejectButton: {
    backgroundColor: '#ef4444',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
  },
  rejectText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: '500',
  },
  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,
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    width: '80%',
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 20,
    elevation: 5,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#0c4a6e',
    marginBottom: 12,
    textAlign: 'center',
  },
  modalText: {
    fontSize: 14,
    color: '#0c4a6e',
    lineHeight: 20,
    marginBottom: 20,
  },
  closeButton: {
    backgroundColor: '#0284c7',
    padding: 10,
    borderRadius: 8,
    alignItems: 'center',
  },
  closeButtonText: {
    color: '#ffffff',
    fontSize: 14,
    fontWeight: '500',
  },
});

export default LeaveApprovalApp;

请添加图片描述

打包

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

在这里插入图片描述

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

在这里插入图片描述

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

请添加图片描述
本文介绍了基于React Native和鸿蒙系统开发的跨平台请假审批应用。该应用利用React Native的通用API和Hooks体系构建核心功能，实现与鸿蒙ArkUI组件的无缝映射。通过TypeScript构建强类型数据模型，保障审批流程的精准匹配和跨端兼容性。采用React Hooks管理状态，实现自动审批机制和手动操作逻辑，确保多设备间的数据同步。UI层通过StyleSheet统一管理样式，适配鸿蒙原生渲染效果。整体架构充分融合React Native的跨平台特性与鸿蒙的分布式能力，满足企业级请假审批流程对多终端协作、状态同步和操作一致性的严苛要求。

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

人工智能6S服务平台

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

更多推荐

Flutter三方库适配OpenHarmony【secure_application】— 敏感数据清除与安全增强

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net模糊遮罩只是"视觉保护"——用户看不到内容，但数据还在内存里。如果攻击者能绕过遮罩（比如通过辅助功能或内存转储），数据仍然可能泄露。真正的安全需要在认证失败时主动清除敏感数据。这篇讲如何利用 secure_application 的事件流来实现数据清除策略。事件流监听：全局回调 + 页面级

人工智能6S服务平台

Flutter三方库适配OpenHarmony【flutter_speech】— 持续语音识别与长录音

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.netflutter_speech默认配置的最大录音时长是60秒，识别模式是短语音（recognitionMode=0）。对于语音搜索、语音指令这类场景完全够用。但如果你要做语音笔记、会议记录、实时字幕这类需要长时间识别的功能，就需要突破这个限制。今天我们来探讨如何基于flutter_speec

人工智能6S服务平台

Flutter三方库适配OpenHarmony【secure_application】— 自定义锁屏界面与品牌化设计

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net默认的模糊遮罩虽然能保护内容，但看起来很"素"。对于正式的商业应用，锁屏界面应该体现品牌调性——Logo、品牌色、专业的解锁交互。secure_application 的回调给了我们完全的自由度，可以在模糊遮罩上方放置任何 Widget。这篇分享几种实用的锁屏界面设计方案。