HarmonyOS鸿蒙Next 5.x系统中React native的measureLayout方法获取不到值

HarmonyOS鸿蒙Next 5.x系统中React native的measureLayout方法获取不到值

运行后报以后错误信息：

ERROR  Warning: Warning: ref.measureLayout must be called with a ref to a native component.

在 iOS 和 Android 都没问题的；

使用 measureInWindow 和 measure 也都没问题，就 measureLayout 报错；

完整代码如下：

import React, { useRef } from 'react';
import { Text, View, Button, findNodeHandle } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

const HarmonyDemo = () => {
  const viewARef = useRef<View | null>(null);
  const viewBRef = useRef<View | null>(null);

  const measureLayout = () => {
    if (viewARef.current && viewBRef.current) {
      const viewAHandle = findNodeHandle(viewARef.current);
      const viewBHandle = findNodeHandle(viewBRef.current);

      if (viewAHandle && viewBHandle) {
        viewARef.current.measureLayout(
          viewBHandle,
          (x, y, width, height) => {
            console.log(`X: ${x}, Y: ${y}, Width: ${width}, Height: ${height}`);
          },
          () => {
            console.error(1);
          },
        );
      }
    }
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: '#fc0',
          marginTop: 35,
        }}
      >
        <View style={{ flex: 1, padding: 20 }}>
          <View
            ref={viewBRef}
            style={{
              backgroundColor: 'lightgray',
              height: 150,
              padding: 10,
            }}
          >
            <Text>组件A</Text>
            <View style={{ height: 20 }} />
            <View
              ref={viewARef}
              style={{
                backgroundColor: 'skyblue',
                height: 50,
                padding: 10,
              }}
            >
              <Text>组件B</Text>
            </View>
          </View>
          <Button title="获取组件B相对组件A的距离" onPress={measureLayout} />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

export default HarmonyDemo;

更多关于HarmonyOS鸿蒙Next 5.x系统中React native的measureLayout方法获取不到值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

已解决，鸿蒙系统中，使用的时候，直接用ref.current就是了，不能使用findNodeHandle

const measureLayout = () => {
  if (viewARef.current && viewBRef.current) {
    viewARef.current.measureLayout(
      viewBRef.current,
      (x, y, width, height) => {
        console.log(`X: ${x}, Y: ${y}, Width: ${width}, Height: ${height}`);
      },
      () => {
        console.error(1);
      },
    );
  }
};

更多关于HarmonyOS鸿蒙Next 5.x系统中React native的measureLayout方法获取不到值的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next 5.x中，React Native的measureLayout方法获取不到值可能是由于原生组件与JS线程通信问题导致。鸿蒙的渲染机制与Android/iOS存在差异，需检查以下方面：

  1. 确保调用的组件已完成渲染（使用onLayout回调确认）
  2. 组件的collapsable属性需设置为false
  3. 检查ref是否正确绑定到鸿蒙原生组件
  4. 在鸿蒙环境中，部分RN组件可能需要使用鸿蒙专用封装

可尝试改用UIAutomator提供的测试接口或鸿蒙专用的组件测量API作为替代方案。

在HarmonyOS Next 5.x系统中，React Native的measureLayout方法确实存在兼容性问题。这是由于HarmonyOS的渲染机制与Android/iOS存在差异导致的。建议采用以下替代方案：

  1. 使用measure方法替代measureLayout：
const measureLayout = () => {
  if (viewARef.current && viewBRef.current) {
    viewARef.current.measure((x, y, width, height, pageX, pageY) => {
      viewBRef.current.measure((x2, y2, width2, height2, pageX2, pageY2) => {
        const relativeX = pageX - pageX2;
        const relativeY = pageY - pageY2;
        console.log(`相对位置: X: ${relativeX}, Y: ${relativeY}`);
      });
    });
  }
};
  1. 或者使用measureInWindow：
const measureLayout = () => {
  if (viewARef.current && viewBRef.current) {
    viewARef.current.measureInWindow((x, y, width, height) => {
      viewBRef.current.measureInWindow((x2, y2, width2, height2) => {
        const relativeX = x - x2;
        const relativeY = y - y2;
        console.log(`相对位置: X: ${relativeX}, Y: ${relativeY}`);
      });
    });
  }
};

这两种方法在HarmonyOS Next上都能正常工作，可以获取到组件间的相对位置信息。

回到顶部