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

Question

我正在为 React Native 导航使用 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> 
            )   
    }    
}

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

Answer 1

现在您可以使用 React Navigation 中包含的 SafeAreaView：

<SafeAreaView>
    ... your content ...
</SafeAreaView>

Answer 2

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

您可以创建一个 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') ? 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>
    )
  }
}

 

Answer 3

我为此尝试了一种更简单的方法。

我们可以在android上获取Status Bar的高度，并结合它使用SafeAreaView使代码在两个平台上都可以工作。

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

如果我们退出 Platform.OS 和 StatusBar.currentHeight 我们会得到日志，

console.log('Height on: ', Platform.OS, StatusBar.currentHeight);

身高：android 24 和 身高：android 24

我们现在可以选择使用

向我们的容器视图添加边距/填充

paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

App.js 中的最终代码如下：

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
        <View style={styles.container}>
          <Text>Hello World</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  }
});

Answer 4

@philipheinser 解决方案确实有效。

不过，我希望 React Native 的 StatusBar 组件会为我们处理这个问题。

不幸的是，它没有，但我们可以通过围绕它创建自己的组件来轻松地将其抽象出来：

./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

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

前：

后：

Answer 5

react-navigation 文档对此有很好的解决方案。首先，they recommend不使用 React Native 中包含的 SafeAreaView，因为：

当 React Native 导出一个 SafeAreaView 组件时，它有一些 固有问题，即如果包含安全区域的屏幕正在动画， 它会导致跳动的行为。另外，该组件仅支持 iOS 10+ 不支持旧 iOS 版本或 Android。我们 推荐使用 react-native-safe-area-context 库来处理 以更可靠的方式提供安全区域。

相反，他们推荐react-native-safe-area-context - 它看起来像这样：

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';
import { useSafeArea } from 'react-native-safe-area-context';

export default function MyScene({title = 'MyScene'}) {
    const insets = useSafeArea();

    return (
        <View style={{paddingTop: insets.top}}>
            <Text>Hi! My name is {title}.</Text>
        </View> 
    )   
}

我想指出，使用这个库提供的SafeAreaView 可能是一个更好的主意，因为现在手机的底部可能也有可以与 UI 元素重叠的元素。当然，这一切都取决于您的应用程序。 （有关这方面的更多详细信息，请参阅我在开头链接到的 react-navigation 文档。）

Answer 6

这是一种适用于iOS的方法：

<View style={{height: 20, backgroundColor: 'white', marginTop: -20, zIndex: 2}}>
   <StatusBar barStyle="dark-content"/></View>

Answer 7

您可以通过向导航栏组件添加填充来处理此问题，或者只是在视图树顶部使用背景颜色广告一个与状态栏具有相同高度的视图，就像 facebook 应用程序那样。

Answer 8

只需简单的用户反应原生默认状态栏即可实现此功能。

<View style={styles.container}>
    <StatusBar backgroundColor={Color.TRANSPARENT} translucent={true} />
    <MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={styles.map}
      region={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}
    />
  </View>

Answer 9

如果你把 SaveAreaView 和 StatusBar 结合起来，你就明白了。

https://reactnative.dev/docs/statusbar https://reactnative.dev/docs/safeareaview

这样做：

<SafeAreaView>
  <View style={{flex: 1}}>
    <StatusBar translucent={false} backgroundColor="#fff" />

    // Your dark magic here
  </View>
</SafeAreaView>