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,
     ...
   });
  复制代码

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

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

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

  3. 通过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);
         }
     }
  复制代码

• 效果

• 扩展

  • 4个月原生weex混合开发终结

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

• github：github.com/nesror

• 简书：www.jianshu.com/u/85e5f9992…

转载于:https://juejin.im/post/5b91eaa55188255ca00c7025