HarmonyOS鸿蒙Next中RN的Dimensions.get('window'))宽高为0问题

HarmonyOS鸿蒙Next中RN的Dimensions.get(‘window’))宽高为0问题 RN版本0.72.5 react-native-harmony版本0.72.67 在RN中取Dimensions.get(‘window’))

console.log('window====', Dimensions.get('window'))

打印结果为： cke_4274.png 取到的宽高均为0，请各位帮分析一下报错原因并给出解决方案；


更多关于HarmonyOS鸿蒙Next中RN的Dimensions.get('window'))宽高为0问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

我现在先用 Dimensions.get(‘screen’)代替，可以获取手机屏幕宽高。

更多关于HarmonyOS鸿蒙Next中RN的Dimensions.get('window'))宽高为0问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Dimensions.get(‘screen’)代替只是臨時的解決方案，一些三方庫或組件也使用了Dimensions.get(‘window’))獲取屏幕寬高，若使用Dimensions.get(‘screen’)可能還會導致引發一些不可控的問題。 我的問題是由於重寫onWindowStageCreate方法導致的，在該方法下添加super.onWindowStageCreate(windowStage);即可；

我也遇到了，https://developer.huawei.com/consumer/cn/forum/topic/0204193070307980058?fid=0109140870620153026   技术支持说要升级到  0.72.75 我还没试；

感谢回复，感觉不是版本的问题，升级之后还是取不到值。

若是你解决了，麻烦回复我下，我这边还是没解决😂，

解决了，本质原因是重写了鸿蒙侧onWindowStageCreate方法导致的： 在该方法下添加super.onWindowStageCreate(windowStage);就好了。 同时我把react-native-harmony回退到0.72.59版本了，不清楚和这个有没有关系。

在HarmonyOS Next中，RN的Dimensions.get('window')返回宽高为0，通常是由于组件初始化时窗口尺寸尚未就绪。可尝试在onLayout回调中获取，或使用useWindowDimensions Hook实时监听。确保在组件挂载后异步获取尺寸，或检查容器布局是否正确渲染。

在HarmonyOS Next中，Dimensions.get('window')返回宽高为0，通常是因为在应用启动或组件挂载的早期阶段，窗口的尺寸信息尚未准备就绪。这并非报错，而是获取时机问题。

核心原因分析：

  1. 生命周期时机：在App或根组件componentDidMount/useEffect中立即调用Dimensions.get('window')时，HarmonyOS的UI布局可能尚未完成，导致获取到初始值0。
  2. 事件驱动未触发：Dimensions模块依赖原生层在窗口尺寸就绪后触发事件更新，若在事件触发前获取，值可能为0。

解决方案：

  1. 使用Dimensions.addEventListener监听尺寸变化（推荐）： 在组件挂载时添加监听器，确保获取到的是布局完成后的实际尺寸。
    import { Dimensions } from 'react-native-harmony';

useEffect(() => {
  const subscription = Dimensions.addEventListener('change', ({ window }) => {
    console.log('实际窗口尺寸:', window);
    // 在此处使用宽高进行布局或状态更新
  });
  // 初始获取（可能仍为0，但监听器会捕获后续有效值）
  console.log('初始尺寸:', Dimensions.get('window'));
  
  return () => subscription.remove();
}, []);
  2. 延迟获取： 在useEffect中设置短暂延迟（如setTimeout），等待UI线程布局完成。
    useEffect(() => {
  setTimeout(() => {
    console.log('延迟后尺寸:', Dimensions.get('window'));
  }, 100);
}, []);
  3. 在onLayout事件中获取： 在根视图的onLayout回调中获取，此时布局已计算完成。
    const handleLayout = (event) => {
  const { width, height } = event.nativeEvent.layout;
  console.log('布局完成后的尺寸:', { width, height });
};

return <View onLayout={handleLayout} style={{ flex: 1 }}>...</View>;

注意事项：

  • 避免同步依赖初始尺寸：不要假设Dimensions.get('window')在应用启动时立即返回有效值，应通过监听或事件驱动方式处理。
  • HarmonyOS Next适配差异：与Android/iOS相比，HarmonyOS的UI初始化时序可能存在差异，需通过监听机制确保兼容性。
  • react-native-harmony版本：确保使用最新兼容版本（你当前的0.72.67是较新版本），但此问题主要与系统UI准备时序相关，而非库版本问题。

总结：优先采用Dimensions.addEventListener方案，这是React Native标准API，能可靠响应尺寸变化（如屏幕旋转），且符合HarmonyOS Next的UI事件驱动模型。

回到顶部