zoukankan      html  css  js  c++  java
  • the status bar issue of react-native Modal on Android ( RN v0.57.0)

    Problem: When use Modal in react-native, the status bar is not included if you make a full-screen mask like a translucent background. I found the below method is able to make the status-bar to be included in.

    forgive my poor English, I'm practicing.

    what I do is to replace the default Modal implementation on Android as below.

    1.  make directory like below , and copy code from

    code in file 'ModifiedReactModalHostManager' and 'ModifiedReactModalHostView' is completely copied from 

     'react-native/com/facebook/react/views/modal/ReactModalHostManager' and

    'react-native/com/facebook/react/views/modal/ReactModalHostView'. And replace all 'ReactModalHostView' words with 'ModifiedReactModalHostView' in both files. 

    2. use a self-defined MainReactPackage instead of the default react-native MainReactPackage.

    public class MyMainReactPackage extends MainReactPackage {
    
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            List<ViewManager> list = super.createViewManagers(reactContext);
            for (int i = 0; i < list.size(); i++) {
                if (list.get(i) instanceof ReactModalHostManager) {
                    list.remove(i);
                    list.add(new ModifiedReactModalHostManager());
                    break;
                }
            }
            return list;
        }
    }

    in your ReactApplication class , replace MainReactPackage.

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MyMainReactPackage() // previously is MainReactPackage()
        );
    }

     as above, replace the ReactModalHostManager with ModifiedReactModalHostManager. Now every Modal in react-native code will use the implementation of ModifiedReactModalHostView rather than the default ReactModalHostView.

    3. include the status bar of Modal in ModifiedReactModalHostView.

    replace function `private void updateProperties` with code below.

    private void updateProperties() {
        Assertions.assertNotNull(mDialog, "mDialog must exist when we call updateProperties");
        Window window = mDialog.getWindow();
    
        mDialog.getWindow().setFlags(
                WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
                WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
        );
        Activity currentActivity = getCurrentActivity();
        if (currentActivity != null) {
            FrameLayout content = window.getDecorView().findViewById(android.R.id.content);
            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) content.getLayoutParams();
            View preContentView = currentActivity.getWindow().findViewById(android.R.id.content);
            if (preContentView != null) {
                layoutParams.height = currentActivity.getWindow().findViewById(android.R.id.content).getHeight();
            }
            content.setLayoutParams(layoutParams);
        }
    
        if (mTransparent) {
            mDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
        } else {
            mDialog.getWindow().setDimAmount(0.5f);
            mDialog.getWindow().setFlags(
                    WindowManager.LayoutParams.FLAG_DIM_BEHIND,
    WindowManager.LayoutParams.FLAG_DIM_BEHIND); } }

    Then it is OK to build application and test your Modal.


    Note that this method is related to your react-native's version, when your rn's version changes, you should also make change to the ModifiedModal to make sure it is suitable.

    练英语,练英语的,兄弟们别笑,也是方便遇到这个问题的国际友人们嘛。。。

  • 相关阅读:
    Python将字符串转换成字典
    MySQL索引、视图
    MySQL高级查询
    MySQL函数应用
    MySQL约束
    MySQL基础查询
    MySQL数据库基本语法
    MySQL数据库存储引擎
    MySQL数据库简介与命令行操作
    MySQL 安装和配置环境变量
  • 原文地址:https://www.cnblogs.com/wkmcyz/p/10277436.html
Copyright © 2011-2022 走看看