• 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.

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

  • 相关阅读:
    微信小程序 单选按钮 最佳
    微信小程序 单选按钮的实现
    微信小程序 单选框实现
    Java Code To Create Pyramid and Pattern
    Java language
    npm Err! Unexpected end of JSON input while parsing near
    Node.js Express FrameWork Tutorial
    Higher-Order Function Examples
    Create First HTTP Web Server in Node.js: Complete Tutorial
    Node.js NPM Tutorial: Create, Publish, Extend & Manage
  • 原文地址:https://www.cnblogs.com/wkmcyz/p/10277436.html
Copyright © 2020-2023  润新知