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

Question

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

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

Answer 1

第1步:导入平台和StatusBar

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

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

paddingTop: Platform.OS === 'ios' ? 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 === 'ios' ? StatusBar.currentHeight : 0 }}>
            <Text>This is Text</Text>
          </View>
        );
      }
    }

Answer 2

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

\n\n

我在这里创建了一个示例：\xe3\x80\x80 https://snack.expo.io/SyaCeMOwW

\n\n

导航结构或 redux 流程不需要改变。

\n