尧图网页设计 
ReactNative 鸿蒙跨端行业统称RNOHReact Native for OpenHarmony是社区主导、华为协同共建的适配兼容层核心是给原生 React Native 框架补上鸿蒙平台的底层实现让一套 React/TypeScript 业务代码无需大规模改写、不用学习 ArkTS 原生语法就能同时编译运行在安卓、iOS、鸿蒙手机、平板、智慧屏、PC 全场景设备最终打包为鸿蒙标准 HAP 安装包直接上架华为应用市场它属于原生控件渲染型跨端和 Uniapp、Cordova 这类 WebView 网页套壳跨端有着本质区别页面渲染、手势交互、硬件调用全部依托鸿蒙 ArkUI 原生图形引擎完成不存在浏览器内核带来的性能损耗。底层运行架构原理整套架构基于 React Native新架构Fabric 渲染器 JSI 直通通信 TurboModule 按需模块搭建摒弃旧版 RN 异步 JSON 桥接的低效模式分为三层执行链路。最上层是开发者编写的 React 业务代码通过 Metro 打包后依托 Hermes JS 引擎执行逻辑、生成虚拟 DOM 节点中间层是 RNOH 核心适配层依靠 JSI 共享内存直接打通 JS 层与 C 原生层用 Yoga 引擎统一完成 Flex 布局计算Fabric 调度渲染任务TurboModule 实现系统能力懒加载避免 App 启动全量初始化拖慢开机速度最底层直接通过鸿蒙 ArkUI C-API 对接系统原生组件RN 里的 View、Text、ScrollView、Image、点击组件会一一映射为鸿蒙 Div、Text、Scroll、Image、Button 原生控件弹窗、状态栏、权限、传感器、文件存储等系统调用同样由适配层转发给鸿蒙系统 NAPI 接口实现调用同时额外封装了鸿蒙分布式软总线、原子化服务、折叠屏自适应、多设备流转等独有系统接口供 RN 业务直接调用。开发与工程使用形态前端开发者维持原有 RN 开发习惯使用 React Hooks、React Navigation 路由、Redux/Zustand 状态管理、Axios 网络请求等成熟前端工具链业务代码里仅需少量平台判断处理差异化逻辑绝大部分业务代码和安卓 iOS 两端完全复用。工程构建上在原有 RN 项目中接入 RNOH 鸿蒙工程模板通过鸿蒙 DevEco 工具链编译直接产出 HAP/HSP 鸿蒙安装包支持混合原生开发遇到 RN 生态缺失的硬件、底层系统能力时可以直接用 ArkTS/C 编写鸿蒙原生 TurboModule 模块导出 JS 接口给 React 业务调用补齐能力短板。页面骨架与数据流页面以“统计概览 → 分类标签 → 排序选项 → FlatList 列表 → 底部导航”构成。数据源 works 存放完整作品信息activeCategory 控制过滤sortBy 控制排序。派生链条为 filteredWorks → sortedWorks保持“数据即视图”的单向流。事件语义清晰handleLike 与 handleBookmark 执行不可变更新切换状态与计数handleComment/handleShare 用 Alert 占位路由或分享行为。生产场景需将评论与分享桥接系统能力或应用路由避免弹窗行为差异。WorkCard卡片化展示与多态操作卡片包含精选标识、作者与分类、标题与摘要、统计与操作四层结构。精选标识 isFeatured 直接驱动徽章显示视觉语义独立于其他统计项。操作按钮通过 isLiked/isBookmarked 切换图标与文案颜色避免用户在列表密集场景下认知偏差。为提高手感一致性建议用 Pressable 并在三端注入触觉与涟漪反馈鸿蒙端通过 ArkUI 的交互能力实现“原生感”。过滤与排序派生视图的稳定性filteredWorks 以 activeCategory 完成按类别过滤sortedWorks 基于 sortBy 执行排序popular 按 likesrecent 假设 id 越大越新featured 优先精选。生产建议将排序逻辑抽象为稳定的比较器表避免分支表达式的维护成本recent 的“id 越大越新”是假设真实场景应使用时间戳字段排序用 useMemo([works, activeCategory, sortBy]) 缓存 filteredWorks/sortedWorks降低重渲染成本。统计概览局部聚合的派生治理统计概览分别计算作品总数、总点赞数与精选作品数。随着列表规模增长reduce 次数增多。建议将统计聚合抽象为一次 reduce 输出多个指标或使用 selector 层统一派生减少重复计算。FlatList虚拟化与滚动一致性列表使用 FlatListkeyExtractor 以稳定 id 保证 diff 正确ListHeaderComponent 用于列表标题与计数风格统一。性能建议renderItem 用 useCallback 缓存WorkCard 使用 React.memo避免频繁的点赞/收藏触发整行重渲染数据规模巨大时可引入 getItemLayout已知高度时提高滚动与定位稳定性。鸿蒙跨端注意FlatList 的滚动物理回弹、阻尼、惯性与事件窗口在各端存在差异需在适配层映射到 ArkUI 的滚动容器保证手感一致scrollToIndex、onEndReached 等语义需验证映射稳定。图标与本地化emoji 的替代方案图标采用 emoji❤️、⭐、 等快速原型化但在不同系统字体下存在基线对齐与色彩差异生产建议迁移到统一的矢量/字体图标集并在鸿蒙端通过 ArkUI 的图形能力渲染保证像素与对齐一致。文案与单位建议抽取为资源并接入 i18n确保不同语言环境下呈现一致日期、类别、统计标签。窗口与布局维度适配的稳态方案页内诸多卡片与栅格宽度依赖 Dimensions.get(‘window’) 的初始值。横竖屏或分屏下会失效建议使用 useWindowDimensions() 并监听窗口变化触发重渲染适配新布局。鸿蒙端需确保窗口事件正确传递到 RN 层。Alert 与路由/分享系统能力桥接评论与分享通过 Alert 占位。生产需用路由接入跨端导航框架如 React Navigation 的鸿蒙适配统一转场动画与返回手势分享桥接系统分享面板iOS Activity、Android Intent、鸿蒙 ArkUI/Ability 能力统一错误码与回调。页面仅负责反馈与提示在服务层处理权限与失败回滚。事件更新与一致性点赞与收藏采用不可变更新 map 替换目标项高并发点击下建议改为函数式更新 setWorks(prev …) 保证状态源一致减少竞态。业务一致性建议对点赞/收藏引入乐观更新 回滚策略网络失败时恢复旧值并提示对评论/分享实施埋点支持后续数据分析。鸿蒙跨端适配关键点滚动与虚拟化FlatList 在适配层映射至 ArkUI 滚动控件确保滚动物理与事件行为一致触觉与涟漪Pressable 注入统一反馈鸿蒙端通过 ArkUI 实现弹窗与返回用 Modal/Portal 替换 Alert 以统一弹窗视觉与返回手势鸿蒙端桥接 ArkUI 弹窗层级与焦点管理图标渲染避免 emoji 差异统一图标栈并在鸿蒙端稳定渲染窗口事件useWindowDimensions 配合适配层窗口事件转发保持栅格宽度在旋转/分屏下正确。概述本文分析的是一个基于React Native构建的精选作品展示应用集成了作品展示、分类筛选、多维度排序等核心功能。该应用采用了复杂的数据过滤机制、多维度统计展示和丰富的交互设计展现了内容展示类应用的典型技术架构。在鸿蒙OS的跨端适配场景中这种涉及复杂数据操作和个性化展示的应用具有重要的技术参考价值。核心架构设计深度解析多维度作品数据结构应用定义了完整的作品数据模型涵盖展示、互动和分类多个维度typeWork{id:string;title:string;author:string;content:string;likes:number;comments:number;bookmarks:number;stars:number;category:string;date:string;isFeatured:boolean;isBookmarked:boolean;isLiked:boolean;};这种数据结构设计体现了内容平台的核心要素基础信息标题、作者、内容、互动数据点赞、评论、收藏、评分、分类信息类别、时间和状态标记精选、收藏、点赞状态。每个字段都有明确的业务含义为后续的筛选、排序和展示提供了完整的数据基础。在鸿蒙ArkUI体系中接口定义保持了相同的结构interfaceWork{id:string;title:string;author:string;content:string;likes:number;comments:number;bookmarks:number;stars:number;category:string;date:string;isFeatured:boolean;isBookmarked:boolean;isLiked:boolean;}复杂数据过滤与排序系统应用实现了多层级的数据处理流水线// 按类别过滤作品constfilteredWorksactiveCategory全部?works:works.filter(workwork.categoryactiveCategory);// 按排序方式排序constsortedWorks[...filteredWorks].sort((a,b){if(sortBypopular){returnb.likes-a.likes;// 按点赞数降序}elseif(sortByrecent){returna.id.localeCompare(b.id);// 按ID排序假设ID越大越新}else{returnb.isFeatured?-1:1;// 精选优先}});这种处理模式采用了函数式编程思想通过filter和sort方法的链式操作实现数据的多级处理。展开运算符[…filteredWorks]确保了排序操作不会影响原始数据符合不可变数据原则。鸿蒙的实现采用计算属性和数组方法StateactiveCategory:string全部;StatesortBy:stringfeatured;Stateworks:Work[][];// 过滤后的作品getfilteredWorks():Work[]{returnthis.activeCategory全部?this.works:this.works.filter(workwork.categorythis.activeCategory);}// 排序后的作品getsortedWorks():Work[]{return[...this.filteredWorks].sort((a,b){if(this.sortBypopular){returnb.likes-a.likes;}elseif(this.sortByrecent){returna.id.localeCompare(b.id);}else{returnb.isFeatured?-1:1;}});}组件化作品卡片设计WorkCard组件展示了复杂的信息展示和交互设计constWorkCard({work,onLike,onBookmark,onComment}){return(View style{styles.workCard}{work.isFeatured(View style{styles.featuredBadge}Text style{styles.featuredText}{ICONS.crown}精选/Text/View)}View style{styles.workHeader}View style{styles.authorInfo}Text style{styles.authorAvatar}{work.author.charAt(0)}/TextViewText style{styles.authorName}{work.author}/TextText style{styles.workDate}{work.date}/Text/View/ViewText style{styles.workCategory}{work.category}/Text/View{/* 更多内容 */}/View);};这种组件设计采用了条件渲染、嵌套布局和样式组合等多种技术。精选徽章通过条件渲染动态显示作者信息采用嵌套布局分类标签使用样式组合实现视觉区分。鸿蒙的实现需要将样式逻辑转换为声明式结构Componentstruct WorkCard{Propwork:Work;EventonLike:(id:string)void;EventonBookmark:(id:string)void;build(){Column(){// 精选徽章if(this.work.isFeatured){Row(){Text( 精选)}.backgroundColor(#f59e0b).borderRadius(12).padding(8)}// 作者信息Row(){Column(){Text(this.work.author.charAt(0))}.width(36).height(36).backgroundColor(#dbeafe).borderRadius(18)Column(){Text(this.work.author)Text(this.work.date)}}}}}跨端适配技术方案组件映射策略React Native组件鸿蒙ArkUI组件关键适配点ViewColumn/Row/Stack布局系统转换TextText文本属性基本一致TouchableOpacityButton交互反馈机制不同FlatListList列表实现差异ScrollViewScroll滚动行为一致样式系统转换// React NativeworkCard:{backgroundColor:#ffffff,borderRadius:12,padding:16,elevation:1,shadowColor:#000,}// 鸿蒙Column().backgroundColor(Color.White).borderRadius(12).padding(16).shadow({radius:2,color:#000000})状态管理迁移// React Nativeconst[works,setWorks]useStateWork[]([]);const[activeCategory,setActiveCategory]useState(全部);// 鸿蒙Stateworks:Work[][];StateactiveCategory:string全部;性能优化与最佳实践列表性能优化配置keyExtractor提升列表性能FlatList data{sortedWorks}keyExtractor{itemitem.id}renderItem{({item})WorkCard work{item}/}/计算缓存优化使用useMemo避免重复计算constsortedWorksuseMemo((){return[...filteredWorks].sort((a,b){// 排序逻辑});},[filteredWorks,sortBy]);安装DevEco Studio程序选择目标安装目录设置环境变量但是需要重启一下新建一个空白模板设置API为24的模板项目初始化项目自动下载相关依赖打包接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle这样可以进行在开源鸿蒙OpenHarmony中进行使用。打包之后再将打包后的鸿蒙OpenHarmony文件拷贝到鸿蒙的DevEco-Studio工程目录去最后运行效果图如下显示 React Native鸿蒙跨平台如何让数据源 works 存放完整作品信息，基于HarmonyOS API 24 activeCategory 控制过滤，sortBy 控制排序
ReactNative 鸿蒙跨端行业统称RNOHReact Native for OpenHarmony是社区主导、华为协同共建的适配兼容层核心是给原生 React Native 框架补上鸿蒙平台的底层实现让一套 React/TypeScript 业务代码无需大规模改写、不用学习 ArkTS 原生语法就能同时编译运行在安卓、iOS、鸿蒙手机、平板、智慧屏、PC 全场景设备最终打包为鸿蒙标准 HAP 安装包直接上架华为应用市场它属于原生控件渲染型跨端和 Uniapp、Cordova 这类 WebView 网页套壳跨端有着本质区别页面渲染、手势交互、硬件调用全部依托鸿蒙 ArkUI 原生图形引擎完成不存在浏览器内核带来的性能损耗。底层运行架构原理整套架构基于 React Native新架构Fabric 渲染器 JSI 直通通信 TurboModule 按需模块搭建摒弃旧版 RN 异步 JSON 桥接的低效模式分为三层执行链路。最上层是开发者编写的 React 业务代码通过 Metro 打包后依托 Hermes JS 引擎执行逻辑、生成虚拟 DOM 节点中间层是 RNOH 核心适配层依靠 JSI 共享内存直接打通 JS 层与 C 原生层用 Yoga 引擎统一完成 Flex 布局计算Fabric 调度渲染任务TurboModule 实现系统能力懒加载避免 App 启动全量初始化拖慢开机速度最底层直接通过鸿蒙 ArkUI C-API 对接系统原生组件RN 里的 View、Text、ScrollView、Image、点击组件会一一映射为鸿蒙 Div、Text、Scroll、Image、Button 原生控件弹窗、状态栏、权限、传感器、文件存储等系统调用同样由适配层转发给鸿蒙系统 NAPI 接口实现调用同时额外封装了鸿蒙分布式软总线、原子化服务、折叠屏自适应、多设备流转等独有系统接口供 RN 业务直接调用。开发与工程使用形态前端开发者维持原有 RN 开发习惯使用 React Hooks、React Navigation 路由、Redux/Zustand 状态管理、Axios 网络请求等成熟前端工具链业务代码里仅需少量平台判断处理差异化逻辑绝大部分业务代码和安卓 iOS 两端完全复用。工程构建上在原有 RN 项目中接入 RNOH 鸿蒙工程模板通过鸿蒙 DevEco 工具链编译直接产出 HAP/HSP 鸿蒙安装包支持混合原生开发遇到 RN 生态缺失的硬件、底层系统能力时可以直接用 ArkTS/C 编写鸿蒙原生 TurboModule 模块导出 JS 接口给 React 业务调用补齐能力短板。页面骨架与数据流页面以“统计概览 → 分类标签 → 排序选项 → FlatList 列表 → 底部导航”构成。数据源 works 存放完整作品信息activeCategory 控制过滤sortBy 控制排序。派生链条为 filteredWorks → sortedWorks保持“数据即视图”的单向流。事件语义清晰handleLike 与 handleBookmark 执行不可变更新切换状态与计数handleComment/handleShare 用 Alert 占位路由或分享行为。生产场景需将评论与分享桥接系统能力或应用路由避免弹窗行为差异。WorkCard卡片化展示与多态操作卡片包含精选标识、作者与分类、标题与摘要、统计与操作四层结构。精选标识 isFeatured 直接驱动徽章显示视觉语义独立于其他统计项。操作按钮通过 isLiked/isBookmarked 切换图标与文案颜色避免用户在列表密集场景下认知偏差。为提高手感一致性建议用 Pressable 并在三端注入触觉与涟漪反馈鸿蒙端通过 ArkUI 的交互能力实现“原生感”。过滤与排序派生视图的稳定性filteredWorks 以 activeCategory 完成按类别过滤sortedWorks 基于 sortBy 执行排序popular 按 likesrecent 假设 id 越大越新featured 优先精选。生产建议将排序逻辑抽象为稳定的比较器表避免分支表达式的维护成本recent 的“id 越大越新”是假设真实场景应使用时间戳字段排序用 useMemo([works, activeCategory, sortBy]) 缓存 filteredWorks/sortedWorks降低重渲染成本。统计概览局部聚合的派生治理统计概览分别计算作品总数、总点赞数与精选作品数。随着列表规模增长reduce 次数增多。建议将统计聚合抽象为一次 reduce 输出多个指标或使用 selector 层统一派生减少重复计算。FlatList虚拟化与滚动一致性列表使用 FlatListkeyExtractor 以稳定 id 保证 diff 正确ListHeaderComponent 用于列表标题与计数风格统一。性能建议renderItem 用 useCallback 缓存WorkCard 使用 React.memo避免频繁的点赞/收藏触发整行重渲染数据规模巨大时可引入 getItemLayout已知高度时提高滚动与定位稳定性。鸿蒙跨端注意FlatList 的滚动物理回弹、阻尼、惯性与事件窗口在各端存在差异需在适配层映射到 ArkUI 的滚动容器保证手感一致scrollToIndex、onEndReached 等语义需验证映射稳定。图标与本地化emoji 的替代方案图标采用 emoji❤️、⭐、 等快速原型化但在不同系统字体下存在基线对齐与色彩差异生产建议迁移到统一的矢量/字体图标集并在鸿蒙端通过 ArkUI 的图形能力渲染保证像素与对齐一致。文案与单位建议抽取为资源并接入 i18n确保不同语言环境下呈现一致日期、类别、统计标签。窗口与布局维度适配的稳态方案页内诸多卡片与栅格宽度依赖 Dimensions.get(‘window’) 的初始值。横竖屏或分屏下会失效建议使用 useWindowDimensions() 并监听窗口变化触发重渲染适配新布局。鸿蒙端需确保窗口事件正确传递到 RN 层。Alert 与路由/分享系统能力桥接评论与分享通过 Alert 占位。生产需用路由接入跨端导航框架如 React Navigation 的鸿蒙适配统一转场动画与返回手势分享桥接系统分享面板iOS Activity、Android Intent、鸿蒙 ArkUI/Ability 能力统一错误码与回调。页面仅负责反馈与提示在服务层处理权限与失败回滚。事件更新与一致性点赞与收藏采用不可变更新 map 替换目标项高并发点击下建议改为函数式更新 setWorks(prev …) 保证状态源一致减少竞态。业务一致性建议对点赞/收藏引入乐观更新 回滚策略网络失败时恢复旧值并提示对评论/分享实施埋点支持后续数据分析。鸿蒙跨端适配关键点滚动与虚拟化FlatList 在适配层映射至 ArkUI 滚动控件确保滚动物理与事件行为一致触觉与涟漪Pressable 注入统一反馈鸿蒙端通过 ArkUI 实现弹窗与返回用 Modal/Portal 替换 Alert 以统一弹窗视觉与返回手势鸿蒙端桥接 ArkUI 弹窗层级与焦点管理图标渲染避免 emoji 差异统一图标栈并在鸿蒙端稳定渲染窗口事件useWindowDimensions 配合适配层窗口事件转发保持栅格宽度在旋转/分屏下正确。概述本文分析的是一个基于React Native构建的精选作品展示应用集成了作品展示、分类筛选、多维度排序等核心功能。该应用采用了复杂的数据过滤机制、多维度统计展示和丰富的交互设计展现了内容展示类应用的典型技术架构。在鸿蒙OS的跨端适配场景中这种涉及复杂数据操作和个性化展示的应用具有重要的技术参考价值。核心架构设计深度解析多维度作品数据结构应用定义了完整的作品数据模型涵盖展示、互动和分类多个维度typeWork{id:string;title:string;author:string;content:string;likes:number;comments:number;bookmarks:number;stars:number;category:string;date:string;isFeatured:boolean;isBookmarked:boolean;isLiked:boolean;};这种数据结构设计体现了内容平台的核心要素基础信息标题、作者、内容、互动数据点赞、评论、收藏、评分、分类信息类别、时间和状态标记精选、收藏、点赞状态。每个字段都有明确的业务含义为后续的筛选、排序和展示提供了完整的数据基础。在鸿蒙ArkUI体系中接口定义保持了相同的结构interfaceWork{id:string;title:string;author:string;content:string;likes:number;comments:number;bookmarks:number;stars:number;category:string;date:string;isFeatured:boolean;isBookmarked:boolean;isLiked:boolean;}复杂数据过滤与排序系统应用实现了多层级的数据处理流水线// 按类别过滤作品constfilteredWorksactiveCategory全部?works:works.filter(workwork.categoryactiveCategory);// 按排序方式排序constsortedWorks[...filteredWorks].sort((a,b){if(sortBypopular){returnb.likes-a.likes;// 按点赞数降序}elseif(sortByrecent){returna.id.localeCompare(b.id);// 按ID排序假设ID越大越新}else{returnb.isFeatured?-1:1;// 精选优先}});这种处理模式采用了函数式编程思想通过filter和sort方法的链式操作实现数据的多级处理。展开运算符[…filteredWorks]确保了排序操作不会影响原始数据符合不可变数据原则。鸿蒙的实现采用计算属性和数组方法StateactiveCategory:string全部;StatesortBy:stringfeatured;Stateworks:Work[][];// 过滤后的作品getfilteredWorks():Work[]{returnthis.activeCategory全部?this.works:this.works.filter(workwork.categorythis.activeCategory);}// 排序后的作品getsortedWorks():Work[]{return[...this.filteredWorks].sort((a,b){if(this.sortBypopular){returnb.likes-a.likes;}elseif(this.sortByrecent){returna.id.localeCompare(b.id);}else{returnb.isFeatured?-1:1;}});}组件化作品卡片设计WorkCard组件展示了复杂的信息展示和交互设计constWorkCard({work,onLike,onBookmark,onComment}){return(View style{styles.workCard}{work.isFeatured(View style{styles.featuredBadge}Text style{styles.featuredText}{ICONS.crown}精选/Text/View)}View style{styles.workHeader}View style{styles.authorInfo}Text style{styles.authorAvatar}{work.author.charAt(0)}/TextViewText style{styles.authorName}{work.author}/TextText style{styles.workDate}{work.date}/Text/View/ViewText style{styles.workCategory}{work.category}/Text/View{/* 更多内容 */}/View);};这种组件设计采用了条件渲染、嵌套布局和样式组合等多种技术。精选徽章通过条件渲染动态显示作者信息采用嵌套布局分类标签使用样式组合实现视觉区分。鸿蒙的实现需要将样式逻辑转换为声明式结构Componentstruct WorkCard{Propwork:Work;EventonLike:(id:string)void;EventonBookmark:(id:string)void;build(){Column(){// 精选徽章if(this.work.isFeatured){Row(){Text( 精选)}.backgroundColor(#f59e0b).borderRadius(12).padding(8)}// 作者信息Row(){Column(){Text(this.work.author.charAt(0))}.width(36).height(36).backgroundColor(#dbeafe).borderRadius(18)Column(){Text(this.work.author)Text(this.work.date)}}}}}跨端适配技术方案组件映射策略React Native组件鸿蒙ArkUI组件关键适配点ViewColumn/Row/Stack布局系统转换TextText文本属性基本一致TouchableOpacityButton交互反馈机制不同FlatListList列表实现差异ScrollViewScroll滚动行为一致样式系统转换// React NativeworkCard:{backgroundColor:#ffffff,borderRadius:12,padding:16,elevation:1,shadowColor:#000,}// 鸿蒙Column().backgroundColor(Color.White).borderRadius(12).padding(16).shadow({radius:2,color:#000000})状态管理迁移// React Nativeconst[works,setWorks]useStateWork[]([]);const[activeCategory,setActiveCategory]useState(全部);// 鸿蒙Stateworks:Work[][];StateactiveCategory:string全部;性能优化与最佳实践列表性能优化配置keyExtractor提升列表性能FlatList data{sortedWorks}keyExtractor{itemitem.id}renderItem{({item})WorkCard work{item}/}/计算缓存优化使用useMemo避免重复计算constsortedWorksuseMemo((){return[...filteredWorks].sort((a,b){// 排序逻辑});},[filteredWorks,sortBy]);安装DevEco Studio程序选择目标安装目录设置环境变量但是需要重启一下新建一个空白模板设置API为24的模板项目初始化项目自动下载相关依赖打包接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle这样可以进行在开源鸿蒙OpenHarmony中进行使用。打包之后再将打包后的鸿蒙OpenHarmony文件拷贝到鸿蒙的DevEco-Studio工程目录去最后运行效果图如下显示