android dialog 点击遮罩 关闭_一行代码搞定 Android平台React Native Modal 无法延伸到状态栏的问题...

背景介绍

最近在做react-native应用Android端沉浸式状态栏时，发现通过Statusbar.setTrranslucent(ture)设置界面拉通状态栏之后，使用Modal组件的地方界面无法延伸到状态栏，导致使用Modal实现的弹窗背景蒙层顶部会有一个白条，看起来很不爽，在经过一番搜索之后，发现react-native github 上有人提这个问题，但是没有解决。因此就只有找其他方案来解决。

最开始的想法是自定义一个组件来代替原生的Modal组件，但是项目里面使用Modal的地方很多，替换起来也很麻烦。比较致命的一点是Modal组件的一些属性是不好被替代的。比如：onRequestClose，在弹出Modal时，点击物理返回键，会回调这个方法，基本上所有使用Modal的地方都会用它来做关闭弹窗，新的组件需要报保留这些属性和功能。在网上搜到一篇文章[React Native] 还我靓靓 modal 弹窗，借鉴它的思路，最后完美解决。

解决方案和思路

Q: 为什么react native提供的Modal组件Android平台不能延伸到状态栏？

A：因为ModalAndroid 原生用Dialog 实现，Dialog 本身就不能衍生到statusbar

因此我们改一下Modal原生的实现就好了。

解决方案： 就是更改Modal组件的原生代码实现。重新提供一个Modal(就叫：TranslucentModal)组件给react native端。

注意的问题：

1、新的Modal组件和原来的modal 组件所暴露的属性和方法要完全一样，这样替换就很方便。

2、在react-native做统一封装，IOS平台继续使用react-native 提供的Modal组件，Android平台使用TranslucentModal。

最终我们只需要在使用Modal的页面更改一下引用的就ok，真正的只需要修改一行代码。

import { Modal } from "react-native";

改为:

import Modal from 'react-native-translucent-modal';

效果图

对比图	使用RN原生的Modal	使用Transl