避免状态栏在所有屏幕上重叠 [英] Avoid status bar overlap on all screens

问题描述

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

I want all screens on my app to appear below the status bar on both iOS and Android, so I'd either have to add a StatusBar component or a paddingTop to all my screens.

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

Is there a way to do this globally? Where is the appropriate top level component to add the StatusBar in a Redux app? (e.g. which part of https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample)?

推荐答案

步骤1:导入Platform和StatusBar

Step 1: Import Platform and StatusBar

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

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

Step 2: Add this style in parent View

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>
        );
      }
    }

这篇关于避免状态栏在所有屏幕上重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！