美文网首页
react native modal实现全屏

react native modal实现全屏

作者: IDO0 | 来源:发表于2018-02-13 19:01 被阅读0次

    react native 原生modal默认不能覆盖Android的statusbar.这对于一个强迫症患者来说真是难受。也开始尝试将statabar透明但还是不能绘制到statusbar。最后无奈之下只好参考react native的modal去自己写一个啦。
    参考modal目录:node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/

    3DCF58A7-5C63-45B3-927B-F60E890DA8FF.png
    打开ReactModalHostManager 可以看到
    public class ReactModalHostManager extends ViewGroupManager<ReactModalHostView>
    ReactModalHostManager封装的是ReactModalHostView这个ViewGroup.
    于是打开ReactModalHostView这个View找到关键代码
      protected void showOrUpdate() {
        // If the existing Dialog is currently up, we may need to redraw it or we may be able to update
        // the property without having to recreate the dialog
        if (mDialog != null) {
          if (mPropertyRequiresNewDialog) {
            dismiss();
          } else {
            updateProperties();
            return;
          }
        }
    
        // Reset the flag since we are going to create a new dialog
        mPropertyRequiresNewDialog = false;
        int theme = R.style.Theme_FullScreenDialog;
        if (mAnimationType.equals("fade")) {
          theme = R.style.Theme_FullScreenDialogAnimatedFade;
        } else if (mAnimationType.equals("slide")) {
          theme = R.style.Theme_FullScreenDialogAnimatedSlide;
        }
        Activity currentActivity = getCurrentActivity();
        Context context = currentActivity == null ? getContext() : currentActivity;
        mDialog = new Dialog(context, theme);
        mDialog.setContentView(getContentView());
        updateProperties();
    
        mDialog.setOnShowListener(mOnShowListener);
        mDialog.setOnKeyListener(
          new DialogInterface.OnKeyListener() {
            @Override
            public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
              if (event.getAction() == KeyEvent.ACTION_UP) {
                // We need to stop the BACK button from closing the dialog by default so we capture that
                // event and instead inform JS so that it can make the decision as to whether or not to
                // allow the back button to close the dialog.  If it chooses to, it can just set visible
                // to false on the Modal and the Modal will go away
                if (keyCode == KeyEvent.KEYCODE_BACK) {
                  Assertions.assertNotNull(
                    mOnRequestCloseListener,
                    "setOnRequestCloseListener must be called by the manager");
                  mOnRequestCloseListener.onRequestClose(dialog);
                  return true;
                } else {
                  // We redirect the rest of the key events to the current activity, since the activity
                  // expects to receive those events and react to them, ie. in the case of the dev menu
                  Activity currentActivity = getCurrentActivity();
                  if (currentActivity != null) {
                    return currentActivity.onKeyUp(keyCode, event);
                  }
                }
              }
              return false;
            }
          });
    
        mDialog.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
        if (mHardwareAccelerated) {
          mDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
        }
    
        if (currentActivity == null || !currentActivity.isFinishing()) {
          mDialog.show();
        }
      }
    

    可以看到modal其内部也封装的Dialog,那么我们只需要将dialog替换为popwindow是不是也可以做到呢?
    于是开始写代码。经过一番bug调试完成。效果如下:

    modalAndroid.gif 。
    注意:
    1:popupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));//不设置 不是全屏 周围会有空白部分
    popupWindow一定要设置背景否则周围会显示一点空隙。

    完整代码:https://github.com/wuyunqiang/AndroidToRN

    相关文章

      网友评论

          本文标题:react native modal实现全屏

          本文链接:https://www.haomeiwen.com/subject/vatstftx.html