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…