使用全屏主题时，React Native 'Modal' 组件不覆盖 Android 上的整个屏幕答案

【问题标题】：React Native 'Modal' Component Not Covering Entire Screen on Android when using Full Screen Theme使用全屏主题时，React Native 'Modal' 组件不覆盖 Android 上的整个屏幕
【发布时间】：2016-08-24 14:32:13
【问题描述】：

标题说明了一切。我已经编辑了 styles.xml 文件 (/projectname/android/app/src/res/values/styles.xml) 以包含以下内容：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

此代码成功使应用全屏显示，移除了 Android 状态栏。但是，如果我启动 React Native 的“模态”组件，模态只会延伸到状态栏边缘所在的顶部，留下一个状态栏大小的间隙。我将如何修改模态以一直延伸到顶部？

这是带有间隙的打开模式的屏幕截图：

【问题讨论】：

您找到解决方案了吗？我现在也有同样的问题。
@Zri 或 William 你找到解决方案了吗？我也在努力寻找解决方案。
很抱歉回复晚了。我在android上用过这个：github.com/Sunhat/react-native-extra-dimensions-android它可能与你的RN版本不兼容，所以我认为我直接对其进行了一些更改。
用 flex: 1 将模态框包裹在视图中
在你的模态组件中尝试 statusBarTranslucent = true

标签： android react-native

【解决方案1】：

您可以将statusBarTranslucent={true} 应用于反应原生<Modal> 组件，如下例所示

<Modal statusBarTranslucent={true}>
//your modal content
<Modal />

知道，statusBarTranslucent={true} 仅适用于 android

【讨论】：

谢谢！确实有帮助。
这是正确的答案，解决了我的问题。谢谢。

【解决方案2】：

我曾尝试使用原生 Android 代码来隐藏单个组件的 StatusBar，它可以在其他组件中使用，但是当我在模态中使用它时，它就不起作用了。

然后，我尝试删除模态视图并使用 react-navigation 的 StackNavigator 导航到特定路径并使用 BackHandler 组件处理后退按钮并且它起作用了。

【讨论】：