weex沉浸式导航栏解决方案

最新推荐文章于 2024-02-27 18:58:39 发布

转载最新推荐文章于 2024-02-27 18:58:39 发布 · 703 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b91eaa55188255ca00c7025

文章标签：

#移动开发 #javascript #ViewUI

本文介绍如何在Weex中动态调整界面以适配不同设备的状态栏高度，包括安卓和iOS平台。通过Weex模块获取状态栏高度，并在代码中进行相应调整，确保跨平台应用的一致性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

条件
1. weex页面要通知app端是否显示原生导航栏（android，ios）和沉浸式导航（android）
2. 要根据系统状态栏高度动态设置最顶端布局的height和margin
3. app需要提供系统状态栏高度。android还需要设置FLAG_TRANSLUCENT_STATUS并且考虑api19以下的情况

直接上主要代码

通过进入weex页面的参数来通知app端相关状态

 this.$jump('vip/center', {
   translucentStatus: true,
   navigationBarHidden: true,
   ...
 });
复制代码

根据app返回的状态栏高度调整响应的界面

   weex.requireModule('common').getStatusBarHeight(function(statusBarHeight) {
     me.statusBarHeight = statusBarHeight * 2;
   });
复制代码

   <image class="top_bg"
        :style="{ height: (420 + statusBarHeight) + 'px' }"
        src="..." />
   ...
复制代码

通过WXModule提供getStatusBarHeight()

android端需要针对api19以下做处理

   @JSMethod(uiThread = true)
   public void getStatusBarHeight(final JSCallback jsCallback) {
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
           jsCallback.invokeAndKeepAlive(UiUtil.px2dip(mWXSDKInstance.getContext(),UiUtil.getStatusBarHeight(mWXSDKInstance.getContext())));
       }else {
           jsCallback.invokeAndKeepAlive(0);
       }
   }
复制代码