避免所有屏幕上的状态栏重叠答案

【问题标题】：Avoid status bar overlap on all screens避免所有屏幕上的状态栏重叠
【发布时间】：2017-08-09 03:56:01
【问题描述】：

我希望我的应用程序上的所有屏幕都显示在 iOS 和 Android 的状态栏下方，因此我必须向我的所有屏幕添加 StatusBar 组件或 paddingTop。

有没有办法在全球范围内做到这一点？在 Redux 应用程序中添加 StatusBar 的适当顶级组件在哪里？（例如https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample的哪一部分）？

【问题讨论】：

标签： android ios react-native redux react-redux

【解决方案1】：

第一步：导入平台和状态栏

import { Platform, StatusBar} from 'react-native';

第 2 步：在父视图中添加此样式

paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0

完整代码：

import React, { Component } from 'react';
    import {
      Text, View,
      Platform, StatusBar
    } from 'react-native';

    export default class App extends Component {
      render() {
        return (
          <View style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }}>
            <Text>This is Text</Text>
          </View>
        );
      }
    }

【讨论】：

嘿，非常感谢您发布此解决方案，我进行了广泛搜索以找到解决我的问题的解决方案，这是唯一确定有效的解决方案。
为什么只适用于 iOS？

【解决方案2】：

您可以创建一个<NavigationContainer/> 组件来保存所有不同的页面，这样您就不需要在每个屏幕组件中复制StatusBar 和填充代码。

我在这里创建了一个例子：https://snack.expo.io/SyaCeMOwW

您的导航结构或 redux 流程无需更改任何内容。

【讨论】：

我应该在 Redux Navigation 应用程序中封装哪个组件？试过github.com/react-community/react-navigation/blob/master/… 和github.com/react-community/react-navigation/blob/master/…，都没有工作（没有渲染）
@Avery235 在这种情况下，您需要包装 LoginScree、MainScreen、ProfileScreen，在这些页面组件中导入 NavigationContainer，然后按照我提供的示例将这些页面的组件放入其中。
这不起作用，因为 React Navigation（它有一个导航栏）环绕着组件（LoginScreen 等）
@Avery235 嗨，我在 iOS 上遇到了同样的问题，我几乎尝试了所有方法但没有运气，所有页面都在堆栈导航器或选项卡导航器（嵌套）中，反过来又是顶层navigator 用 redux 的 store 包装。你找到解决办法了吗！？
@Yasir 支持此 PR github.com/react-community/react-navigation/pull/…