taro HarmonyOS 4.0.0 HUAWEI MateX2 折叠屏机型,支付宝小程序中,不支持onResize钩子

z9zf31ra  于 4个月前  发布在  Harmony
关注(0)|答案(1)|浏览(63)

相关平台

支付宝小程序

复现仓库

git@github.com:shixiaohu2206/taro-test.git
**小程序基础库: 支付宝小程序基础库2.0**
使用框架: React

复现步骤

  1. yarn build:alipay 打包支付宝小程序
  2. HUAWEI MateX2 折叠屏机型,进行真机测试
  3. 开合折叠屏,观察页面是否有onResize相关的toast

期望结果

在开合折叠屏时,触发onResize事件

实际结果

在开合折叠屏时,没有触发onResize事件

环境信息

Taro v3.6.19

  Taro CLI 3.6.19 environment info:
    System:
      OS: macOS 14.1.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.8.0/bin/yarn
      npm: 7.21.0 - ~/.nvm/versions/node/v16.8.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.19 => 3.6.19 
      @tarojs/components: 3.6.19 => 3.6.19 
      @tarojs/helper: 3.6.19 => 3.6.19 
      @tarojs/plugin-framework-react: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-alipay: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-h5: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-jd: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-qq: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-swan: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-tt: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-weapp: 3.6.19 => 3.6.19 
      @tarojs/react: 3.6.19 => 3.6.19 
      @tarojs/runtime: 3.6.19 => 3.6.19 
      @tarojs/shared: 3.6.19 => 3.6.19 
      @tarojs/taro: 3.6.19 => 3.6.19 
      @tarojs/taro-loader: 3.6.19 => 3.6.19 
      @tarojs/webpack5-runner: 3.6.19 => 3.6.19 
      babel-preset-taro: 3.6.19 => 3.6.19 
      eslint-config-taro: 3.6.19 => 3.6.19 
      react: ^18.0.0 => 18.2.0 
      taro-ui: ^3.1.1 => 3.2.0

补充信息

支付宝小程序中,在开合折叠屏时,未触发onResize事件

机型:HUAWEI MateX2 折叠屏,型号代码TET-AN000,HarmonyOS 4.0.0

使用了3种方式

  1. Class Component,使用onResize
  2. Functional Component,使用useResize
  3. 使用 Taro.Current.page.onResize

以上都不触发

伪代码

import { View } from "@tarojs/components";
import Taro, { useLoad, useResize, showToast } from "@tarojs/taro";

import "./index.scss";

export default function Index() {
  useResize(() => {
    showToast({ title: "useResize" });
  });

  useLoad(() => {
    showToast({ title: "useLoad" });

    if (Taro.Current.page) {
      Taro.Current.page.onResize = () => {
        showToast({ title: "Taro.Current.page.onResize" });
      };
    }
  });

  return <View className="my">index</View>;
}
import React, { Component } from "react";
import { View } from "@tarojs/components";
import Taro, { useLoad, useResize, showToast } from "@tarojs/taro";

import "./index.scss";

class Index extends Component {
  onResize() {
    showToast({ title: "Component-onResize" });
  }

  render(): React.ReactNode {
    return <View>index2</View>;
  }
}

export default Index;
ua4mk5z4

ua4mk5z41#

这里提供下曲线解法:

支付宝的原生组件提供onResize钩子:
https://opendocs.alipay.com/mini/framework/page-detail?pathHash=15155d5c#events

在原生组件上绑定个onResize,再通过自定义事件通知到Taro组件内

/**
* @see https://opendocs.alipay.com/mini/framework/page-detail?pathHash=15155d5c#events
*/
Component({
  rootEvents: {
    onResize: function (size) {
      Emitter.emit("ON_RESIZE_EVENT", size);
    }
  }
});
// 监听onResize事件
  useEffect(() => {
   // do something
    const handleOnResize = () => {};
    
    Emitter.on("ON_RESIZE_EVENT", handleOnResize);
    return () => Emitter.off("ON_RESIZE_EVENT", handleOnResize);
  }, []);

相关问题