如何防止布局与iOS状态栏重叠 [英] How to prevent layout from overlapping with iOS status bar

问题描述

我正在为React Native制作

解决方案

有一种非常简单的方法可以解决这个问题。创建一个组件。

您可以创建一个StatusBar组件，并在父组件中的第一个视图包装器之后调用它。

以下是我使用的代码：

 'use strict'
 import React，{组件}来自'react'; 
从'react-native'导入{View，Text，StyleSheet，Platform}; 
 
 class StatusBarBackground extends Component {
 render（）{
 return（
< View style = {[styles.statusBarBackground，this.props.style || { }]}> //这部分只是为了让你可以通过传递它作为prop 
< / View> 
）来改变状态栏的颜色。 
} 
} 
 
 const styles = StyleSheet.create（{
 statusBarBackground：{
 height：（Platform.OS ==='ios'） ？18：0，//这只是测试平台是否为iOS，高度为18，否则，没有高度（Android应用程序有自己的状态栏）
 backgroundColor：white，
} 
 
}）
 
 module.exports = StatusBarBackground 
  

执行此操作并将其导出到主组件后，请按以下方式调用：

 从'导入StatusBarBackground。 / YourPath / StatusBarBackground'
 
导出默认类MyScene扩展组件{
 render（）{
 return（
< View> 
< StatusBarBackground style = {{backgroundColor：'midnightblue'}} /> 
< / View> 
）
} 
} 
  

 

I am working on tutorial for React Native navigation. I found out that all layout starts loading from top of screen instead of below of the status bar. This causes most layouts to overlap with the status bar. I can fix this by adding a padding to the view when loading them. Is this the actual way to do it? I don' think manually adding padding is an actual way to solve it. Is there a more elegant way to fix this?

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

Below shows the screenshots before and after the padding is added.

解决方案

There is a very simple way to fix this. Make a component.

You can create a StatusBar component and call it first after the first view wrapper in your parent components.

Here is the code for the one I use:

'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

After doing this and exporting it to your main component, call it like this:

import StatusBarBackground from './YourPath/StatusBarBackground'

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

 

这篇关于如何防止布局与iOS状态栏重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！