react native modal实现全屏

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
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实现全屏)