React Native开发鸿蒙Next---灰度模式

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
@Component
struct 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

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。