如何防止布局与iOS状态栏重叠

发布于03月05日

我正在为REACTION原生导航工作tutorial.我发现所有布局都是从屏幕顶部开始加载，而不是从状态栏下方开始加载.这会导致大多数布局与状态栏重叠.我可以通过在加载视图时向视图添加填充来修复此问题.这真的是做这件事的方法吗？我不认为手动添加填充是解决问题的实际方法.有没有更优雅的方法来解决这个问题？

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

export default class MyScene extends Component {
    static get defaultProps() {
            return {
                    title : 'MyScene'    
            };  
    }   
    render() {
            return (
                    <View style={{padding: 20}}> //padding to prevent overlap
                            <Text>Hi! My name is {this.props.title}.</Text>
                    </View> 
            )   
    }    
}

下面显示添加填充前后的屏幕截图.

推荐答案

有一个非常简单的方法可以解决这个问题.制作一个零部件.

您可以创建一个状态栏组件，并在父组件中的第一个视图包装器之后首先调用它.

下面是我使用的代码:

'use strict'
import React, {Component} from 'react';
import {View, Text, StyleSheet, Platform} from 'react-native';

class StatusBarBackground extends Component{
  render(){
    return(
      <View style={[styles.statusBarBackground, this.props.style || {}]}> //This part is just so you can change the color of the status bar from the parents by passing it as a prop
      </View>
    );
  }
}

const styles = StyleSheet.create({
  statusBarBackground: {
    height: (Platform.OS === 'ios') ? 18 : 0, //this is just to test if the platform is iOS to give it a height of 18, else, no height (Android apps have their own status bar)
    backgroundColor: "white",
  }

})

module.exports= StatusBarBackground

完成此操作并将其导出到主组件后，将其命名为:

import StatusBarBackground from './YourPath/StatusBarBackground'

export default class MyScene extends Component {
  render(){
    return(
      <View>
        <StatusBarBackground style={{backgroundColor:'midnightblue'}}/>
      </View>
    )
  }
}