weex沉浸式导航栏解决方案

  • 条件

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

    1. 通过进入weex页面的参数来通知app端相关状态
     this.$jump('vip/center', {
       translucentStatus: true,
       navigationBarHidden: true,
       ...
     });
    
    1. 根据app返回的状态栏高度调整响应的界面
       weex.requireModule('common').getStatusBarHeight(function(statusBarHeight) {
         me.statusBarHeight = statusBarHeight * 2;
       });
    
       <image class="top_bg"
            :style="{ height: (420 + statusBarHeight) + 'px' }"
            src="..." />
       ...
    
    1. 通过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);
           }
       }
    
  • 效果


    image
  • 扩展

  • 也可以访问我的个人博客:http://blog.yzapp.cn

  • github:https://github.com/nesror

  • 掘金:[https://juejin.im/user/561b1b9c60b2617174659ba0]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。