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
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL0YzMzIjM5IDOx0CN1YDOwkjM0EjNxEDM5EDMy0CM4gzN4UTMvwVMwkTMwIzLcBDO4cDO1EzLcd2bsJ2Lc12bj5ycn9Gbi52YugTMwIzZtl2Lc9CX6MHc0RHaiojIsJye.png)
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.
練英語,練英語的,兄弟們别笑,也是友善遇到這個問題的國際友人們嘛。。。