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

我正在为React Native导航工作tutorial。我发现所有布局从屏幕顶部开始加载，而不是在状态栏下方加载。这导致大多数布局与状态栏重叠。我可以通过在加载视图时添加填充来解决此问题。这是实际的方式吗？我不认为手动添加填充是解决这个问题的一种实际方法。有没有更好的方法来解决这个问题？如何防止布局与iOS状态栏重叠

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

下面显示添加填充之前和之后的屏幕截图。

来源

2017-03-04 Cliff

有一个非常简单的方法来解决这个问题。制作一个组件。

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

下面是一个我用的是代码：

'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') ? 20 : 0, //this is just to test if the platform is iOS to give it a height of 20, 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> 
    ) 
    } 
}

来源

2017-03-05 01:39:41

'MidnightBlue'无效，由React Native告知：*警告：失败的道具类型：提供了无效的道具'backgroundColor' * – Raptor

它应该是'midnightblue'。 – bblincoe

iOS状态栏不是修正大小。在共享Wifi或通话时，它可以更大。 –

您可以通过添加填充到您的导航栏组件或只是广告具有相同等高，使状态栏在视图树的顶部，像facebook的一个的backgroundColor视图处理这应用程序会这样做

来源

2017-03-04 18:52:43 philipheinser

难道这个身高值是固定的，不管你有什么手机都不会改变吗？如果是这样，我可以在哪里找到有关iOS/Android的正确特定值的信息？ – nbkhope

@ philipheinser解决方案确实有效。

但是，我预计React Native的StatusBar组件将为我们处理。

它不，unfortunlty，但我们可以通过伊斯利我们intoru自己的高顺序组件

./StatusBar.js

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

// here, we add the spacing for iOS 
// and pass the rest of the props to React Native's StatusBar 

export default function (props) { 
    const height = (Platform.OS === 'ios') ? 20 : 0; 
    const { backgroundColor } = props; 

    return (
     <View style={{ height, backgroundColor }}> 
      <StatusBar { ...props } /> 
     </View> 
    ); 
}

./index.js

abstact是远quait

import React from 'react'; 
import { View } from 'react-native'; 

import StatusBar from './StatusBar'; 

export default function App() { 
    return (
     <View> 
     <StatusBar backgroundColor="#2EBD6B" barStyle="light-content" /> 
     { /* rest of our app */ } 
     </View> 
    ) 
}

前：

之后：

来源

2018-02-26 14:37:44

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

回答

相关问题