React Native 开发鸿蒙 Next---灰度模式
政企相关的 App 在开发过程中，往往需要制作一个灰度模式，用于应对注入国家公祭日等特殊日期情况。Harmony 开发中，由于基于 ArkTs，处理相对比较简单---仅需要在入口文件的 build 方法中对最外层的组件添加 grayscale 属性即可。
/** * Adds a grayscale effect to the current component. * The value is the gray scale conversion ratio. If the input parameter is 1.0, the gray scale image is completely converted to the gray scale image. If the input parameter is 0.0, the image does not change. * If the input parameter is between 0.0 and 1.0, the effect changes. (Percentage) * * @param { number } value * @returns { T } * @syscap SystemCapability.ArkUI.ArkUI.Full * @crossplatform * @form * @atomicservice * @since 11 */ grayscale(value: number): T;
复制代码
在 Index.ets 入口页面，通过 @state 变量控制 grayscale 的赋值。在 RN 应用的入口文件 root.ts，通过定时读取读取服务器上的 json 变量来实现对灰度模式的实时控制。
ArkTs 中 Index.ets
interface GeneratedObjectLiteralInterface_1 { key: string; value: string; description: string;}
@Entry@Componentstruct Index1 { ...... // 灰度模式控制变量 @State enableMourningDay: boolean = false;
aboutToAppear() { ...... // 注册原生发送给rn的emitter this.registerNativeToJsEmitter(); }
registerNativeToJsEmitter() { ...... // RN发送消息给App emitter.on(ConstUtil.event_id_rn_to_app, (data) => { console.info('event_id_rn_to_app and data = ' + JSON.stringify(data)); // let object: GeneratedObjectLiteralInterface_1 = {key:'',value:'',description:''}; // 解析参数 let temp: GeneratedObjectLiteralInterface_1; if (data && data.data && data.data.param && data.data.param) { let object = JSON.parse(data.data.param) as GeneratedObjectLiteralInterface_1; if (object) { if (object.key === 'enable_mourning_day') { this.enableMourningDay = (object.value == 'true'?true:false); } } } }); }
......
build() { Column() { if (this.rnohCoreContext && this.shouldShow) { if (this.rnohCoreContext?.isDebugModeEnabled) { RNOHErrorDialog({ ctx: this.rnohCoreContext }) } ...... } } .height('100%') .width('100%') .grayscale(this.enableMourningDay ? 1 : 0) // 灰度模式 }}
复制代码
RN 中 root.ts
function App(): JSX.Element { ...... const settingTimer = setInterval(() => { xLog(TAG + ' 每隔一分钟读取后台设用于护理悼念模式 '); getSetting(); }, 60 * 1000); // 获取设置 async function getSetting() { xnService.getSetting().then(data => { if(data && data.length > 0){ for(let temp of data){ if(temp.key === 'enable_mourning_day'){ SystemTurboModule.pushStringToHarmony(JSON.stringify(temp),990008); } } } }); }}
复制代码
回顾下 Android 端的灰度模式实现---利用 ColorMatrix。
Paint paint = new Paint();ColorMatrix cm = new ColorMatrix();cm.setSaturation(0);//灰度效果paint.setColorFilter(new ColorMatrixColorFilter(cm));// 开启view硬件加速/** 1、LAYER_TYPE_SOFTWARE 无论硬件加速是否打开，都会有一张Bitmap（software layer），并在上面对WebView进行软渲染。 好处： 在进行动画，使用software可以只画一次View树，很省。 什么时候不要用： View树经常更新时不要用。尤其是在硬件加速打开时，每次更新消耗的时间更多。因为渲染完这张Bitmap后还需要再把这张Bitmap渲染到hardware layer上面去。 2、LAYER_TYPE_HARDWARE 硬件加速关闭时，作用同software。 硬件加速打开时会在FBO（Framebuffer Object）上面做渲染，在进行动画时，View树也只需要画一次。 两者区别： 1、一个是渲染到Bitmap，一个是渲染到FB上。 2、hardware可能会有一些操作不支持。 两者相同： 都是开了一个buffer，把View画到这个buffer上面去。 3、LAYER_TYPE_NONE 这个就比较简单了，不为这个View树建立单独的layer * //如果页面有webView，需加上下面代码 webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);* */getWindow().getDecorView().setLayerType(View.LAYER_TYPE_HARDWARE,paint);
复制代码
不经常在线，有问题可在微信公众号或者掘金社区私信留言更多内容可关注我的公众号悬空八只脚
作者：悬空八只脚链接：https://juejin.cn/post/7470635421505159208
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论