本文是基于HarmonyOS API 24的进行的React Native跨平台技术实战项目React Native 跨端鸿蒙开发行业简称 RNOHReact Native OpenHarmony是社区 华为共建的适配层方案把 Meta 的 React Native 框架完整移植到鸿蒙HarmonyOS NEXT / OpenHarmony让一套 React/JS/TS 代码同时运行在Android、iOS、鸿蒙手机 / 平板 / PC多端属于原生级跨端方案区别于 WebView 套壳网页方案。简单一句话前端工程师不用学 ArkTS用熟悉的 React 语法写业务底层自动映射成鸿蒙 ArkUI 原生控件打包成鸿蒙标准 hap 应用上架应用市场。它的核心定位可以概括为不改变 React/TypeScript 前端研发习惯复用现有 RN 业务代码资产依托鸿蒙系统底层接口做一层高性能中间适配层将 JSX 组件、JS 业务逻辑映射为鸿蒙原生 ArkUI 控件最终构建可在手机、平板、车机、智慧屏、PC 等全鸿蒙设备运行、支持上架华为应用市场的原生级应用。和 UniApp、WebView 套壳等网页类跨端方案有本质区别RNOH 不依赖浏览器内核渲染页面所有 UI 渲染、手势交互、视图层级全部交给鸿蒙系统原生图形引擎处理不存在网页性能瓶颈、样式兼容偏差等问题。兼容完整 React 生态、Hooks、JSX、RN 标准组件前端工程师无需学习 ArkTS、ArkUI 声明式语法仅需少量平台兼容代码即可完成多端适配底层打通鸿蒙 NAPI、ArkUI C 底层接口兼顾代码复用性与鸿蒙原生能力调用核心面向存量 RN App 快速新增鸿蒙渠道是前端团队切入鸿蒙生态最低成本的技术路线。因为编辑额器会自动识别通常我们只设置其中的一个另一个会按原来图的比例显示该图如果同时设置两个属性的话那图片的比例就会变形显示会片的与原来差别太的从而不美观。Web图片只设置宽度或高度时浏览器会根据图片的原始宽高比自动调整另一维度以保持比例不变。以下是具体原理和实现方式原理比例保持当只设置宽度或高度时浏览器会按原始比例计算另一维度。例如若图片原宽高比为4:3设置宽度为400px则高度自动调整为300px 。 - 避免变形同时设置宽高可能导致拉伸或压缩而单独设置可防止比例失真 。 原理分析这种方式虽然编写起来快速而方便但在浏览器加载显示图片时可能会造成页面里的元素抖动或移位造成很差的用户体验。其原因是浏览器在遇到img标签时会根据img标签的src属性值向服务器请求读取图片在图片读取回来并显示之前浏览器会在图片所在位置放置一个空白的图片占位符。如果img标签指定了宽和高则图片占位符的尺寸等于所指定的宽和高但如果img标签没指定宽和高则图片占位符默认尺寸为32像素×32像素不同的浏览器图片占位符的默认大小不一样这时候如果图片周围有文字或其它内容当图片被浏览器从服务器上读取回来并显示的时候图片占位符就会被替换成图片占位符的尺寸也会重新被图片的实际尺寸所替换。造成的视觉效果是图片突然撑开了周围的文字或其它内容。这就是抖动和移位现象所以不推荐在编写img标签时缺省宽度和高度属性。造成扭曲或拉伸的根源在于图片的宽和高没有同比例缩放。好比孙悟空在变化成小鸟的时候如果头没有相应的变小那么就会有一个小鸟身、大鸟头。如果按等比缩放就不会扭曲或拉伸。所以如果指定图片列表中的图片为统一的尺寸则还需要对列表中的图片进行一定的编辑处理使源图片的实际尺寸与统一指定的尺寸相符或等比相符。比如图片的统一尺寸为400×300那么图片尺寸类似为800×600或1200×900就是等比相符。今天来实践一下图片自适应的功能在以前的开发中我们经常会对一些图片如果想要自适应的话可以定高、或者是定宽的形式来写但是在ReactNative鸿蒙开发中貌似不太行。importReactfromreact;import{View,Text,Dimensions,StyleSheet,Image}fromreact-native;//获取屏幕的宽高constscreenWidthMath.round(Dimensions.get(window).width);constscreenHightMath.round(Dimensions.get(window).height);constAppStylesStyleSheet.create({wrap:{width:100%,height:screenHight,backgroundColor:#85BDFF},title:{width:100%,height:72,fontFamily:OPPOSans, OPPOSans,fontWeight:normal,paddingTop:50,fontSize:36,color:#304057,lineHeight:72,textAlign:center,fontStyle:normal},banner:{paddingTop:50,paddingRight:32,paddingLeft:32,},bannerItem:{paddingTop:10,display:flex,flexDirection:row,alignItems:center,justifyContent:center,width:50%,}})functionApp(){return(View style{AppStyles.wrap}Text style{AppStyles.title}鸿蒙ReactNative系统/TextView style{AppStyles.banner}View style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}实时业绩便捷查询/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}订单状态轻松把控/Text/View/ViewView style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}宣传数据全程管理/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}海量素材一站转发/Text/View/View/ViewImage style{{width:289}}source{require(./images/login-bg.png)}/Image/View);}exportdefaultApp;可以看到这里的图片并没有显示说明并不能这种写法解决方案那么现在只能来写固定值的宽与高来显示这个图片尝试一下。安装DevEco Studio程序选择目标安装目录设置环境变量但是需要重启一下新建一个空白模板设置API为24的模板项目初始化项目自动下载相关依赖完整代码importReactfromreact;import{View,Text,Dimensions,StyleSheet,Image}fromreact-native;//获取屏幕的宽高constscreenWidthMath.round(Dimensions.get(window).width);constscreenHightMath.round(Dimensions.get(window).height);constAppStylesStyleSheet.create({wrap:{width:100%,height:screenHight,backgroundColor:#85BDFF},title:{width:100%,height:72,fontFamily:OPPOSans, OPPOSans,fontWeight:normal,paddingTop:50,fontSize:36,color:#304057,lineHeight:72,textAlign:center,fontStyle:normal},banner:{paddingTop:50,paddingRight:32,paddingLeft:32,},bannerItem:{paddingTop:10,display:flex,flexDirection:row,alignItems:center,justifyContent:center,width:50%,}})functionApp(){return(View style{AppStyles.wrap}Text style{AppStyles.title}鸿蒙ReactNative系统/TextView style{AppStyles.banner}View style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}实时业绩便捷查询/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}订单状态轻松把控/Text/View/ViewView style{{display:flex,flexDirection:row,justifyContent:space-between}}View style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}宣传数据全程管理/Text/ViewView style{AppStyles.bannerItem}Image style{{width:27,height:27}}source{require(./images/checked.png)}/ImageText style{{paddingLeft:4}}海量素材一站转发/Text/View/View/ViewImage style{{width:289,height:182}}source{require(./images/login-bg.png)}/Image/View);}exportdefaultApp;使用技巧无需指定图像的实际大小也就是说这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图或是放大很小的图像。但需要注意的是浏览器还是必须要下载整个文件不管它最终显示的尺寸到底是多大而且如果没有保持其原来的宽度和高度比例图像会发生扭曲。可以非常容易地实现对页面区域的填充同时还可以改善文档的性能。不需要创建一个具有完整尺寸的图像使用 height 和 width 属性把它扩展到更大的尺寸在文档中放置一个彩色的横条。