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混合开发终结

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

github：https://github.com/nesror

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